制造一个有导航栏国潮风的网站
时间: 2023-08-09 21:12:23 浏览: 44
好的,以下是一个简单的使用HTML和CSS制作有导航栏的国潮风格网站的示例:
```html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>国潮风格网站</title>
<style>
/* 定义网站风格 */
body {
background-color: #F9C253;
font-family: 'Microsoft Yahei', sans-serif;
}
#header {
background-color: #C44F4F;
color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
#header h1 {
margin: 0;
}
#nav {
display: flex;
justify-content: center;
background-color: #FFFFFF;
padding: 10px;
}
#nav a {
color: #C44F4F;
text-decoration: none;
margin: 0 20px;
}
#nav a:hover {
color: #FFFFFF;
background-color: #C44F4F;
padding: 5px 10px;
border-radius: 5px;
}
.content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: justify;
}
.product {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-item {
flex-basis: 250px;
margin: 10px;
padding: 10px;
background-color: #FFFFFF;
text-align: center;
}
.product-item img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header id="header">
<h1>国潮风格网站</h1>
<nav>
<a href="#">首页</a>
<a href="#">国潮文化</a>
<a href="#">国潮产品</a>
<a href="#">联系我们</a>
</nav>
</header>
<div class="content">
<h2>国潮文化简介</h2>
<p>国潮是指中国传统文化与现代时尚元素相融合的一种风格。它既有中国传统文化的底蕴,又融入了现代时尚的元素,包括服装、家居、美食等各个方面。</p>
<h2>推荐产品</h2>
<div class="product">
<div class="product-item">
<img src="product1.jpg" alt="国潮茶具">
<p>国潮茶具</p>
</div>
<div class="product-item">
<img src="product2.jpg" alt="国潮服装">
<p>国潮服装</p>
</div>
<div class="product-item">
<img src="product3.jpg" alt="国潮美食">
<p>国潮美食</p>
</div>
</div>
</div>
<footer>
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
这个示例中,我们使用了一个具有导航栏的国潮风格网站,导航栏包括了首页、国潮文化、国潮产品和联系我们四个选项,使用了 flex 布局和 CSS 样式来实现。