用html5和css做一个有搜索框和注册链接的电商网,商品列表每个列表项包含商品名称,商品价格,商品数量和一张缩略图
时间: 2024-03-06 21:48:21 浏览: 23
好的,以下是一个简单的示例,你可以根据需要进行修改和完善:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电商网</title>
<style>
/* 布局样式 */
body {
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #f0f0f0;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 10px;
}
.search-box {
display: inline-block;
margin-right: 10px;
}
.search-box input[type="text"] {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
}
.search-box input[type="submit"] {
padding: 5px 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
}
.register-link {
display: inline-block;
padding: 5px 10px;
background-color: #333;
color: #fff;
text-decoration: none;
border-radius: 3px;
font-size: 16px;
}
.register-link:hover {
background-color: #666;
}
.product-list {
margin: 0;
padding: 0;
}
.product-item {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
width: 200px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 10px;
text-align: center;
}
.product-item img {
width: 100%;
height: auto;
}
.product-item h3 {
font-size: 18px;
margin-top: 0;
}
.product-item p {
font-size: 16px;
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<h1>电商网</h1>
</header>
<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 class="search-box">
<form>
<input type="text" placeholder="搜索商品">
<input type="submit" value="搜索">
</form>
</li>
<li><a href="#" class="register-link">注册</a></li>
</ul>
</nav>
<main>
<ul class="product-list">
<li class="product-item">
<img src="product1.jpg" alt="商品1">
<h3>商品1</h3>
<p>价格:100元</p>
<p>数量:10件</p>
</li>
<li class="product-item">
<img src="product2.jpg" alt="商品2">
<h3>商品2</h3>
<p>价格:200元</p>
<p>数量:5件</p>
</li>
<li class="product-item">
<img src="product3.jpg" alt="商品3">
<h3>商品3</h3>
<p>价格:300元</p>
<p>数量:3件</p>
</li>
</ul>
</main>
</body>
</html>
```
上面的代码实现了一个简单的电商网页面,包括顶部导航、搜索框、注册链接和商品列表。你可以根据需要进行修改样式和内容。这里只是提供一个基础的示例,希望能够对你有所帮助。