1. 携程首页
1.1、主体结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<!-- 公共样式 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 页面样式 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 字体图标 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<script></script>
</head>
<body>
<!-- 版心用于适配pc端 -->
<div class="container">
<!-- 顶部搜索栏 -->
<div class="top-bar"></div>
<!-- 顶部背景 -->
<div class="header"></div>
<!-- banner栏 -->
<div class="banner"></div>
<!-- 导航栏 -->
<div class="navbar"></div>
<!-- 网络导航 -->
<div class="grid"></div>
<!-- 活动列表 -->
<div class="adv-list"></div>
<!-- 底部 -->
<div class="tool-box"></div>
</div>
</body>
</html>
1.2、公共样式base.css
*{
margin: 0px;
padding: 0px;
/*1.移动端盒子一般是内减盒子*/
box-sizing: border-box;
}
body{
/* 移动端字体大小为12px */
font-size: 12px;
}
li{
list-style: none;
}
img{
vertical-align: middle;
}
a{
color:#000;
text-decoration: none;
/* 移动端a链接点击具有背景样式,我们不需要这个样式,所以取消 */
-webkit-tap-highlight-color: transparent;
}
input {
border:1 none;
outline-style: none;
}
/* 清除浮动样式类 */
.clear::after{
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
.celar {
zoom: 1;
}
1.3、容器适配pc端
/* 适配pc端 */
.container{
width: 100%;
min-width: 320;
max-height: 750;
}
/* 设置背景颜色 */
body{
background: #fafafc;
}
1.4、顶部搜索栏实现
结构
<div class="search-box">
<span>搜索:目的地/酒店/景点/航班号</span>
</div>
<a href="">
<span>我 的</span>
</a>
效果图
/* 顶部搜索栏 */
.top-bar{
position: fixed;
top:0;
width:100%;
/* 一般搜索栏高度固定是44px */
height: 44px;
background:transparent;
/* 弹性布局 */
display:flex;
/* 里面的div是30高度,所以这里设置内边距 */
padding:7px 10px;
}
/* 除去已占用的宽度后,的宽度 */
.top-bar .search-box{
flex:1;
height:30px;
border-radius: 15px;
background:#fff;
/* 控制内部的放大镜与文本框向右移一些 */
padding-left:10px;
line-height: 30px;
/* 放大镜相对于search-box,而不是相对于span */
position: relative;
}
.top-bar .search-box span{
padding-left:35px;
color:#666;
font-size:14px;
line-height: 24px;;
}
/* 放大镜 */
.top-bar .search-box span::after{
position: absolute;
content:'';
left:0;
top:0;
width:35px;
height: 100%;
/* 15px 7px是微调出来的 */
background:url(../images/home-common-sprite2x@v7.15.png) 15px 7px no-repeat;
background-size: 21px 123px;
}
/* 登陆 */
.top-bar a{
width:50px;
/* background:#ccc; */
text-align: center;
}
/* 登陆头像 */
.top-bar a::before{
display:block;
width:22px;
height:22px;
content:'';
background:url(../images/home-common-sprite2x@v7.15.png) 1px -36px no-repeat;
background-size:21px 123px;
margin:0 auto;
}
/* 登陆两个字的颜色 */
.top-bar a span{
color:#fff;
}
1.5、顶部背景
样式
/* 顶部背景栏 */
.header{
width: 100%;
height: 180px;
background: #f5adad url(../images/banner_bg.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}
1.6、banner栏
结构
<ul>
<li><a href="">
<span class="icon"></span>
<span>攻略·景点</span>
</a></li>
<li><a href="">
<span class="icon"></span>
<span>门票·玩乐</span>
</a></li>
<li><a href="">
<span class="icon"></span>
<span>美食林</span>
</a></li>
<li><a href="">
<span class="icon"></span>
<span>周边游</span>
</a></li>
<li><a href="">
<span class="icon"></span>
<span>一日游</span>
</a></li>
</ul>
样式
/* banner栏 */
.banner ul{
/* 块元素不固定宽度,使用margin-left、right、让其他与父元素保持相对的宽度 */
/* 高度也不设置,让高度被内容撑开 */
/* margin:-35px 12px 10px; */
display: flex;
background:#fff;
margin:-35px 12px 10px;
text-align: center;
padding: 4px 0 8px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.banner ul li{
flex:1;
}
.banner ul li .icon{
display: block;
width:40px;
height:40px;
background-image:url(../images/home-fivemain-sprite2x@v7.15.png);
background-size:40px auto;
margin:0 auto;
}
.banner ul li:nth-child(2) .icon{
background-position:0 -40px;
}
.banner ul li:nth-child(3) .icon{
background-position:0 -80px;
}
.banner ul li:nth-child(4) .icon{
background-position:0 -120px;
}
.banner ul li:nth-child(5) .icon{
background-position:0 -160px;
}
.banner ul li span{
color:#222;
}
导航栏
结构
<div class="wrap">
<div class="row r1">
<a class="flex5 c1" href="">酒店</a>
<a class="flex4 c2" href="">民宿·客栈</a>
<a class="flex8 c3" href=""><span>特价·爆款</span></a>
</div>
<div class="row r2">
<a class="flex5 c1" href="">机票</a>
<a class="flex4 c2" href="">火车票</a>
<a class="flex4 c3" href="">汽车·船票</a>
<a class="flex4 c4" href="">专车·租车</a>
</div>
<div class="row r3">
<a class="flex5 c1" href="">旅游</a>
<a class="flex4 c2" href="">高铁游</a>
<a class="flex4 c3" href="">邮轮游</a>
<a class="flex4 c4" href="">定制游</a>
</div>
</div>
样式
/* 导航栏 */
.navbar{
width: 100%;
}
.navbar .wrap{
height:198px;
margin: 0 12px 1px;
/* 配置纵向平均分 */
display: flex;
/* 配置纵向平均分: 改变主轴方向,让其坚向排列,可以对父元素的高度进行平均分 */
flex-direction: column;
border-radius: 8px;
overflow: hidden;;
}
.navbar .row{
/* 配置纵向平均分: 设置弹性占比为1,平均占据父元素的高度 */
flex:1;
/* 每一个row再采用弹性布局 */
display: flex;
height:100%;
}
/* 控制每一个盒子的flex占比 */
.navbar .row .flex4{
flex:4;
}
.navbar .row .flex5{
flex:5;
}
.navbar .row .flex8{
flex:8;
}
/* 控制文字居中 */
.navbar .row a{
text-align: center;
line-height: 66px;
color:#fff;
font-size: 14px;
}
/* 为每一个row设置渐变 */
.navbar .r1{
background-image:linear-gradient(to right, #fa5956, #fb8650 54%);
border-bottom:1px solid #fff;;
}
.navbar .r2{
background-image:linear-gradient(to right, #4b8fed, #53bced);
border-bottom:1px solid #fff;;
}
.navbar .r3{
background-image:linear-gradient(to right, #34c2aa, #6cd557);
}
/* 设置背景 */
.navbar .r1 .c1{
background:url(../images/grid-nav-items-hotel@v7.15.png) right bottom no-repeat;
background-size:73px auto;
border-right:1px solid #fff;
}
.navbar .r1 .c2{
background:url(../images/grid-nav-items-minsu@v7.15.png) left bottom no-repeat;
background-size:37px auto;
border-right:1px solid #fff;
}
/* 单独为r1 c3设置背景渐变 */
.navbar .r1 .c3{
background-image:linear-gradient(to right,#ffbc49,#ffd252);
/* 设置1像素的透明边框,解决坚线对不齐的问题 */
border-right:1px solid transparent;
}
/* 再为r1 c3内的span设置背景图片 */
.navbar .r1 .c3 span{
display: block;
background:url(../images/grid-nav-items-hot.png) right bottom no-repeat;
background-size:100% auto;
color:#a05416;
}
.navbar .r2 .c1{
background:url(../images/grid-nav-items-flight@v7.15.png) right bottom no-repeat;
background-size:73px auto;
border-right:1px solid #fff;
}
.navbar .r2 .c2{
background:url(../images/grid-nav-items-train.png) left bottom no-repeat;
background-size:37px auto;
border-right:1px solid #fff;
}
.navbar .r2 .c3{
border-right:1px solid #fff;
}
.navbar .r3 .c1{
background:url(../images/grid-nav-items-travel@v7.15.png) right bottom no-repeat;
background-size:73px auto;
border-right:1px solid #fff;
}
.navbar .r3 .c2{
background:url(../images/grid-nav-items-dingzhi@v7.15.png) left bottom no-repeat;
background-size:61px auto;
border-right:1px solid #fff;
}
.navbar .r3 .c3{
border-right:1px solid #fff;
}
2.7、网格导航
结构
<ul class="clear">
<li><a href=""><i class="icon"></i><span>自由行</span></a></li>
<li><a href=""><i class="icon"></i><span>WiFi电话卡</span></a></li>
<li><a href=""><i class="icon"></i><span>保险·签证</span></a></li>
<li><a href=""><i class="icon"></i><span>换钞·购物</span></a></li>
<li><a href=""><i class="icon"></i><span>当地向导</span></a></li>
<li><a href=""><i class="icon"></i><span>特价机票</span></a></li>
<li><a href=""><i class="icon"></i><span>礼品卡</span></a></li>
<li><a href=""><i class="icon"></i><span>申卡·借钱</span></a></li>
<li><a href=""><i class="icon"></i><span>旅拍</span></a></li>
<li><a href=""><i class="icon"></i><span>更多</span></a></li>
</ul>
样式
/* 网络导航 */
/* 浮动产生两行,每个li内的a使用弹性布局 */
.grid{
width: 100%;
}
.grid ul{
margin:0 12px 12px;
}
.grid ul li{
width:20%;
float:left;
}
/* li内的a实现弹性布局 */
.grid ul li a{
display: flex;
flex-direction: column;
align-items: center;
}
.grid ul li i{
width: 28px;
height: 28px;
background:url(../images/nav_sub_1.png) 0 0 no-repeat;
background-size: 28px auto;
margin-top: 10px;
margin-bottom: 5px;
}
.grid ul li span{
color:#222;
font-size: 12px;
font-weight: 300;
}
/* 设置每个个图标 */
.grid ul li:nth-child(2) i{
background:url(../images/nav_sub_1.png) 0 -28px no-repeat;
background-size: 28px auto;
}
.grid ul li:nth-child(3) i{
background:url(../images/nav_sub_1.png) 0 -56px no-repeat;
background-size: 28px auto;
}
.grid ul li:nth-child(4) i{
background:url(../images/nav_sub_1.png) 0 -84px no-repeat;
background-size: 28px auto;
}
.grid ul li:nth-child(5) i{
background:url(../images/nav_sub_1.png) 0 -112px no-repeat;
background-size: 28px auto;
}
.grid ul li:nth-child(6) i{
background:url(../images/nav_sub_1.png) 0 -140px no-repeat;
background-size: 28px auto;
}
.grid ul li:nth-child(7) i{
background:url(../images/nav_sub_1.png) 0 -168px no-repeat;
background-size: 28px auto;
}
.grid ul li:nth-child(8) i{
background:url(../images/nav_sub_1.png) 0 -196px no-repeat;
background-size: 28px auto;
}
.grid ul li:nth-child(9) i{
background:url(../images/nav_sub_1.png) 0 -224px no-repeat;
background-size: 28px auto;
}
.grid ul li:nth-child(10) i{
background:url(../images/nav_sub_1.png) 0 -252px no-repeat;
background-size: 28px auto;
}
2.8、活动列表
2.8.1 活动列表头部
结构
<!-- 活动列表头部 -->
<div class="list-header">
<!-- 左侧标题 -->
<h2 class="title">
<i class="icon-gg"></i>
</h2>
<a href="">获取更多福利</a>
</div>
样式
/* 活动列表头部 */
.adv-list{
width: 100%;
background: #f2f2f2;
}
.adv-list .list-header{
width: 100%;
padding:0 8px;
height: 44px;
/* 让h2内的子元素相对于当前元素定位 */
position: relative;
}
/* 左侧标题 */
.adv-list .list-header .title{
overflow: hidden;
height: 0px;
}
/* 热门活动背景图 */
.adv-list .list-header .title::after{
content: '';
display: block;
width: 79px;
height: 15px;
background:url(../images/un_home_text.png) 0 -19px no-repeat;
background-size: 79px auto;
position: absolute;
top: 50%;
left: 8px;
transform: translateY(-50%);
}
/* 广告图 */
.adv-list .list-header .icon-gg{
position: absolute;
width: 36px;
height: 15px;
top: 50%;
transform: translateY(-50%);
left: 90px;
background:url(../images/icon-gg@2x.png) 0 0 no-repeat;
background-size: 36px auto;
}
/* 获取更多福利 */
.adv-list .list-header a{
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
text-align: center;
padding: 0 18px 0 12px;
background: linear-gradient(to right,#ff4e63,#ff6cc9);
border-radius: 10px;
}
/* 箭头 */
.adv-list .list-header a::after{
content:'';
position: absolute;
width: 7px;
height: 7px;
border: 2px solid #fff;
transform: rotate(-45deg);
border-width: 0px 2px 2px 0px;
top: 4px;
right: 9px;
}
2.8.2 活动列表内容
结构
样式
/* 活动内容 */
.adv-list .adv-bd{
width: 100%;
}
.adv-list .adv-bd .row{
width: 100%;
display: flex;
}
.adv-list .adv-bd .row a{
flex: 1;
}
.adv-list .adv-bd .r1{
height: 131px;
margin-top: 1px;
}
.adv-list .adv-bd .r2,
.adv-list .adv-bd .r3
{
height: 81px;
margin-top: 1px;
}
/* 设置背景图片 */
.adv-list .adv-bd .r1 .c1{
background:url(../images/yi-hu-fu-li.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}
.adv-list .adv-bd .r1 .c2{
background:url(../images/bai-yuan-li-bao.jpg) 0 0 no-repeat;
background-size: 100% 100%;
margin-left:1px;
}
.adv-list .adv-bd .r2 .c1{
background:url(../images/lv-xing-yong-pin.png) 0 0 no-repeat;
background-size: 100% 100%;
}
.adv-list .adv-bd .r2 .c2{
background:url(../images/ling-quan-zhong-xin.jpg) 0 0 no-repeat;
background-size: 100% 100%;
margin-left:1px;
}
.adv-list .adv-bd .r3 .c1{
background:url(../images/yi-qing-bao-zhang.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}
.adv-list .adv-bd .r3 .c2{
background:url(../images/te-jia-men-piao.jpg) 0 0 no-repeat;
background-size: 100% 100%;
margin-left:1px;
}
/* 广告角标 */
.adv-list .adv-bd .row a{
position: relative;
}
.adv-list .adv-bd .row a::after{
content:'广告';
font-size: 18px;
width: 52px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
background: #b2b2b2;
position: absolute;
left:0;
bottom:0;
transform: scale(.5);
transform-origin: left bottom;
border-top-right-radius: 7px;
}
2.9、底部
按钮栏
结构
<!-- 底部按钮 -->
<div class="tool-cn">
<a href="">
<i class="iconfont icon-phonecallcontact"></i>
<span>电话预定</span>
</a>
<a href="">
<i class="iconfont icon-download"></i>
<span>下载客户端</span>
</a>
<a href="">
<i class="iconfont icon-user"></i>
<span>我的</span>
</a>
</div>
样式
/* 底部 */
.tool-box{
width: 100%;
margin-top:10px;
padding-bottom: 5px;
}
/* 底部按钮 */
.tool-box .tool-cn{
display: flex;
background:#fff;
width: 100%;
padding-bottom: 5px;
}
.tool-box .tool-cn a{
flex:1;
text-align: center;
padding: 10px 0;
color: #333;
display: flex;
flex-direction: column;
}
底部版本
结构
<!-- 底部版本 -->
<div class="tool-ver">
<a href="">网站地图</a>
|
<a href="">
<i class="global"></i>
Language
<i class="triangle"></i>
</a>
|
<a href="">电脑版</a>
</div>
样式
/* 底部版本 */
.tool-box .tool-ver{
width:100%;
text-align: center;
padding:10px 0 5px;
}
.tool-box .tool-ver a{
color: #666666;
}
/* 地图 */
.tool-box .tool-ver .global{
display:inline-block;
width: 11px;
height: 11px;
background:url(../images/un_icon_sites.png) 0 -160px no-repeat;
background-size:30px auto;
margin-right: 7px;
}
/* 下箭头 */
.tool-box .tool-ver .triangle{
display: inline-block;
width: 5px;
height: 5px;
border: 1px solid #666;
border-width: 0 1px 1px 0;
transform: rotate(45deg);
margin: 0 3px;
vertical-align: 2px;
}
底部版权
结构
<p class="copyright">
©<label id="copyno">2020</label>携程旅行|<a href="http://www.miibeian.gov.cn/" class="link-icp">沪ICP备08023580号</a>
</p>
样式
/* 底部版权 */
.tool-box .copyright{
text-align: center;
padding: 5px 0;
}
.tool-box .copyright,
.tool-box .copyright a
{
color: #999;
font-size:12px;
}