以下是大理购物商城网站的一个设计方案:
html
/* 基础样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-left: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
/* 主要内容样式 */
main {
padding: 40px;
}
.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;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 24px;
margin-bottom: 40px;
}
.hero button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
/* 响应式设计 */
@media (max-width: 767px) {
header {
flex-direction: column;
padding: 10px;
}
.logo {
font-size: 20px;
}
nav li {
margin-left: 10px;
}
.hero {
height: 300px;
}
.hero h1 {
font-size: 36px;
}
.hero p {
font-size: 18px;
}
}
尽情尊享购物乐趣
这个网站设计包含了以下主要元素:
1. 头部导航栏:包含网站的logo和主要导航菜单。
2. 主要内容区域:包含一个大图轮播和相关的文案及按钮。
3. 响应式布局:针对移动端设备进行了优化。
整体设计风格清新简约,突出了大理的自然景观元素,给用户一种轻松愉悦的购物体验。您可以根据您的具体需求进行进一步的定制和完善。
查看详情
查看详情