<!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>携程旅行 - 移动端</title>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/
css/font-awesome.min.
css" rel="stylesheet">
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
color: #
333;
}
.container {
max-width:
375
px;
margin: 0 auto;
background-color: white;
min-height: 100vh;
}
/* 搜索栏样式 */
.search-bar {
padding: 12
px;
background-color: white;
}
.search-box {
position: relative;
}
.search-input {
width: 100%;
padding: 10
px 16
px 10
px 40
px;
border-radius: 20
px;
border: 1
px solid #e5e5e5;
font-size: 14
px;
outline: none;
}
.search-input:focus {
border-color: #1677ff;
box-shadow: 0 0 0 2
px rgba(22, 119, 255, 0.2);
}
.search-icon {
position: absolute;
left: 14
px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
/* 功能导航区样式 */
.function-area {
padding: 8
px;
background-color: white;
}
.function-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4
px;
}
.function-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 4
px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.function-item:active {
opacity: 0.7;
}
.icon-wrapper {
width: 40
px;
height: 40
px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4
px;
}
.function-text {
font-size: 12
px;
}
/* 导航指示器 */
.nav-indicator {
display: flex;
justify-content: center;
margin-top: 8
px;
}
.indicator-dot {
width: 6
px;
height: 6
px;
border-radius: 50%;
margin: 0 2
px;
background-color: #ddd;
}
.indicator-dot.active {
background-color: #1677ff;
}
/* 特价酒店区域 */
.special-area {
padding: 12
px;
background-color: white;
margin-top: 4
px;
}
.special-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8
px;
}
.special-title {
font-size: 16
px;
font-weight: bold;
color: #ff7d00;
display: flex;
align-items: center;
}
.special-tag {
font-size: 12
px;
color: #ff7d00;
background-color: #fff7e6;
padding: 2
px 6
px;
border-radius: 12
px;
}
.hotel-card {
position: relative;
border-radius: 8
px;
overflow: hidden;
border: 1
px solid #f5f5f5;
margin-bottom: 12
px;
}
.hotel-
img {
width: 100%;
height: 144
px;
object-fit: cover;
}
.hotel-tag {
position: absolute;
top: 8
px;
left: 8
px;
background-color: #ff7d00;
color: white;
font-size: 12
px;
padding: 2
px 8
px;
border-radius: 4
px;
}
.hotel-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
padding: 8
px;
color: white;
}
.hotel-name {
font-size: 12
px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hotel-price {
font-size: 14
px;
font-weight: bold;
margin-top: 4
px;
}
/* 精选榜区域 */
.rank-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 12
px 0 8
px;
}
.rank-title {
font-size: 16
px;
font-weight: bold;
}
.rank-tag {
font-size: 12
px;
color: #999;
}
.rank-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8
px;
}
.rank-card {
position: relative;
border-radius: 8
px;
overflow: hidden;
border: 1
px solid #f5f5f5;
}
.rank-
img {
width: 100%;
height: 96
px;
object-fit: cover;
}
.rank-city {
position: absolute;
top: 4
px;
left: 4
px;
background-color: rgba(0,0,0,0.6);
color: white;
font-size: 12
px;
padding: 1
px 4
px;
border-radius: 2
px;
}
.rank-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
padding: 6
px;
color: white;
}
.rank-name {
font-size: 12
px;
font-weight: 500;
}
/* 广告横幅 */
.ad-banner {
/* padding: 12
px;
background-color: white;
margin-top: 4
px;
display: flex; */
width: 100%;
max-width: 600
px; /* 最大宽度限制 */
margin: 20
px auto; /* 居中显示 */
padding: 0 15
px; /* 左右
留白，避免贴边 */
/* 使用Flexbox实现平均分布 */
display: flex;
gap: 10
px; /* 按钮之间的间距 */
flex: 1;
}
.banner-content {
border-radius: 8
px;
padding: 12
px;
overflow: hidden;
}
.banner-wrapper {
display: flex;
align-items: center;
}
.banner-text {
flex: 1;
color: white;
margin-bottom: 12
px;
}
.banner-subtitle {
font-size: 14
px;
}
.banner-title {
font-size: 18
px;
font-weight: bold;
margin-top: 4
px;
}
.banner-highlight {
color: #ffdd54;
}
.banner-buttons {
display: flex;
gap: 8
px;
margin-top: 8
px;
}
.banner-btn {
padding: 6
px 12
px;
border-radius: 4
px;
font-size: 12
px;
font-weight: 500;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.banner-btn:active {
opacity: 0.8;
}
.btn-primary {
background-color: white;
color: #0066cc;
}
.btn-secondary {
background-color: white;
color: #0066cc;
}
/* 页脚信息 */
.footer {
background-color: white;
padding: 12
px;
text-align: center;
margin-top: 4
px;
font-size: 12
px;
color: #999;
}
.footer-links {
display: flex;
justify-content: center;
gap: 16
px;
margin-bottom: 8
px;
}
.footer-link {
color: #666;
text-decoration: none;
}
.footer-separator {
color: #ddd;
}
.footer-copyright {
color: #999;
}
/*
底部导航栏 */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-width:
375
px;
margin: 0 auto;
background-color: white;
border-top: 1
px solid #e5e5e5;
display: flex;
justify-content: space-around;
z-index: 100;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 6
px 12
px;
color: #999;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.nav-item.active {
color: #1677ff;
}
.nav-icon {
font-size: 20
px;
}
.nav-text {
font-size: 12
px;
margin-top: 2
px;
}
/*
底部留白 */
.bottom-space {
height: 56
px;
}
</style>
</head>
<body>
<div class="container">
<!-- 搜索栏 -->
<header class="search-bar">
<div class="search-box">
<input type="text"
placeholder="搜索:目的地/酒店/景点/航班号"
class="search-input"
>
<i class="fa fa-search search-icon"></i>
</div>
</header>
<!-- 功能导航区 -->
<section class="function-area">
<div class="function-grid">
<!-- 第一行功能 -->
<div class="function-item" style="background-color: #ff5a5f; color: white;">
<div class="icon-wrapper icon-hotel">
<i class="fa fa-building-o"></i>
</div>
<span class="function-text">酒店</span>
</div>
<div class="function-item" style="background-color: #007aff; color: white;">
<div class="icon-wrapper icon-flight">
<i class="fa fa-plane"></i>
</div>
<span class="function-text">机票</span>
</div>
<div class="function-item" style="background-color: #5856d6; color: white;">
<div class="icon-wrapper icon-train">
<i class="fa fa-train"></i>
</div>
<span class="function-text">火车票</span>
</div>
<div class="function-item" style="background-color: #4cd964; color: white;">
<div class="icon-wrapper icon-travel">
<i class="fa fa-pagelines"></i>
</div>
<span class="function-text">旅游</span>
</div>
<div class="function-item" style="background-color: #ff9500; color: white;">
<div class="icon-wrapper icon-strategy">
<i class="fa fa-map-o"></i>
</div>
<span class="function-text">攻略/景点</span>
</div>
<!-- 第二行功能 -->
<div class="function-item" style="background-color: rgba(255, 107, 107, 0.1); color: #ff6b6b;">
<div class="icon-wrapper icon-homestay">
<i class="fa fa-home"></i>
</div>
<span class="function-text">民宿/客栈</span>
</div>
<div class="function-item" style="background-color: rgba(90, 200, 250, 0.1); color: #5ac8fa;">
<div class="icon-wrapper icon-flight-helper">
<i class="fa fa-plane"></i>
</div>
<span class="function-text">航班助手</span>
</div>
<div class="function-item" style="background-color: rgba(175, 82, 222, 0.1); color: #af52de;">
<div class="icon-wrapper icon-car-ship">
<i class="fa fa-bus"></i>
</div>
<span class="function-text">汽车/船票</span>
</div>
<div class="function-item" style="background-color: rgba(52, 199, 89, 0.1); color: #
34c759;">
<div class="icon-wrapper icon-ticket">
<i class="fa fa-ticket"></i>
</div>
<span class="function-text">门票/活动</span>
</div>
<div class="function-item" style="background-color: rgba(255, 204, 0, 0.1); color: #ffcc00;">
<div class="icon-wrapper icon-shopping">
<i class="fa fa-shopping-bag"></i>
</div>
<span class="function-text">购物/免税</span>
</div>
<!-- 第三行功能 -->
<div class="function-item" style="background-color: rgba(255, 149, 0, 0.1); color: #ff9500;">
<div class="icon-wrapper icon-food">
<i class="fa fa-cutlery"></i>
</div>
<span class="function-text">美食</span>
</div>
<div class="function-item" style="background-color: rgba(0, 122, 255, 0.1); color: #007aff;">
<div class="icon-wrapper icon-transfer">
<i class="fa fa-car"></i>
</div>
<span class="function-text">接送机/包车</span>
</div>
<div class="function-item" style="background-color: rgba(175, 82, 222, 0.1); color: #af52de;">
<div class="icon-wrapper icon-rent-car">
<i class="fa fa-car"></i>
</div>
<span class="function-text">租车</span>
</div>
<div class="function-item" style="background-color: rgba(52, 199, 89, 0.1); color: #
34c759;">
<div class="icon-wrapper icon-nearby">
<i class="fa fa-tree"></i>
</div>
<span class="function-text">周边游</span>
</div>
<div class="function-item" style="background-color: rgba(255, 59, 48, 0.1); color: #ff
3b
30;">
<div class="icon-wrapper icon-loan">
<i class="fa fa-money"></i>
</div>
<span class="function-text">借钱/分期</span>
</div>
</div>
<!-- 导航指示器 -->
<div class="nav-indicator">
<div class="indicator-dot active"></div>
<div class="indicator-dot"></div>
<div class="indicator-dot"></div>
</div>
</section>
<!-- 特价酒店和精选榜区域 -->
<section class="special-area">
<div class="special-header">
<h2 class="special-title">
<i class="fa fa-fire mr-1"></i>特价·酒店
</h2>
<span class="special-tag">特价好货直播中</span>
</div>
<div>
<!-- 特价酒店 -->
<div class="hotel-card">
<
img src="https://images4.c-ctrip.com/target/0204p120009cen1cv995B_D_280_280_R5.jpg" alt="上海虹桥新华联索菲特大酒店" class="hotel-
img">
<div class="hotel-tag">酒店套餐</div>
<div class="hotel-info">
<p class="hotel-name">上海虹桥新华联索菲特大酒店 高级大床房 2晚套餐</p>
<p class="hotel-price">¥928</p>
</div>
</div>
</div>
<!-- 携程精选榜 -->
<div>
<div class="rank-header">
<h2 class="rank-title">携程精选榜</h2>
<span class="rank-tag">权威排行榜</span>
</div>
<div class="rank-grid">
<!-- 奢华酒店榜 -->
<div class="rank-card">
<
img src="https://d
img04.c-ctrip.com/images/200u11000000quu6h0E14_R_2
38_268.jpg" alt="奢华酒店榜" class="rank-
img">
<div class="rank-city">上海</div>
<div class="rank-info">
<p class="rank-name">奢华酒店榜</p>
</div>
</div>
<!-- 亲子乐园酒店榜 -->
<div class="rank-card">
<
img src="https://d
img04.c-ctrip.com/images/1mc
3t12000dh1t0n6E894_R_2
38_268.jpg" alt="亲子乐园酒店榜" class="rank-
img">
<div class="rank-city">上海</div>
<div class="rank-info">
<p class="rank-name">亲子乐园酒店榜</p>
</div>
</div>
</div>
</div>
</section>
<
img src="
img/携程旅行-酒店预订,机票预订查询,旅游度假,商旅管理-携程无线官网_files/0zg7
312000jgweccc529C.jpg" alt="" class="rank-
img"/>
<!-- 广告横幅 -->
<section class="ad-banner">
<div class="banner-content">
<div class="banner-wrapper">
<div class="banner-text">
<div class="banner-buttons">
<button class="banner-btn btn-primary">
<i class="fa fa-phone mr-1"></i>电话预订
</button>
<button class="banner-btn btn-secondary">
<i class="fa fa-download mr-1"></i>下载携程
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚信息 -->
<footer class="footer">
<div class="footer-links">
<a href="#" class="footer-link">网站地图</a>
<span class="footer-separator">|</span>
<a href="#" class="footer-link">电脑版</a>
</div>
<p class="footer-copyright">©2025携程旅行 沪ICP备0802
3580号</p>
</footer>
<!--
底部导航栏 -->
<nav class="bottom-nav">
<a href="#" class="nav-item active">
<i class="fa fa-home nav-icon"></i>
<span class="nav-text">首页</span>
</a>
<a href="#" class="nav-item">
<i class="fa fa-globe nav-icon"></i>
<span class="nav-text">社区</span>
</a>
<a href="#" class="nav-item">
<i class="fa fa-comment-o nav-icon"></i>
<span class="nav-text">消息</span>
</a>
<a href="#" class="nav-item">
<i class="fa fa-user-o nav-icon"></i>
<span class="nav-text">我的</span>
</a>
</nav>
<!-- 为
底部导航留出空间 -->
<div class="bottom-space"></div>
</div>
</body>
</
html>帮我检查一下是否是响应式布局，以及把两个按钮修改为平均分布在一行
扫一扫
1968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
