blogloi.com-Thiết kế layout web bằng CSS cơ bản

Thiết kế layout web CSS blogloi.com/thiet-ke-layout-web-bang-css-co-ban Nguyễn Lợi Đăng ngày 19/12/2015 Đây cuối chuỗi Series học CSS toàn tập dành cho tất người, tìm hiểu cách thiết kế layout web css cách chi tiết Thiết kế layout bước quan trọng quy trình thiết kế website Vì kiến thức cần thiết mà bạn cần phải nắm vững Kết thúc làm layout hình Chúng ta sử dụng thẻ div để vẽ layout Thiết kế layout web CSS Để bắt đầu vào thực hành, chắn bạn phải có phần mềm để viết code tiếp tục hướng dẫn bạn cơng cụ Adobe Dreamweaver CS6 Bạn mở phần mềm lên new trang web viết phần body đoạn code HTML 1/7 sau : Nội dung đoạn code HTML : id : vùng chọn selector thẻ (bạn chọn class Nhưng thẻ trang web nên khuyên bạn nên dùng id) id = “wrapper” : vùng chọn bao quanh tồn nội dung bên trang web Nói dễ hiểu vùng chọn Cha id = “header” : Là vùng chọn trang web Thường để banner, logo id = “menu” : vùng chọn menu website id = “left” : vùng chọn nội dung bên tay trái trang web id = “content” : vùng chọn nội dung trang web id = “right” : vùng chọn nội dung bên tay phải trang web id = “footer” : vùng chọn chân trang web Bạn nên xem qua : Các vùng chọn selector thông dụng Tiếp tục, sau code HTML vào định dạng layout web CSS Đây phần quan trọng định tính thành cơng layout bạn Trước cặp thẻ bạn mở cặp để định dạng theo kiểu internal Bạn định dạng theo kiểu inline hay external Xem qua : Các cách viết CSS trang web Bây bắt đầu thôi! Bước : Đưa định dạng margin padding Bước : Tiếp tục định dạng cho selector id=”wrapper” chứa toàn nội dung trang web Trong : #wrapper : định dạng cho selector có id wrapper width : chiều rộng trang web margin : auto để đưa trang web trình duyệt color : màu chữ tồn trang web Bước : Tiếp tục định dạng cho selector id=”header” Trong : 2/7 #header : định dạng cho selector có id header width : chiều rộng header height : chiều cao header background-color : màu header Bước : Tiếp tục định dạng cho selector id=”menu” Ý nghĩa thuộc tính tương tự selector header Bước :Tiếp tục định dạng cho selector id=”left” Trong : bạn ý thuộc tính float : left Đây thuộc tính quan trọng thiết kế layout web css chắn phải có để dồn nội dung phần left qua trái trang web Bạn cần nhớ thuộc tính Bước : Tiếp tục định dạng selector id=”content” Tương tự selector left Khi định dạng selector content bạn cần phải có thuộc tính float : left để dồn nội dung qua trái Bước : Tiếp tục định dạng selector id=”right” Ở selector bạn phải sử dụng thuộc tính float Nhưng float : left float : right Bước : Bước cuối định dạng selector id=”footer” Chú ý : Ở selector có thuộc tính đặc biệt quan trọng clear : both Đây thuộc tính bắt buộc phải có bạn sử dụng thuộc tính float phía Nếu thiếu khơng thấy footer layout bạn Đến bạn hoàn thành thiết kế layout web CSS Bạn chạy trang web lên tận hưởng thành Dưới tổng hợp lại tồn code layout này: 3/7 4/7 5/7 6/7 Xem video Watch Video At: https://youtu.be/fRs9UFQ9lv4 Link youtube : https://www.youtube.com/watch?v=fRs9UFQ9lv4 Chúc bạn thành công! 4.8 / ( votes ) 7/7 ... float phía Nếu thiếu khơng thấy footer layout bạn Đến bạn hoàn thành thiết kế layout web CSS Bạn chạy trang web lên tận hưởng thành Dưới tổng hợp lại tồn code layout này: 3/7 4/7 5/7 6/7 Xem video... vùng chọn chân trang web Bạn nên xem qua : Các vùng chọn selector thông dụng Tiếp tục, sau code HTML vào định dạng layout web CSS Đây phần quan trọng định tính thành cơng layout bạn Trước cặp... bạn ý thuộc tính float : left Đây thuộc tính quan trọng thiết kế layout web css chắn phải có để dồn nội dung phần left qua trái trang web Bạn cần nhớ thuộc tính Bước : Tiếp tục định dạng selector