我需要一个关于杭州土特产茶叶、丝绸、竹编、剪纸、绸扇的网页用html5加css样式完成
时间: 2023-07-10 14:40:31 浏览: 98
茶叶html5网站模版
好的,以下是一个简单的 HTML5 + CSS 网页示例,用于展示杭州土特产茶叶、丝绸、竹编、剪纸和绸扇:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>杭州土特产</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f9c52f;
padding: 10px;
text-align: center;
color: #fff;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
main {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section {
width: 30%;
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
section img {
max-width: 100%;
}
</style>
</head>
<body>
<header>
<h1>杭州土特产</h1>
</header>
<nav>
<a href="#">茶叶</a>
<a href="#">丝绸</a>
<a href="#">竹编</a>
<a href="#">剪纸</a>
<a href="#">绸扇</a>
</nav>
<main>
<section>
<img src="tea.jpg" alt="茶叶">
<h2>龙井茶</h2>
<p>龙井茶是中国十大名茶之一,产地在杭州市西湖区龙井山,是一种绿茶。</p>
</section>
<section>
<img src="silk.jpg" alt="丝绸">
<h2>杭州丝绸</h2>
<p>杭州丝绸是中国传统的名优特产,以其柔美典雅的质地和绚丽多彩的色泽而闻名于世。</p>
</section>
<section>
<img src="bamboo.jpg" alt="竹编">
<h2>杭州竹编</h2>
<p>杭州竹编是一种民间工艺品,以其精美的手工和独特的造型而受到广泛关注。</p>
</section>
<section>
<img src="paper-cut.jpg" alt="剪纸">
<h2>杭州剪纸</h2>
<p>杭州剪纸是一种传统的民间艺术,以其精美的手工和独特的造型而受到广泛关注。</p>
</section>
<section>
<img src="fan.jpg" alt="绸扇">
<h2>杭州绸扇</h2>
<p>杭州绸扇是一种传统的民间艺术,以其精美的手工和独特的造型而受到广泛关注。</p>
</section>
</main>
</body>
</html>
```
这个网页包括了一个页眉、一个导航栏和一个主要内容区域。在主要内容区域中,使用了 `section` 元素来展示不同的土特产,包括图片、标题和描述。你可以根据自己的需求,进一步完善这个网页,并添加更多的内容和样式。
阅读全文