Xin chào các bạn hôm nay mình xin hướng dẫn các bạn sử dụng div để tạo bố cục cho một trang web của các bạn.
Bài viết này cũng tương đối đơn gian nên tôi cũng không giải thích nhiều cho lắm nhé các bạn.
Ở đây tôi đã chuẩn bị một layout bố cục sẵn rồi giờ chỉ còn viết code cho layout đã được vẽ trên photoshop thôi.
Dưới đây là toàn bộ code. đầu tiên các bạn tạo cho tôi một file tên gì cũng được tùy các bạn nhé rồi copy source code bên dưới vào đúng vị trí là được
Code HTML
Hướng dân sữ dụng Div
/* source code css để ở đây */
header
list mục sản phẩm
Nội dung của trang
list mục được xem nhiều nhất
copyright:nguyễn thanh hòa
Code CSS
*{margin: 0px;padding:0px;}
div#background{width: 900px;margin: 0px auto;}
div#background div#background_con{width: 900px;margin: 0px auto;}
div#background_con div{float: left;}
div.header{width: 900px;background: blue;height: 150px;text-align: center;line-height: 150px;}
div.slide_bar_left{width: 250px;background: #ccc;height: 500px;}
div.content{width: 400px;background: #686;height: 500px;}
div.slide_bar_right{width: 250px;background: #ccc;height: 500px;}
div.footer{width: 900px;background: #000;height: 100px;text-align: center;color: aqua;line-height: 110px;}
Còn đây là toàn bộ source code của file:
Hướng dân sữ dụng Div
*{margin: 0px;padding:0px;}
div#background{width: 900px;margin: 0px auto;}
div#background div#background_con{width: 900px;margin: 0px auto;}
div#background_con div{float: left;}
div.header{width: 900px;background: blue;height: 150px;text-align: center;line-height: 150px;}
div.slide_bar_left{width: 250px;background: #ccc;height: 500px;}
div.content{width: 400px;background: #686;height: 500px;}
div.slide_bar_right{width: 250px;background: #ccc;height: 500px;}
div.footer{width: 900px;background: #000;height: 100px;text-align: center;color: aqua;line-height: 110px;}
header
list mục sản phẩm
Nội dung của trang
list mục được xem nhiều nhất
copyright:nguyễn thanh hòa
Chúc các bạn làm thành công nhé!