cách thiết kế bố cục cho trang web trong HTML

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 h

Trang 1

Layout - Cách thiết kế bố cục cho trang web trong HTML

webcoban.vn/html/layout-cach-thiet-ke-bo-cuc-cho-trang-web-trong-html.html

Bài 01: Một số kiến thức cơ bản về 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 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

WEB CƠ BẢN VN

Hướng dẫn học lập trình web từ cơ bản đến nâng cao

- Bài 01: Tên bài học

Layout là gì?

Header: Giới thiệu logo, một vài khẩu hiệu của trang web

Trang 2

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)

WEB CƠ BẢN VN

Hướng dẫn học lập trình web từ cơ bản đến nâng cao

Layout là gì?

Header: Giới thiệu logo, một vài khẩu hiệu của trang web

Nội dung

Code Layout

<!DOCTYPE html>

<html>

<head>

body{

margin:0px;

}

#container{

Trang 3

width: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 class="title2">Hướng dẫn học lập trình web từ cơ bản đến nâng cao</div>

</div>

<h2>Layout là gì?</h2>

<p>Một trang web thường gồm các thành phần chính như:</p>

<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>

</ul>

</div>

</body>

</html>

Xem ví dụ

Trang 4

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 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

Bài 01: Một số kiến thức cơ bản về HTML

Định dạng
Số trang	4
Dung lượng	48,23 KB