Chúng ta sẽ thử hoàn thiện website đầu tiên của chúng ta.
Đây là mã HTML mà chúng ta viết xong trong phần trước.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
.about-us .detail .choose-list li {
float: left;
width: 50%;
}
</style>
</head>
<body>
<section class="about-us">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p>Hội An, một thành phố cổ ở Việt Nam, nổi tiếng với văn hóa ẩm thực phong phú và đa dạng. Dưới đây là một số món ăn nổi bật ở Hội An mà bạn nên thử:</p>
<section>
<h3>Các Món Nên Thử</h3>
<ul class="choose-list">
<li> Cao Lầu</li>
<li> Mì Quảng</li>
<li> Bánh mì</li>
<li> Hoành Thánh</li>
<li> Chè bắp</li>
<li> Bánh tráng đập</li>
<li> Bánh bao</li>
<li> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html>
Chúng ta vẫn tạm sử dụng OnlineGDB cho phần này.
Về căn bản, chúng ta đã từ phác họa bố cục ban đầu
Để cho ra "sản phẩm thô" tương đối giống với "ý dồ sáng tác" của chúng ta.
Chúng ta đã dựa vào phác họa ban đầu để tạo ra các block và các section khác nhau phù hợp với công dụng của mỗi phần tử.
Toàn bộ trang web, chúng ta "nhét vào" một lớp gọi là about-us, được thể hiện trong section about-us màu xanh.
Chúng ta cũng chia màn hình thành hai phần, mỗi phần là một block (dùng thẻ DIV) khác nhau: Bên trái là block hình ảnh với class image sử dụng thuộc tính Float Left để hình ảnh "nổi" về bên trái. Bên phải là block nội dung với class detail sử dụng thuộc tính Float Right để mọi thứ bên trong nó sẽ "nổi" về bên phải.
Nói chung, qui trình thực hiện gợi ý là chúng ta nên phác họa sơ qua bố cục của webpage, nếu thấy có thể chia làm hai phần tương tự như webpage đơn giản của chúng ta thì việc đầu tiên là chia màn hình thành hai khối thẻ <div> sử dụng hai class khác nhau dùng thuộc tính Float để "đẩy" một khối qua trái một khối qua phải. Sau đó tùy vào bố cục trong mỗi khối, chúng ta lại tiếp tục tạo các section, các thẻ khác nhau để hoàn thiện.
Lưu ý là không có gì "bắt buộc", bạn có thể làm bất cứ cách nào, bất cứ kích thước nào, bất cứ font chứ nào, bất cứ màu sắc nào...
Chúng ta đã cho phần tử li "nổi" về bên trái và có chiều ngang là 50% nhằm phân chia list các món ăn thành 2 phần.
.about-us .detail .choose-list li
Để có một "khoảng cách an toàn" chúng ta sẽ tạo một "vùng đệm" bao quanh list các món ăn bằng cách sử dụng padding.
.about-us .detail .choose-list {
padding: 14px 0 0 20px;
}
Padding của chúng ta có tới 4 giá trị!
- top padding là 14px
- right padding là 0px
- bottom padding là 0px
- left padding là 20px
Tiếp theo, chúng ta cũng cần đảm bảo Lời giới thiệu không "đụng chạm ai" bằng cách tạo cho nó một margin:
.about-us .detail .info-text {
margin-bottom: 22px;
}
Chúng ta cũng cần thay font chữ mềm mại hơn, màu cũng nhạt hơn đễ khỏi chói mắt
body {
color: #666;
font-family: Helvetica,sans-serif;
font-size: 15px;
line-height: 1.6;
}
Đến lúc này, mã HTML của chúng ta sẽ thế này
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
.about-us .detail .choose-list li {
float: left;
width: 50%;
}
.about-us .detail .choose-list {
padding: 14px 0 0 20px;
}
.about-us .detail .info-text {
margin-bottom: 22px;
}
body {
color: #666;
font-family: Helvetica,sans-serif;
font-size: 15px;
line-height: 1.6;
}
</style>
</head>
<body>
<section class="about-us">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p>Hội An, một thành phố cổ ở Việt Nam, nổi tiếng với văn hóa ẩm thực phong phú và đa dạng. Dưới đây là một số món ăn nổi bật ở Hội An mà bạn nên thử:</p>
<section>
<h3>Các Món Nên Thử</h3>
<ul class="choose-list">
<li> Cao Lầu</li>
<li> Mì Quảng</li>
<li> Bánh mì</li>
<li> Hoành Thánh</li>
<li> Chè bắp</li>
<li> Bánh tráng đập</li>
<li> Bánh bao</li>
<li> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html>
Bấm Run để thực thi
Không có nhận xét nào:
Đăng nhận xét