请出一个较难的购物网页,并要有下拉栏,还要有css和js
时间: 2023-11-27 19:49:37 浏览: 21
以下是一个简单的购物网页,包含了下拉栏、CSS和JS。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物网页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>购物网页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品分类</a>
<ul>
<li><a href="#">电子产品</a></li>
<li><a href="#">服饰</a></li>
<li><a href="#">家居用品</a></li>
</ul>
</li>
<li><a href="#">购物车</a></li>
<li><a href="#">我的账户</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>热门商品</h2>
<div class="item">
<img src="https://via.placeholder.com/150" alt="商品图片">
<h3>商品名称</h3>
<p>商品描述</p>
<button>加入购物车</button>
</div>
<div class="item">
<img src="https://via.placeholder.com/150" alt="商品图片">
<h3>商品名称</h3>
<p>商品描述</p>
<button>加入购物车</button>
</div>
<div class="item">
<img src="https://via.placeholder.com/150" alt="商品图片">
<h3>商品名称</h3>
<p>商品描述</p>
<button>加入购物车</button>
</div>
</section>
</main>
<footer>
<p>© 2021 购物网页</p>
<script src="script.js"></script>
</footer>
</body>
</html>
```
CSS代码:
```css
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul ul {
display: none;
position: absolute;
top: 50px;
left: 0;
background-color: #333;
}
nav ul li:hover > ul {
display: block;
}
main {
padding: 20px;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
padding: 20px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.item img {
max-width: 100%;
}
.item h3 {
margin-top: 10px;
}
.item p {
margin-top: 10px;
}
.item button {
margin-top: 10px;
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.item button:hover {
background-color: #444;
}
```
JS代码:
```js
console.log("购物网页加载完成");
```