Layout - Cách thiết kế bố cục cho trang web trong HTML
Layout là gì? Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web. Một trang web thường gồm các thành phần chính như: Header: Giới thiệu logo, một vài câu khẩu hiệu của trang web Footer: Thông tin bản quyền của trang web Menu: Thanh chức năng Nội ...
Layout là gì?
Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web.
Một trang web thường gồm các thành phần chính như:
- Header: Giới thiệu logo, một vài câu khẩu hiệu của trang web
- Footer: Thông tin bản quyền của trang web
- Menu: Thanh chức năng
- Nội dung
- ....
Ví dụ, dưới đây là một mẫu Layout cơ bản gồm 4 thành phần: Header, Footer, Menu, Nội dung.
- - Bài 01: Tên bài học
- - Bài 02: Tên bài học
- - Bài 03: Tên bài học
- - Bài 04: Tên bài học
- - Bài 05: Tên bài học
- - Bài 06: Tên bài học
- - Bài 07: Tên bài học
- - Bài 08: Tên bài học
- - Bài 09: Tên bài học
- - Bài 10: Tên bài học
- - Bài 11: Tên bài học
- - Bài 12: Tên bài học
Layout là gì?
Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web.
Một trang web thường gồm các thành phần chính như:
- Header: Giới thiệu logo, một vài khẩu hiệu của trang web
- Footer: Thông tin bản quyền của trang web
- Menu: Thanh chức năng
- Nội dung
- ....
Cách thiết kế Layout
Trong việc thiết kế Layout, thẻ <div> thường được dùng để phân chia các thành phần chính của trang web.
Trong mỗi thành phần chính, ta có thể thêm các thẻ <div> khác cho thành phần nhỏ hơn.
Kết hợp với thuộc tính định dạng CSS, ta có thể thiết kế được Layout như ý.
Ở bài này, tôi sẽ hướng dẫn bạn cách thiết kế một Layout đơn giản như sau: (Hoặc xem Layout cụ thể tại đây)
Layout là gì?
Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web.
Một trang web thường gồm các thành phần chính như:
- Header: Giới thiệu logo, một vài khẩu hiệu của trang web
- Footer: Thông tin bản quyền của trang web
- Menu: Thanh chức năng
- Nội dung
- ....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin:0px;
}
#container{
awidth:800px;
border:1px solid gray;
margin-left:auto;
margin-right:auto;
}
#header{
background-color:#73ad21;
color:white;
}
#content{
margin:15px;
}
#footer{
background-color:#ddd;
font-size:18px;
text-align:center;
padding:15px;
}
.title1{
font-size:30px;
text-align:center;
padding-top:15px;
}
.title2{
text-align:center;
font-size:18px;
padding-top:5px;
padding-bottom:15px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="title1">WEB CƠ BẢN .VN</div>
<div class="title2">Hướng dẫn học lập trình web từ cơ bản đến nâng cao</div>
</div>
<div id="content">
<h2>Layout là gì?</h2>
<p>Một trang web thường gồm các thành phần chính như:</p>
<ul type="circle">
<li>Header: Giới thiệu logo, một vài khẩu hiệu của trang web</li>
<li>Footer: Thông tin bản quyền của trang web</li>
<li>Menu: Thanh chức năng</li>
<li>Nội dung</li>
<li>....</li>
</ul>
</div>
<div id="footer">©2016 Web cơ bản All Rights Reserved</div>
</div>
</body>
</html>
Giải thích đoạn mã
Layout gồm 3 thành phần chính: header, content, footer.
Thêm một thành phần container dùng để làm thùng chứa cho header, content, footer.
Trong CSS, ta thiết lập chiều rộng cho khối container là 800px. Dùng thuộc tính margin-left và margin-right để canh cho khối container nằm ở giữa màn hình.
