好的，下面是一个简单的模仿唯品会首页的HTML和CSS代码：
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿唯品会首页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://img1.vipki
dstatic.com/fe-static/teacher-
landingpage/dist/img/logo.7c2a8d9.png" alt="唯品会">
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">男装</a></li>
<li><a href="#">鞋包</a></li>
<li><a href="#">美妆</a></li>
<li><a href="#">家居</a></li>
<li><a href="#">母婴</a></li>
<li><a href="#">食品</a></li>
<li><a href="#">数码</a></li>
<li><a href="#">运动</a></li>
</ul>
</nav>
<div class="search">
<input type="text" placeholder="搜索你想要的商品">
<button>搜索</button>
</div>
<div class="login">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</header>
<main>
<div class="banner">
<img src="https://img1.vipki
dstatic.com/fe-static/teacher-
landingpage/dist/img/banner.8dcac5d.jpg" alt="banner">
</div>
<div class="products">
<h2>推荐商品</h2>
<div class="product-list">
<div class="product">
<img src="https://img1.vipki
dstatic.com/fe-static/teacher-
landingpage/dist/img/product1.4f3b2c7.jpg" alt="商品1">
<p>商品1</p>
</div>
<div class="product">
<img src="https://img1.vipki
dstatic.com/fe-static/teacher-
landingpage/dist/img/product2.8f6f6c0.jpg" alt="商品2">
<p>商品2</p>
</div>
<div class="product">
<img src="https://img1.vipki
dstatic.com/fe-static/teacher-
landingpage/dist/img/product3.07a5b9d.jpg" alt="商品3">
<p>商品3</p>
</div>
<div class="product">
<img src="https://img1.vipki
dstatic.com/fe-static/teacher-
landingpage/dist/img/product4.28f9d9f.jpg" alt="商品4">
<p>商品4</p>
</div>
</div>
</div>
</main>
<footer>
<div class="links">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">服务协议</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">网站地图</a></li>
</ul>
</div>
<div class="copy">
<p>版权所有 © 2021 唯品会 Inc. 保留所有权利</p>
</div>
</footer>
</body>
</html>
```
CSS代码：
```css
/* 全局样式 */
* {
margin: 0;
pad
ding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: "Microsoft YaHei", sans-serif;
}
a {
color: #666;
text-decoration: none;
}
/* 头部样式 */
header {
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
}
.logo img {
height: 40px;
margin-left: 20px;
}
nav ul {
display: flex;
list-style: none;
margin-right: 20px;
}
nav li {
margin: 0 20px;
}
nav a:hover {
color: #EC407A;
}
.search {
margin-right: 20px;
}
.search input {
width: 300px;
height: 30px;
pad
ding: 0 10px;
border: none;
border-radius: 15px;
font-size: 14px;
}
.search button {
width: 80px;
height: 30px;
background-color: #EC407A;
border: none;
border-radius: 15px;
color: #fff;
font-size: 14px;
margin-left: 10px;
cursor: pointer;
}
.login a {
display: inline-block;
pad
ding: 5px 10px;
border-radius: 15px;
border: 1px solid #EC407A;
color: #EC407A;
margin-right: 10px;
}
.login a:hover {
background-color: #EC407A;
color: #fff;
}
/* 主要
内容样式 */
main {
pad
ding: 20px;
}
.banner img {
width: 100%;
max-height: 300px;
object-fit: cover;
}
.products h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
width: 23%;
margin-bottom: 20px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
}
.product img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product p {
pad
ding: 10px;
font-size: 14px;
}
/* 底部样式 */
footer {
background-color: #f5f5f5;
pad
ding: 20px;
font-size: 14px;
}
.links ul {
display: flex;
list-style: none;
margin-bottom: 20px;
}
.links li {
margin-right: 20px;
}
.copy {
text-align: center;
margin-top: 20px;
}
```
3239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
