html电商封面网页代码
时间: 2023-12-15 22:32:33 浏览: 27
以下是一个简单的HTML电商封面网页代码,包括一个导航栏、一个轮播图和一些产品展示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电商封面</title>
<style>
/* 导航栏样式 */
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ddd; color: black;
}
/* 轮播图样式 */
.slideshow {
position: relative;
height: 400px;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; margin: auto;
max-width: 100%;
max-height: 100%;
}
/* 产品展示样式 */
.product {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.product img {
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
<!-- 轮播图 -->
<div class="slideshow">
<img src="slide1.jpg" alt="slide1">
<img src="slide2.jpg" alt="slide2">
<img src="slide3.jpg" alt="slide3">
</div>
<!-- 产品展示 -->
<div class="product">
<img src="product1.jpg" alt="product1">
<img src="product2.jpg" alt="product2">
<img src="product3.jpg" alt="product3">
<img src="product4.jpg" alt="product4">
</div>
</body>
</html>
```