以下是一个简单的 HTML 代码块,用于展示一个南北窗帘软装工厂店铺的网页:
```html
/* 基础样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, main, footer {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style-type: none;
display: flex;
}
nav li {
margin-left: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
/* 主体样式 */
.hero {
background-image: url('hero-image.jpg');
background-size: cover;
background-position: center;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}
.product {
border: 1px solid #ddd;
padding: 20px;
text-align: center;
}
.product img {
max-width: 100%;
height: auto;
}
/* 底部样式 */
footer {
background-color: #333;
color: #fff;
text-align: center;
}
为您的家庭打造舒适美观的环境
产品1的详细介绍
产品2的详细介绍
产品3的详细介绍
© 2024 南北窗帘软装工厂店铺. 版权所有.
```
这个 HTML 代码包含了一个基本的网页结构,包括头部、主体和底部。头部包含了一个标志和导航菜单,主体包含了一个英雄区域和产品展示区域,底部包含了版权信息。
这个代码使用了 CSS 来进行样式化,包括响应式设计,以确保页面能够在不同设备上良好显示。您可以根据实际需求进行进一步的定制和扩展。
查看详情
查看详情