携程旅行移动端代码
html代码
携程在手，说走就走
搜索:目的地/酒店/景点/航班号
我的
热门活动
获取更多福利
css代码
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #222;
}
div,
a {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
li {
list-style: none;
}
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
/* height: 2000px; */
}
/* 顶部模块 */
.search-index {
position: fixed;
left: 50%;
top: 0;
display: flex;
width: 100%;
max-width: 540px;
min-width: 320px;
transform: translateX(-50%);
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #f3f3f3;
height: 44px;
align-items: center;
/* background-color: #eee; */
/* background-color: pink; */
}
.search-index .search {
position: relative;
flex: 1;
height: 26px;
border-radius: 8px;
margin: 0 10px 0;
background-color: #f6f6f6;
padding: 0 30px;
border: 1px solid #ccc;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, .2);
font-size: 12px;
color: #666;
line-height: 24px;
}
.search::before {
position: absolute;
top: 5px;
left: 10px;
content: "";
/* display: inline-block; */
width: 15px;
height: 15px;
/* margin: 5px 10px; */
background: url(../images/sprite.png) no-repeat -59px -279px;
background-size: 104px auto;
/* vertical-align: middle; */
/* background-color: pink; */
}
.search-index .user {
width: 44px;
height: 44px;
/* background-color: purple; */
font-size: 12px;
color: #2eaae0;
text-align: center;
}
.search-index .user::before {
content: "";
display: block;
width: 23px;
height: 24px;
/* background-color: gray; */
margin: 2px auto -1px;
background: url(../images/sprite.png) no-repeat -59px -194px;
background-size: 104px auto;
}
/* 焦点图模块 */
.focus {
margin-top: 44px;
}
.focus img {
width: 100%;
}
/* 局部导航栏 */
.local-nav {
display: flex;
height: 64px;
margin: 8px 5px 5px;
border-radius: 8px;
background-color: #fff;
}
.local-nav li {
flex: 1;
}
.local-nav a {
display: flex;
/* width: 100%; */
font-size: 12px;
color: #222;
flex-direction: column;
align-items: center;
}
.local-nav a [class^=local-nav-icon] {
width: 32px;
height: 32px;
margin: 8px 0 0;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
/* background-color: pink; */
}
.local-nav a .local-nav-icon-icon2 {
background-position: 0 -32px;
}
.local-nav a .local-nav-icon-icon3 {
background-position: 0 -64px;
}
.local-nav a .local-nav-icon-icon4 {
background-position: 0 -96px;
}
.local-nav a .local-nav-icon-icon5 {
background-position: 0 -128px;
}
/* 主导航图 */
.nav-common {
margin: 0 4px 0;
border-radius: 8px;
overflow: hidden;
}
.nav-common .nav-items {
display: flex;
height: 88px;
margin-bottom: 3px;
overflow: hidden;
}
.nav-common .nav-items:nth-child(1) {
background: -webkit-linear-gradient(left, #fa5c55, #fa984d);
}
.nav-common .nav-items:nth-child(2) {
background: -webkit-linear-gradient(left, #4c93ed, #53baed);
}
.nav-common .nav-items:nth-child(3) {
background: -webkit-linear-gradient(left, #37c3a3, #6ad45b);
}
.nav-items div {
display: flex;
flex: 1;
flex-direction: column;
}
.nav-items div a {
flex: 1;
text-align: center;
color: #fff;
line-height: 44px;
}
.nav-items div:nth-child(n+2) {
border-left: 1px solid #fff;
}
.nav-items div a:nth-child(1) {
border-bottom: 1px solid #fff;
}
.nav-items div:nth-child(1) a {
background: url(../images/hotel.png) no-repeat center bottom;
background-size: 121px auto;
border: 0;
}
.nav-items:nth-child(2) div:nth-child(1) a {
background: url(../images/[email protected]) no-repeat center bottom;
background-size: 60px auto;
}
.nav-items:nth-child(3) div:nth-child(1) a {
background: url(../images/[email protected]) no-repeat center bottom;
background-size: 44px auto;
}
/* 侧边导航栏 */
.subnav-entry {
display: flex;
flex-wrap: wrap;
border-radius: 8px;
margin: 0 4px 5px;
background-color: #fff;
}
.subnav-entry li {
flex: 20%;
}
.subnav-entry a {
display: flex;
color: #222;
font-size: 14px;
flex-direction: column;
align-items: center;
}
.subnav-entry [class^=subnav-entry] {
width: 28px;
height: 28px;
margin: 4px 0;
background: url(../images/subnav-bg.png) no-repeat 0px 0px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-icon2 {
background: url(../images/subnav-bg.png) no-repeat 0px -28px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-icon3 {
background: url(../images/subnav-bg.png) no-repeat 0px -61px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-icon4 {
background: url(../images/subnav-bg.png) no-repeat 0px -321px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-icon5 {
background: url(../images/subnav-bg.png) no-repeat 0px -96px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-icon6 {
background: url(../images/subnav-bg.png) no-repeat 0px -162px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-icon7 {
background: url(../images/subnav-bg.png) no-repeat 0px -196px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-icon8 {
background: url(../images/subnav-bg.png) no-repeat 0px -130px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-icon9 {
background: url(../images/subnav-bg.png) no-repeat 0px -230px;
background-size: 28px auto;
}
.subnav-entry .subnav-entry-ico10 {
background: url(../images/subnav-bg.png) no-repeat 0px -288px;
background-size: 28px auto;
}
/* 销售模块 */
.sales-box {
margin: 0 4px;
padding: 20px 0 0;
border-top: 1px solid #ccc;
background-color: #fff;
}
.sales-box .sales-hd {
position: relative;
height: 44px;
/* border-top: 1px solid #ccc; */
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.sales-hd h2 {
position: relative;
/* margin: 10px 0; */
text-indent: -99999999px;
}
.sales-hd h2::after {
position: absolute;
top: 3px;
left: 15px;
content: "";
display: block;
width: 80px;
height: 20px;
background-color: pink;
background: url(../images/hot.png) no-repeat 0 -17px;
background-size: 78px auto;
}
.sales-hd .more {
position: absolute;
top: 0px;
right: 10px;
padding: 3px 20px;
border-radius: 26px;
font-size: 14px;
color: #fff;
background: -webkit-linear-gradient(left, #ff5171, #ff6ac3);
}
.sales-hd .more::after {
content: "";
position: absolute;
top: 9px;
right: 6px;
display: block;
width: 8px;
height: 8px;
/* background-color: purple; */
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
}
.sales-bd .row {
display: flex;
}
.sales-bd .row:nth-child(-n+2) {
border-bottom: 1px solid #ccc;
}
.sales-bd .row a {
flex: 1;
}
.sales-bd .row a:nth-child(1) {
border-right: 1px solid #ccc;
}
.sales-bd .row a img {
width: 100%;
}