把pin老师旧版的携程页面跟新版的结合一起编写
学到的内容有:
normolize初始化样式
flex布局
精灵图二倍图的图形更改
阿里iconfont字体图标的使用
三角的制作
手机端pc端百分比自适应图像变换
省略号的编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<!-- <link rel="stylesheet" href="normalize.css"> -->
<link rel="stylesheet" href="iconfonts/iconfont.css">
</head>
<body>
<!-- 搜索框 -->
<div class="search">
<div class="sc_input">
<i class="iconfont icon-fangdajing"></i>
<span>搜索:目的地/酒店/景点/美食</span>
</div>
<div class="user">
<i class="iconfont icon-yonghu"></i>
<span>我的</span>
</div>
</div>
<!-- 焦点图 -->
<div class="foucs">
<img src="images/focus1.jpg" alt="">
</div>
<!-- nav模块 -->
<div class="nav">
<ul>
<li class="nav-hotel">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">酒店</span>
</a>
</li>
<li class="nav-hotel">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">民宿/酒店</span>
</a>
</li>
<li class="nav-hotel">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">特价/爆款</span>
</a>
</li>
</ul>
<ul>
<li class="nav-flight">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">机票</span>
</a>
</li>
<li class="nav-flight">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">接送机/包车</span>
</a>
</li>
<li class="nav-flight">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">航班助手</span>
</a>
</li>
</ul>
<ul>
<li class="nav-train">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">火车票</span>
</a>
</li>
<li class="nav-train">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">汽车/船票</span>
</a>
</li>
<li class="nav-train">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">租车</span>
</a>
</li>
</ul>
<ul>
<li class="nav-vacation">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">旅游</span>
</a>
</li>
<li class="nav-vacation">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">门票/活动</span>
</a>
</li>
<li class="nav-vacation">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">周边泳</span>
</a>
</li>
</ul>
<ul>
<li class="nav-gs">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">攻略/景点</span>
</a>
</li>
<li class="nav-gs">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">美食</span>
</a>
</li>
<li class="nav-gs">
<a href="#">
<span class="nav_ig"></span>
<span class="nav_style">购物/免税</span>
</a>
</li>
</ul>
</div>
<!-- banner模块 -->
<div class="sub-banner">
<div class="banner">
<a href="#" class="block-header">
<img src="images/banner1.png" alt="">
<div class="live-streaming">特价好货直播中</div>
</a>
<div class="slider">
<div class="tag">酒店套餐</div>
<img src="images/banner2.jpg" alt="">
<div class="product">上海万达瑞华酒店1晚</div>
<div class="footer-price">
<div class="price">
<i>¥2799</i>
<s>6760</s>
</div>
<div class="sub">立减¥480</div>
</div>
</div>
</div>
<div class="banner">
<div class="block-header">
<img src="images/banner2.png" alt="">
<div class="ranking">权威排行榜</div>
</div>
<div class="rank-wrapper">
<a href="#" class="rank-item">
<img src="images/hotel1.jpg" alt="">
<div class="tag">华东</div>
<div class="block-footer">
<span class="rank-title"> 华东奢华酒店榜</span>
</div>
</a>
<a href="#" class="rank-item">
<img src="images/hotel2.jpg" alt="">
<div class="tag">华东</div>
<div class="block-footer">
<span class="rank-title"> 华东奢华酒店榜</span>
</div>
</a>
</div>
</div>
</div>
<!-- 广告模块 -->
<div class="advertising">
<img src="images/adv_banner.png" alt="">
</div>
<!-- 工具模块 -->
<div class="toolbox">
<div class="phone"><span class="iconfont icon-dianhua"></span>电话预定</div>
<div class="download"><span class="iconfont icon-xiazaidaoru"></span>下载携程</div>
<div class="language">
<span class="iconfont icon-ditu_diqiu_o"></span>
Language
<span class="trangle"></span>
</div>
</div>
</body>
</html>
a{
text-decoration: none;
color: #000;
}
img,li,ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
body{
max-width: 540px;
min-width: 320px;
margin: 0 auto;
color: #000;
background-color: #f4f4f4;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
/* 搜索框模块 */
.search{
position: fixed;
display: flex;
align-items: center;
width: 100%;
left: 50%;
top: 0;
transform: translateX(-50%);
height: 44px;
max-width: 540px;
min-width: 320px;
background-color: white;
}
.search .sc_input{
flex: 1;
height: 32px;
border: 1.8px solid #0086f6;
border-radius: 16px;
margin-left: 10px;
color: #999;
text-align: center;
line-height: 32px;
font-size: 15px;
}
.sc_input i{
font-size: 18px;
}
.search .user{
width: 44px;
height: 44px;
text-align: center;
color: #0086f6;
}
.search .user i{
font-size: 18px;
}
.search .user span{
display: inline-block;
font-size: 14px;
}
/* 焦点图 */
.foucs{
width: 100%;
margin-top: 44px;
}
.foucs img{
width: 100%;
height: 100px
}
/* nav 模块 */
.nav{
display: flex;
margin-bottom: 15px;
padding:0 8px 8px;
background-color: white;
}
.nav ul{
flex: 1;
display: flex;
flex-direction: column;
margin-left: 2px;
}
.nav ul:first-child{
margin-left: 0;
}
.nav ul li:first-child a{
color: white;
}
.nav ul li a{
display: block;
padding-top: 10px;
}
.nav ul li{
width: 100%;
height: 58px;
font-size: 12px;
text-align: center;
margin-bottom: 2px;
}
.nav ul li:last-child{
margin-bottom: 0;
}
.nav ul li a .nav_ig{
display: inline-block;
width: 21px;
height: 18px;
background: url(images/jingling.png) 0 -66px;
background-size: 21px 315px;
}
.nav .nav_style{
display: block;
}
.nav-hotel:first-child{
background-color: #fb8650;
border-top-left-radius:8px;
}
.nav-hotel:nth-child(2) .nav_ig{
background-position: 0 -255px;
}
.nav-hotel:nth-child(3) .nav_ig{
background-position: 0 -3px;
}
.nav-hotel{
background-color: #fff5f1;
}
.nav-flight:first-child{
background-color: #50b2fa;
}
.nav-flight:first-child .nav_ig{
background-position: 0 -130px;
}
.nav-flight:nth-child(2) .nav_ig{
background-position: 0 -44px;
}
.nav-flight:nth-child(3) .nav_ig{
background-position: 0 -212px;
}
.nav-flight{
background-color: #eff9ff;
}
.nav-train:first-child{
background-color: #5e80ff;
}
.nav-train:first-child .nav_ig{
background-position: 0 -276px;
}
.nav-train:nth-child(2) .nav_ig{
background-position: 0 -169px;
}
.nav-train:nth-child(3) .nav_ig{
background-position: 0 -193px;
}
.nav-train{
background-color: #f2f5ff;
}
.nav-vacation:first-child{
background-color: #52d9b3;
}
.nav-vacation:first-child .nav_ig{
background-position: 0 -110px;
}
.nav-vacation:nth-child(2) .nav_ig{
background-position: 0 -150px;
}
.nav-vacation:nth-child(3) .nav_ig{
background-position: 0 -297px;
}
.nav-vacation{
background-color: #ecfcf8;
}
.nav-gs:first-child{
background-color: #ff8939;
border-top-right-radius: 8px;
}
.nav-gs:first-child .nav_ig{
background-position: 0 -23px;
}
.nav-gs:nth-child(2) .nav_ig{
background-position: 0 -86px;
}
.nav-gs:nth-child(3) .nav_ig{
background-position: 0 -233px;
}
.nav-gs{
background-color: #fff9f2;
}
/* banner模块 */
.sub-banner{
width: 100%;
display: flex;
}
.banner{
flex: 1;
width: 50%;
padding:8px 0 8px 8px;
margin-left:8px;
background-color: white;
border-radius: 10px;
}
.banner:nth-child(2){
margin-right: 8px;
}
.banner .block-header{
display: flex;
justify-content: space-between;
height: 20px;
margin-bottom: 8px;
}
.banner .block-header .live-streaming{
color: #ff4607;
background-color: #ffebe3;
font-size: 12px;
}
.slider{
position: relative;
padding-right: 8px;
}
.slider .tag{
position: absolute;
width: 55px;
top: 0;
left: 0;
text-align: center;
font-size: 12px;
color: white;
background-color: #000;
}
.slider img{
width: 100%;
height: 84px;
border-radius: 3px;
}
.slider .product{
position: relative;
left: 0;
bottom: 26px;
color: white;
font-weight: 600;
font-size: 12px;
}
.footer-price{
display: flex;
}
.footer-price .price{
color: red;
font-size: 14px;
}
.footer-price .price i{
font-weight: 600;
}
.footer-price .price s{
font-size: 12px;
}
.footer-price .sub{
background-color: #fb8650;
color: white;
font-size: 12px;
padding: 0 4px;
margin-left: 5px;
}
.block-header .ranking{
height: 16px;
background-color: #fdefd2;
color: #ae6e15;
margin-left: 10px;
border-radius: 2px;
font-size: 10px;
padding: 1px 4px;
line-height: 16px;
}
.rank-wrapper{
display: flex;
padding-right: 8px;
}
.rank-wrapper .rank-item{
flex: 1;
position: relative;
}
.rank-item:nth-child(1){
margin-right: 4px;
}
.rank-wrapper .rank-item img{
width: 100%;
border-radius: 5px;
height: 84px;
}
.rank-item .tag{
position: absolute;
top: 0;
left: 0;
background-color: #e2c089;
font-size: 10px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.rank-item .block-footer{
display: flex;
margin-top: 17px;
}
.rank-item .block-footer .rank-title{
font-size: 11px;
width: 70px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* 广告模块 */
.advertising{
margin-top: 10px;
padding: 0 8px;
}
.advertising img{
width: 100%;
height: 88px;
border-radius: 8px;
}
/* 工具模块 */
.toolbox{
display: flex;
justify-content: space-around;
margin-top: 10px;
}
.toolbox div{
font-size: 13px;
min-width: 100px;
height: 30px;
border-radius: 5px;
border: 1px solid #999;
line-height: 30px;
text-align: center;
}
.toolbox span{
margin-right: 3px;
}
.toolbox .language{
position: relative;padding-right: 8px;
}
.toolbox .trangle{
position: absolute;
top: 15px;
right: 0;
border: 5px solid transparent;
border-top: 5px solid black;
}