用HTML制造一个国潮风的网站
时间: 2024-02-24 19:58:22 浏览: 14
好的,以下是一个简单的用 HTML 制作国潮风格网站的示例:
```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;
}
h1 {
color: #C44F4F;
text-align: center;
}
.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>
<h1>国潮风格网站</h1>
</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>Copyright © 2021</p>
</footer>
</body>
</html>
```
这个简单的网站使用了 HTML 和 CSS,实现了国潮风格的网站效果,包括了一个顶部的标题栏、国潮文化简介、推荐产品等几个部分,其中推荐产品部分使用了 flex 布局和图片等元素。