请给我一段html的代码,要求使用Adobe Dreamweaver制作“电商节活动”的网站首页。
时间: 2024-04-01 20:31:38 浏览: 13
好的,以下是一段简单的 HTML 代码,可以作为电商节活动的网站首页:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电商节活动</title>
<style>
/* CSS 样式 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
color: #333;
}
header {
background-color: #fff;
text-align: center;
padding: 20px;
}
h1 {
font-size: 36px;
margin: 0;
}
nav {
background-color: #333;
height: 40px;
line-height: 40px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
color: #fff;
text-decoration: none;
padding: 0 10px;
}
.banner {
background-image: url('banner.jpg');
background-size: cover;
height: 400px;
text-align: center;
color: #fff;
padding-top: 100px;
}
.banner h2 {
font-size: 48px;
margin: 0;
}
.content {
margin: 20px;
}
.product {
display: inline-block;
margin: 20px;
width: 200px;
border: 1px solid #ccc;
text-align: center;
}
.product img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product h3 {
font-size: 18px;
margin: 10px 0;
}
.product p {
font-size: 14px;
margin: 10px 0;
}
footer {
background-color: #333;
text-align: center;
color: #fff;
padding: 20px;
}
</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>
</ul>
</nav>
<div class="banner">
<h2>电商节,狂欢购物季</h2>
</div>
<div class="content">
<div class="product">
<img src="product1.jpg" alt="商品1">
<h3>精美手表</h3>
<p>¥299</p>
</div>
<div class="product">
<img src="product2.jpg" alt="商品2">
<h3>时尚耳机</h3>
<p>¥199</p>
</div>
<div class="product">
<img src="product3.jpg" alt="商品3">
<h3>高清摄像机</h3>
<p>¥599</p>
</div>
</div>
<footer>
<p>版权所有 © 2021 电商节</p>
</footer>
</body>
</html>
```
这段代码包含了一个网站的基本结构,包括头部、导航栏、轮播图、商品展示和页脚。你可以将其中的图片和文本等内容替换为你自己的信息。这段代码使用了 CSS 样式来美化页面,如果你需要更改样式,可以修改代码中的 CSS 部分。