<
!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<
!-- 让页面在手机上正确显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>携程首页</title>
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* 页面居中，最大宽度为常见手机屏幕 */
.cont
ainer {
max-width: 414px;
margin: 0 auto;
background: white;
min-height: 100vh;
}
/* 头部搜索栏 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid #eee;
}
.search-box {
flex: 1;
background: #eee;
padding: 10px;
border-radius: 20px;
text-align: center;
color: #999;
font-size: 14px;
}
.user-icon {
width: 24px;
height: 24px;
background: url('https://via.placeholder.com/24') no-repeat center;
background-size: cover;
border-radius: 50%;
margin-left: 10px;
}
/* 导航图标区 */
.nav-icons {
display: flex;
justify-content: space-around;
padding: 15px;
font-size: 12px;
background: white;
}
.icon-item img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.icon-item span {
display: block;
margin-top: 5px;
}
/* 轮播图区域 - 插入图片位置 */
.banner {
width: 100%;
height: 180px;
overflow: hidden;
margin: 10px 0;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 推荐
榜单 */
.rankings {
padding: 15px;
}
.section-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 14px;
}
.ranking-list {
display: flex;
gap: 10px;
overflow-x: auto;
}
.card {
min-width: 120px;
padding: 10px;
background: #f9f9f9;
border-radius: 8px;
font-size: 12px;
}
.card img {
width: 100%;
height: 60px;
border-radius: 4px;
object-fit: cover;
margin-bottom: 5px;
}
/* 底部广告图 */
.ad-banner {
width: 100%;
padding: 15px;
background: white;
margin-top: 10px;
}
.ad-banner img {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 8px;
}
/* 底部信息 */
.footer {
text-align: center;
padding: 20px;
color: #999;
font-size: 12px;
}
.footer a {
color: #007AFF;
text-decoration: none;
}
/* 导航区域整
体设置 */
.nav-box {
display: flex;
flex-wrap: wrap; /* 自动换行 */
background: white;
padding: 10px 0;
font-size: 14px;
}
/* 每个导航项的样式 */
.nav-item {
width: 20%; /* 一行放5个 */
text-align: center; /*
文字居中 */
padding: 10px 0; /* 上下内边距 */
color: #333;
text-decoration: none; /* 去掉链接下划线 */
}
/* 图标大小 */
.nav-item img {
width: 32px;
height: 32px;
border-radius: 50%; /* 圆形 */
object-fit: cover; /* 图片不变形 */
}
/*
文字颜色和小间距 */
.nav-item span {
display: block;
color: #666;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="cont
ainer">
<
!-- 头部搜索 -->
<div class="header">
<div class="search-box">搜索：酒店/景点/航班</div>
<div class="user-icon"></div>
</div>
<
!-- 导航图标（带图片） -->
<div class="nav-icons">
<div class="icon-item">
<img src="hotel.fc17d0f7726132bf2459621923704f0f.png" alt="酒店">
<span>酒店</span>
</div>
<div class="icon-item">
<img src="4.png" alt="机票">
<span>机票</span>
</div>
<div class="icon-item">
<img src="7.png" alt="火车票">
<span>火车票</span>
</div>
<div class="icon-item">
<img src="10.png" alt="旅游">
<span>旅游</span>
</div>
<div class="icon-item">
<img src="13.png" alt="攻略/景点">
<span>攻略/景点</span>
</div>
</div>
<
!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<
!-- 导航开始 -->
<div class="nav-box">
<
!-- 第1个：民宿/客栈 -->
<a href="#" class="nav-item">
<img src="2.png" alt="民宿">
<span>民宿/客栈</span>
</a>
<
!-- 第2个：航班助手 -->
<a href="#" class="nav-item">
<img src="5.png" alt="航班">
<span>航班助手</span>
</a>
<
!-- 第3个：汽车/船票 -->
<a href="#" class="nav-item">
<img src="8.png" alt="汽车">
<span>汽车/船票</span>
</a>
<
!-- 第4个：门票/活动 -->
<a href="#" class="nav-item">
<img src="11.png" alt="门票">
<span>门票/活动</span>
</a>
<
!-- 第5个：购物/免税 -->
<a href="#" class="nav-item">
<img src="14.png" alt="购物">
<span>购物/免税</span>
</a>
<
!-- 第6个：美食 -->
<a href="#" class="nav-item">
<img src="3.png" alt="美食">
<span>美食</span>
</a>
<
!-- 第7个：接送机/包车 -->
<a href="#" class="nav-item">
<img src="6.png" alt="接送">
<span>接送机</span>
</a>
<
!-- 第8个：租车 -->
<a href="#" class="nav-item">
<img src="9.png" alt="租车">
<span>租车</span>
</a>
<
!-- 第9个：周边游 -->
<a href="#" class="nav-item">
<img src="12.png" alt="周边">
<span>周边游</span>
</a>
<
!-- 第10个：借钱/分期 -->
<a href="#" class="nav-item">
<img src="15.png" alt="借钱">
<span>借钱</span>
</a>
</div>
<
!-- 推荐
榜单（带小图） -->
<div class="rankings">
<div class="section-title">携程精选榜 <a href="#">更多></a></div>
<div class="ranking-list">
<div class="card">
<img src="b.jpg" alt="奢华酒店">
<strong>奢华酒店</strong>
<p>上海索菲特 ¥928起</p>
</div>
<div class="card">
<img src="a.jpg" alt="亲子乐园">
<strong>亲子乐园</strong>
<p>迪士尼合作酒店</p>
</div>
</div>
</div>
<
!-- 底部广告图 -->
<div class="ad-banner">
<img src="banner.jpg" alt="广告横幅">
</div>
<
!-- 底部 -->
<div class="footer">
©
2025 携程旅行
| <a href="#">电脑版</a>
</div>
</div>
</body>
</html>
帮我将导航栏下的内容补全
扫一扫
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
