Luyện tập thẻ div và bố cục cơ bản
Bước 1: Khởi tạo dự án với Sublime Text
- Trên ổ đĩa Z, tạo thư mục: hocsinh01/{tên của em}/bai10-2.
- Trong thư mục này, tạo 2 file: index.html và style.css.
- Mẹo gõ nhanh:
+ Trong file index.html, gõ "<htm" rồi nhấn Enter hoặc Tab để hiện khung HTML.
+ Để nối CSS, gõ "<lin" rồi nhấn Enter hoặc Tab, tại mục href nhập ./style.css.
Bước 2: Tạo khung cho thẻ (Recipe Card)
- Sử dụng thẻ div với một class (ví dụ: class="card") để làm khung chứa cho mỗi món ăn.
- Đặt các thẻ div này trong body.
Bước 3: Thêm nội dung món ăn
- Sử dụng thẻ h1 cho tên món ăn và p cho phần mô tả ngắn.
- Có thể thêm hình ảnh minh họa bằng thẻ img.
- Dùng thẻ b để làm nổi bật các nguyên liệu chính.
Bước 4: Định dạng CSS cho thẻ
- Sử dụng width để giới hạn độ rộng của mỗi tấm thẻ.
- Dùng display: inline-block để các thẻ có thể nằm cạnh nhau trên cùng một hàng.
- Trang trí bằng border và border-radius để thẻ trông giống thật hơn.
Bước 5: Sáng tạo và Hoàn thiện
- Thách thức: Hãy tạo thêm nội dung để có tổng cộng 8 thẻ món ăn khác nhau.
- Sử dụng các màu sắc (background-color) đa dạng để phân loại món ăn (Ví dụ: Món canh màu xanh, Món xào màu đỏ).
- Tự tìm và chèn link ảnh món ăn thật sinh động bằng thẻ img cho tất cả 8 món.
HTML (index.html)
<div class="recipe-card" id="pho-bo">
<h1>Phở Bò Truyền Thống</h1>
<p>Món ăn đặc sắc của Việt Nam với nước dùng thơm ngon.</p>
<p><b>Nguyên liệu:</b> Bánh phở, thịt bò, hành, gừng...</p>
</div>
<div class="recipe-card" id="banh-mi">
<h1>Bánh Mì Việt Nam</h1>
<p>Món ăn đường phố nổi tiếng thế giới.</p>
</div>
CSS (style.css)
.recipe-card {
width: 300px;
height: 350px;
display: inline-block;
background-color: white;
border: 1px solid #ddd;
border-radius: 15px;
text-align: center;
}
#pho-bo {
border-left: 10px solid #d35400;
}
#banh-mi {
border-left: 10px solid #f1c40f;
}