写一个商城首页界面前端代码
时间: 2024-05-06 10:15:52 浏览: 11
这里提供一个简单的商城首页界面前端代码,包含了一些基本的元素。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商城首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">个人中心</a></li>
</ul>
</nav>
</header>
<main>
<section class="banner">
<img src="https://placehold.it/1200x400" alt="banner">
</section>
<section class="products">
<h2>热门商品</h2>
<ul>
<li>
<a href="#">
<img src="https://placehold.it/300x300" alt="product">
<p>商品名称</p>
<p>¥100.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://placehold.it/300x300" alt="product">
<p>商品名称</p>
<p>¥100.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://placehold.it/300x300" alt="product">
<p>商品名称</p>
<p>¥100.00</p>
</a>
</li>
<li>
<a href="#">
<img src="https://placehold.it/300x300" alt="product">
<p>商品名称</p>
<p>¥100.00</p>
</a>
</li>
</ul>
</section>
</main>
<footer>
<p>© 2021 商城名称 版权所有</p>
</footer>
</body>
</html>
```
同时,可以根据需要自定义样式,将以下 CSS 代码保存到 `style.css` 文件中。
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: #fff;
height: 50px;
display: flex;
justify-content: center;
}
nav {
max-width: 1200px;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-of-type {
margin-right: 0;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
main {
max-width: 1200px;
margin: 20px auto;
}
.banner img {
width: 100%;
}
.products h2 {
font-size: 24px;
margin-bottom: 20px;
}
.products ul {
display: flex;
flex-wrap: wrap;
}
.products li {
width: calc(25% - 20px);
margin-right: 20px;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
}
.products li:last-of-type {
margin-right: 0;
}
.products li a {
color: #333;
text-decoration: none;
}
.products li img {
width: 100%;
margin-bottom: 10px;
}
.products li p {
margin-bottom: 5px;
font-size: 14px;
}
.footer {
background-color: #333;
color: #fff;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
```
以上代码实现了一个简单的商城首页,包含了导航栏、轮播图以及商品列表等基本元素。需要注意的是,这只是一个简单示例,实际项目中还需要根据需求进行相应的修改和完善。