旅游首页制作css
设计布局结构
使用Flexbox或Grid布局规划整体框架，确保响应式设计。核心区域包括导航栏、轮播图、推荐板块和页脚。示例代码：
.container {
display: grid;
grid-template-areas:
"header"
"banner"
"content"
"footer";
min-height: 100vh;
}导航栏样式
固定顶部导航栏，添加悬停效果和下拉菜单。关键属性包括position: fixed和z-index。示例：
.navbar {
background: linear-gradient(135deg, #6e8efb, #a777e3);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-item:hover {
transform: translateY(-3px);
}轮播图动画
通过CSS实现自动轮播和过渡效果。结合@keyframes和transform属性：
.slide {
animation: slide 12s infinite;
}
@keyframes slide {
0% { opacity: 0; }
10% { opacity: 1; }
30% { opacity: 1; }
40% { opacity: 0; }
}卡片式内容展示
为旅游推荐项目设计卡片，使用border-radius和transition增强交互感：
.card {
border-radius: 15px;
transition: all 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}响应式适配
通过媒体查询调整不同屏幕尺寸下的布局。典型断点设置：
@media (max-width: 768px) {
.container { grid-template-columns: 1fr; }
.navbar { flex-direction: column; }
}页脚美化
采用渐变色和图标链接提升视觉完整性：
.footer {
background: linear-gradient(to right, #4776E6, #8E54E9);
}
.social-icon {
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}
