Giới thiệu giao diện web
Dự án minh họa này trình bày cách xây dựng layout trang chủ Xiaomi sử dụng HTML và CSS. Thiết kế phù hợp cho bài tập front-end cơ bản.
Hiển thị giao diện
Mã nguồn tham khảo
Cấu trúc HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang chủ Xiaomi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="main-header">
<nav class="top-nav">
<div class="nav-section">
<a href="#">Mi Store</a>
<a href="#">MIUI</a>
<!-- Các mục điều hướng khác -->
</div>
<div class="user-section">
<a href="#">Đăng nhập</a>
<a href="#" class="cart">Giỏ hàng (0)</a>
</div>
</nav>
<div class="main-menu">
<div class="logo"></div>
<ul class="product-categories">
<li>
<a href="#">Điện thoại Mi</a>
<div class="submenu">
<div class="product-item">
<img src="phone1.jpg" alt="Mi CC9">
<div>
<h4>Mi CC9</h4>
<p>4.299.000₫</p>
</div>
</div>
<!-- Các sản phẩm khác -->
</div>
</li>
<!-- Danh mục khác -->
</ul>
<div class="search-container">
<input type="text" placeholder="Tìm kiếm...">
</div>
</div>
</header>
</body>
</html>Định dạng CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, sans-serif;
}
.main-header {
background: #333;
color: #e0e0e0;
}
.top-nav {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
}
.nav-section a, .user-section a {
color: #b0b0b0;
margin: 0 10px;
font-size: 14px;
}
.cart {
position: relative;
}
.main-menu {
display: flex;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 15px 0;
}
.product-categories {
display: flex;
margin-left: 50px;
}
.product-categories > li {
position: relative;
margin: 0 15px;
}
.submenu {
position: absolute;
display: none;
background: white;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
z-index: 100;
}
.product-categories li:hover .submenu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.product-item {
width: 180px;
text-align: center;
}
.search-container {
margin-left: auto;
position: relative;
}
.search-container input {
padding: 8px 15px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}