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
<html>
<head>
<meta charset="utf-8">
<title> Hướng dân sữ dụng Div</title>
<style type="text/css">
/* source code css để ở đây */
</style>
</head>
<body>
<!--tao backgroud cho toàn trang-->
<div id="background">
<div id="background_con">
<!--header-->
<div class="header">
<h1>header</h1>
</div>
<!--end header-->
<!--slide_bar_left-->
<div class="slide_bar_left">
<h2>list mục sản phẩm</h2>
</div>
<!--end slide_bar_left-->
<!--content-->
<div class="content">
<h2>Nội dung của trang</h2>
</div>
<!--end content-->
<!--slide_bar_right-->
<div class="slide_bar_right">
<h2>list mục được xem nhiều nhất</h2>
</div>
<!--end slide_bar_right-->
<!--footer-->
<div class="footer" style="text-align:center">
<h1>copyright:nguyễn thanh hòa</h1>
</div>
<!--end footer-->
</div>
</div>
<!--ket thuc background-->
</body>
</html>
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;}
