Chúng ta không đi sâu vào chi tiết các món ăn ở Hội An, vì vậy trang Các món ăn sẽ là một trang rất đơn giản, một hình thức giống như một triển lãm ảnh các món ăn.
Chúng ta sẽ phác họa "chân dung" của trang Các món ăn.
Giả sử chúng ta sẽ có 4 món tiêu biểu là Cao Lầu, Mì Quảng, Chè Bắp, Bánh Mì. Chúng ta cần chia chiều ngang thành 4 phần. Như chúng ta đã thảo luận trước đây, tạm coi chiều ngang sẽ vào khoảng 1000px - 1280px. Nếu chia làm 4 phần, mỗi phần sẽ vào khoảng 250px, trừ ra những thứ ngoài rìa như margin, padding, border...chúng ta tạm thời coi như chiều ngang của những khung màu nâu trong hình trên sẽ đâu đó khoảng 200px là an toàn. Chúng ta sẽ tạo class gallery như sau
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 200px;
}
Mỗi khung màu nâu chúng ta sẽ đặt trong một thẻ <div class="gallery">.
Chúng ta cũng tạo một khung bao quanh nội dung từng món ăn
border: 1px solid #ccc;
Mỗi khi người dùng rê trỏ chuột tới khung món ăn nào thì khung sẽ đổi màu
div.gallery:hover {
border: 1px solid #777;
}
Mã HTML của chúng ta sẽ như sau:
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 200px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Cao Lau" width="600" height="400">
</a>
<div class="desc">Cao lầu là một món...</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Mi Quang" width="600" height="400">
</a>
<div class="desc">Mì Quảng là một món...</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Che Bap" width="600" height="400">
</a>
<div class="desc">Chè bắp là một món...</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Banh Mi" width="600" height="400">
</a>
<div class="desc">Bánh mì là một món...</div>
</div>
</body>
</html>
Chúng ta tiếp tục thực thi trên OnlineGDB:
Chúng ta sẽ cần thêm tiêu đề và miêu tả ngắn gọn từng món ăn.
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 200px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Các món ăn nên thử khi đến Hội An</h2>
<p>Nếu bạn có cơ hội đến Hội An, đừng quên thử những món ăn này để trải nghiệm hương vị ẩm thực độc đáo của thành phố cổ này.</p>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Cao Lau" width="600" height="400">
</a>
<div class="desc">Cao Lầu: Một món mì đặc trưng của Hội An với sợi mì dai, thịt xá xíu, giá đỗ, rau sống và bánh tráng. Món này có hương vị đặc biệt nhờ nước dùng được làm từ nước giếng cổ Bá Lễ.</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Mi Quang" width="600" height="400">
</a>
<div class="desc">Mì Quảng: Món mì với sợi mì to, dai, được phục vụ với tôm, thịt gà, trứng cút, và bánh đa. Món này thường được ăn kèm với rau sống và nước mắm chấm.</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Che Bap" width="600" height="400">
</a>
<div class="desc">Chè Bắp: Món chè ngọt được làm từ bắp tươi, đường và nước cốt dừa, rất thơm ngon và mát lạnh.</div>
</div>
<div class="gallery">
<a target="_blank" href="#">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" alt="Banh Mi" width="600" height="400">
</a>
<div class="desc">Bánh Mì Phượng: Một trong những tiệm bánh mì nổi tiếng nhất Hội An. Bánh mì ở đây được khen ngợi với vỏ bánh giòn, nhân thịt, patê, rau và nước sốt đặc biệt.</div>
</div>
</body>
</html>
Bấm Run để thực thi
Lưu lại với tên file là monan.html.
Chúng ta đã hoàn tất các trang cho website "vĩ đại" của chúng ta. Phần sau chúng ta sẽ upload lên web hosting và hoàn tất mọi thứ.
Không có nhận xét nào:
Đăng nhận xét