Haina
/
data.chinahighlights.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '93fe716a6e'
${ noResults }
data.chinahighlights.com/css/mobile-first.css

1042 lines
42 KiB
CSS
Raw Normal View History Unescape Escape

移动优先的模板css js
5 years ago
@charset "utf-8";
/* public style */
body { margin: 0;font-family:'Proxima Nova', Arial, Helvetica, sans-serif;color:#000; background:#fff; }
a { color: #000;
text-decoration: none;
}
a:hover { text-decoration: none; color:#000; }
h1 { font-size: 30px;
font-weight: 600;
text-align: left;
text-transform: initial;
line-height: 36px;}
h2{ font-size: 23px;
font-weight: 600;
margin-bottom: 25px;
margin-top: 70px;
color: #000;
padding: 0 15px;
line-height: 30px;}
h3{font-size: 20px;
font-weight: 600;
color: #000;
padding: 0 15px;
margin-bottom: 25px;
margin-top: 50px;
line-height: 30px; }
p{line-height:32px;margin-bottom:30px;font-size:18px;color: #000; font-family: Proxima Nova; padding: 0 15px;}
p a { color: #000;
text-decoration: none;
border-bottom: 3px solid #df8787;
padding-bottom: 2px;}
p a:hover { text-decoration: none; color:#000; background: #df8787; transition: 1s;}
p strong { font-weight: 800;}
.img-responsive, video{
display: block;
max-width: 100%;
height: auto;
}
/* google font */
@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:300;src:local('Proxima Nova Light Italic'),local('OpenSans-LightItalic'),url('//data.chinahighlights.com/public/fonts/PRmiXeptR36kaC0GEAetxko2lTMeWA_kmIyWrkNCwPc.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:400;src:local('Proxima Nova Italic'),local('OpenSans-Italic'),url('//data.chinahighlights.com/public/fonts/xjAJXh38I15wypJXxuGMBo4P5ICox8Kq3LLUNMylGO4.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:600;src:local('Proxima Nova SemiBold Italic'),local('OpenSans-SemiBoldItalic'),url('//data.chinahighlights.com/public/fonts/PRmiXeptR36kaC0GEAetxl2umOyRU7PgRiv8DXcgJjk.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:700;src:local('Proxima Nova Bold Italic'),local('OpenSans-BoldItalic'),url('//data.chinahighlights.com/public/fonts/PRmiXeptR36kaC0GEAetxolIZu-HDpmDIZMigmsroc4.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:italic;font-weight:800;src:local('Proxima Nova ExtraBold Italic'),local('OpenSans-ExtraBoldItalic'),url('//data.chinahighlights.com/public/fonts/PRmiXeptR36kaC0GEAetxnibbpXgLHK_uTT48UMyjSM.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:300;src:local('Proxima Nova Light'),local('OpenSans-Light'),url('//data.chinahighlights.com/public/fonts/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:400;src:local('Proxima Nova Regular'),local('OpenSans-Regular'),url('//data.chinahighlights.com/public/fonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:600;src:local('Proxima Nova SemiBold'),local('OpenSans-SemiBold'),url('//data.chinahighlights.com/public/fonts/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:700;src:local('Proxima Nova Bold'),local('OpenSans-Bold'),url('//data.chinahighlights.com/public/fonts/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}@font-face{font-family:'Proxima Nova';font-style:normal;font-weight:800;src:local('Proxima Nova ExtraBold'),local('OpenSans-ExtraBold'),url('//data.chinahighlights.com/public/fonts/EInbV5DfGHOiMmvb1Xr-hugdm0LZdjqr5-oayXSOefg.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;}
/* from font awesome */
@font-face{font-family:FontAwesome;src:url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('//data.chinahighlights.com/public/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:400;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-facebook-square:before{content:"\f082"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-tripadvisor:before{content:"\f262"}.fa-500px:before{content:"\f26e"}.fa-angle-down:before{content:"\f107"}.fa-square-o:before{content:"\f096"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}
.fa-facebook-square:before { content: "\f082" }
.fa-facebook-f:before, .fa-facebook:before { content: "\f09a" }
.fa-twitter:before { content: "\f099" }
.fa-pinterest:before { content: "\f0d2" }
.fa-pinterest-square:before { content: "\f0d3" }
.fa-caret-down:before { content: "\f0d7" }
.fa-caret-up:before { content: "\f0d8" }
.fa-caret-left:before { content: "\f0d9" }
.fa-caret-right:before { content: "\f0da" }
.fa-instagram:before { content: "\f16d" }
.fa-flickr:before { content: "\f16e" }
.fa-tripadvisor:before { content: "\f262" }
.fa-500px:before { content: "\f26e" }
.fa-angle-down:before { content: "\f107" }
.fa-square-o:before { content: "\f096" }
.fa-angle-left:before { content: "\f104" }
.fa-angle-right:before { content: "\f105" }
.fa-navicon:before,.fa-reorder:before,.fa-bars:before { content: "\f0c9"; color:#fff; margin:5px 0 0 15px; }
.fa-google-plus::before { content: "\f0d5";}
.fa-angle-double-down:before {content: "\f103";}
.fa-search:before {content: "\f002";}
/* sidebar style */
.headerbar .start-navbar-trigger { background:#fff; position:fixed; width:100%; z-index:9999; border-bottom: 1px solid #e0e0e0; }
.headerbar .start-navbar-trigger .navimenu { color: #000;
border-left: 1px solid #a0a0a0;
padding-left: 15px;
margin-left: 20px;}
.topnavitailor {float: right;
height: 40px;
margin-top: 13px;}
.topnavitailor .topnaviarrowdown { border-left: 1px solid #555;
padding-left: 15px;
margin-left: 15px;
padding-top: 1px;
height: 27px;
padding-right: 15px;}
a.infocustomize { position: relative; font-size: 14px;
color: #000;
border: 1px solid #000;
border-radius: 4px;
padding: 6px 10px;
font-weight: 600;
display: initial;
height: 20px;}
.headerbar .start-navbar-trigger { background:#fff; position:fixed; width:100%; z-index:9999; height: 53px;
padding: 0 20px; font-size: 1.38rem;}
.headerbar { background-color: #fff; color: #000; z-index: 999; box-shadow: 0 0 5px 2px rgba(0,0,0,.1) }
.headerbar-nav { line-height: 3.5rem }
.start-nav a, .start-navbar-trigger { cursor: pointer; text-decoration: none }
.start-nav a :hover, .start-navbar-trigger {color: #fff;}
.start-navbar-trigger { line-height: 3.5rem; font-size: 2.2rem }
.headerbar-nav { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 }
.sidebar { background-color: rgba(0,0,0,0.75);
max-width: 160vw;
top: calc(0px);
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navigation.jpg) no-repeat;}
.sidebar-header { line-height: 3.5rem; min-height: 3.5rem }
.sidebar .start-navbar-trigger { line-height: inherit;
color: #999;
width: 50px;
font-size: 35px;
float: right; }
.headerbar { color: #f88; background-color: #fff; height: 2.6rem; box-shadow: none; }
.sidebar-nav-image { width: 120px }
.sidebar-header { position: relative; z-index: 1 }
.start-nav { margin-bottom: 2rem }
.start-nav-item { color: #222; list-style: none; padding-bottom:8px; }
.sidebar .start-nav-item { margin-bottom: 20px; padding-left: 30px }
.nav-link { font-size: 32px;
font-weight: 700;
line-height: normal;
display: inline-block;
position: relative;
color: #efefef;
text-transform: uppercase;}
.nav-link .fa { position: absolute; right: 20px; top: 3px }
/* -------- */
.updateinfo { padding: 15px 15px 10px 15px;
background: #f2f2f2;
height: 50px;}
.updateinfo p { background: url(https://data.chinahighlights.com/pic/guide/update-info-template-arrow.png) right no-repeat;
font-weight: 600;
font-size: 16px;
line-height: 22px;
padding-right: 20px;
margin-top: 0;
padding-left: 0;}
.updateinfo p a { border-bottom: none;}
.topcontent { padding: 50px 15px;}
.infocategory { font-size: 16px;
font-weight: 600;
border-left: 4px solid #a31022;
padding-left: 15px;
text-transform: uppercase;}
p.subheadline {font-size: 18px;
font-weight: 600; padding: 0;}
.followus {font-size: 16px;
color: #555;
text-transform: uppercase;
border-bottom: 1px solid #dcdcdc;
padding-bottom: 15px;
margin-bottom: 20px;
margin-top: 40px;}
.authorupdate {font-size: 16px;
text-transform: uppercase;
color: #555;}
.authorupdate strong {border-right: 1px solid #dcdcdc;
padding-right: 10px;
margin-right: 10px; color: #000;}
.infovideo, .infoimage { margin: 70px 0;}
.infoimagetitle {font-size: 14px;
text-transform: uppercase;
color: #888;
display: block;
border-left: 3px solid #b8b8b8;
padding-left: 15px;
margin-left: 15px;
margin-top: 15px;
line-height: 18px;}
table.infotable { margin: 0 15px;
border-top: 5px solid #df8787;border-left: 1px solid #d1d1d1;
border-spacing: 0;}
table.infotable th {background: #f5f5f5;
padding: 15px 10px;
border-top: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
font-size: 18px;
line-height: 23px;}
table.infotable td { padding: 15px;
border-right: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
font-size: 16px;
line-height: 22px;}
table.infotable td a { border-bottom: 2px solid #df8787;}
table.infotable td a:hover {background: #df8787; transition: 1s;}
ul.infolist li {
background: url(https://data.chinahighlights.com/pic/guide/info-template-list-bg.png) no-repeat 0;
list-style: none;
font-size: 18px;
margin-bottom: 15px;
padding-left: 20px;
line-height: 25px;
}
ul.infolist { padding-left: 15px; margin: 30px 0;}
.infoad { margin: 50px 15px;}
.loadmore {border: 1px solid #000;
text-align: center;
text-transform: uppercase;
margin: 50px 15px;
font-size: 18px;}
.loadmore a { width: 100%;
display: block; padding: 13px 0;}
.recotitlebg { position: relative;
border-bottom: 1px solid #000;
margin: 100px auto 50px auto;
width: 93%;
display: block;
}
.recotitlebg h2 { font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
color: #000;
position: absolute;
top: calc(100% - 85px);
background: #fff;
text-align: center;
width: 250px;
text-transform: uppercase;
display: block;
left: calc(100% - 320px);
padding: 0 10px;}
.updatearticle {background: #efefef;
margin: 50px 15px;
position: relative;}
.articlemore {position: absolute;
right: 0;
top: calc(100% - 45px);
background: #fff;
font-size: 14px;
font-weight: 600;
padding: 5px 10px;
border-radius: 50px 0 0 50px;}
.articlemore .fa { color: #a31022;
font-weight: 1000;
font-size: 18px;
margin-left: 5px;}
.category {font-size: 16px;
color: #a3a3a3;
text-transform: uppercase;
display: block;
padding-left: 25px;
padding-top: 30px;}
.categorycenter { font-size: 16px;
color: #a3a3a3;
text-transform: uppercase;
display: block;
padding-top: 30px;
text-align: center;}
.newarticletitle { font-size: 24px;
font-weight: 600;
display: block;
padding-left: 25px;
padding: 20px 25px 45px 25px;
line-height: 30px;}
.articlenexttitle {font-size: 24px;
font-weight: 600;
display: block;
padding-left: 25px;
line-height: 30px;
text-align: center;
padding: 20px 0;}
.infotailor { margin: 100px 0;
background: url(https://data.chinahighlights.com/image/tour-detail/guilin/gl-3-why-us-bg-mobile-longsheng.jpg) no-repeat;
height: 670px;
position: relative;}
.infotailorword {position: absolute;
top: calc(100% - 565px);
color: #fff;
font-size: 32px;
text-align: center;
padding: 0 50px;
line-height: 45px;}
.infotailorbutton { position: absolute;
top: calc(100% - 210px);
background: #fff;
display: block;
margin: 0 auto;
width: 200px;
text-align: center;
font-size: 18px;
left: calc(100% - 285px);
text-transform: uppercase;}
.infotailorbutton a {width: 200px;
display: block;
padding: 15px 0;}
.articlenext {background: #efefef;
padding: 15px;
margin: 30px 15px;}
.infobottom { background: #3a3a32;
padding: 70px 15px;
margin-top: 100px;
color: #fff;}
.infobottom ul li { list-style: none;
margin-bottom: 25px;
font-size: 14px;
text-transform: uppercase; }
.bottommedia {width: 50%;
float: left;
height: 100%;
padding-left: 30px;
display: inline-block;
}
.bottommedia ul { padding-left: 0;
display: inline-block;
margin-left: -15px; margin-top: 0;}
.bottommedia .fa { color: #fff;
background: #757570;
margin-right: 10px;
width: 35px;
height: 25px;
text-align: center;
padding-top: 9px;
border-radius: 50%;
font-size: 20px;}
.bottommedia ul li a {color: #fff;
font-size: 14px;
text-transform: uppercase;}
.featureon { margin: 40px 0 0 0; padding: 0 15px;}
.bottomlinks { width: 40%;
height: 100%;
;
display: inline-block;}
.followtitle { font-size: 16px;
text-transform: uppercase;
margin-bottom: 25px;
display: block;
color: #a9a9a9;
font-weight: 700;}
.followtitle a {color: #a9a9a9;}
.bottomlinks ul li { font-size: 14px;
text-transform: uppercase;
margin-bottom: 20px; width: 100%; }
.bottomlogo {
background: url(https://data.chinahighlights.com/pic/guide/info-template-bottom-logo.jpg) no-repeat 20px #1e1e1e;
height: 37px;
background-size: 90px;
color: #fff;
padding-left: 135px;
padding-top: 10px;
line-height: 18px;
font-size: 13px;
padding-bottom: 10px;
}
.bottomlinks ul {display: inline-block;
padding-left: 0; margin-top: 0;}
.bottomlinks ul li a { color: #fff;}
ul.infoshare {display: inline-block;
float: right;
margin-top: -5px;}
ul.infoshare li {list-style: none;
float: left;
margin-right: 20px;}
.navicustomize { border: 1px solid #fff;
padding: 5px 10px;
border-radius: 4px;
margin-right: 20px;
display: inline-block;
float: right;
height: 20px;
margin-top: 20px;
font-size: 16px;}
.navicustomize a {
color: #fff;
position: relative;
top: -25px;
}
h3.navimore { padding-left: 0; margin-top: 0; margin-bottom: 0;}
li.sub-nav-item { padding-left: 30px; margin-bottom: 15px;}
li.sub-nav-item a { color: #fff;
font-size: 26px;
font-weight: 700;
width: 100%;
display: block;}
.naviback { padding-left: 30px;
margin-top: 60px;
display: block;}
.naviback a { display: block; width: 100%;}
.chinatours {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navi-china-tours-bg.jpg) no-repeat; background-size: 414px;}
.destinationtours {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navi-destinations-bg.jpg) no-repeat; background-size: 414px;}
.travelguide {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navi-travel-guide-bg.jpg) no-repeat; background-size: 414px;}
.culture {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navi-culture-bg.jpg) no-repeat; background-size: 414px;}
.asia {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navigation-asia.jpg) no-repeat; background-size: 414px;}
.search {max-width: 160vw;
width: 100%;
background: url(https://data.chinahighlights.com/pic/guide/info-template-top-navigation-search.jpg) no-repeat; background-size: 414px;}
.subarrow {color: #fff;
border-left: 1px solid #fff;
padding-left: 15px;
margin-left: 0;}
.websearch { color: #fff;
font-size: 24px;
float: right;
margin-top: 23px;
margin-right: 20px;
margin-left: 20px;}
.bottomwechat { display: block;
margin-bottom: 50px; height: 100px;}
.bottomwechat img {float: left;
margin-right: 30px;}
.wechattitle {font-size: 21px;
text-transform: uppercase;
display: block;
padding-top: 15px;}
.infotailormade {text-align: center;
font-size: 20px;
width: 250px;
margin: 70px auto;
display: block;
font-weight: 400;
background: #fff;}
.infotailormade a {color: #000;
text-decoration: none;
display: block;
text-transform: uppercase; padding: 3px 10px;}
.toptailorarrow { margin-left: 10px;}
.siteSearch {
border: 1px solid #d1d1d1;
padding: 2px 2px 2px 0;
background: #fff;
border-top: none;
border-bottom: none;
height: 40px;
11
5 years ago
margin: 5px 20px;
移动优先的模板css js
5 years ago
border-radius: 4px;
}
.siteSearch .strkeys {
background: #fff;
border: 0;
float: left;
display: inline-block;
11
5 years ago
width: 83%;
移动优先的模板css js
5 years ago
margin-top: -1px;
color: #666;
font-size: 18px;
height: 39px;
font-weight: 300;
padding-left: 10px;
}
.siteSearch .submits {
display: block;
float: right;
padding-top: 7px;
padding-right: 5px;
width: auto;
}
.footerBtn {
/* position: fixed; ycc 预览窗口不浮动 */
bottom: 0;
left: 0;
height: 45px;
width: 100%;
color: #fff;
z-index: 30;
background: #eee;
padding-bottom: 10px;
padding-top: 12px;
}
.footerBtn a {
color: #fff;
text-decoration: none;
}
.footerBtn button {
width: 70%;
border: none;
background: #a31022;
padding-top: 12px;
padding-bottom: 2px;
font-size:16px;
color: #fff;
bottom: 0;
justify-content: center;
display: flex;
margin: 0 auto;
border-radius: 25px;
text-transform: uppercase;
}
.footerBtn button .fa {
margin-left: 15px;
font-size: 21px;
margin-top: -3px;
margin-bottom: 6px;
}
.subtitle {
color: #fff;
font-size: 18px;
text-shadow: 5px 3px 4px #000;;
padding: 0 15px;
display: block;
margin-bottom: 20px;}
.tournavi {
/* position: fixed; ycc 预览窗口不浮动*/
z-index: 11;
box-shadow: 0 0 5px #9d9d9d;
border-bottom: 1px solid #d9d9d9;
width: 100%;
margin: 0 auto;
margin-top: -2px;
background: #fff;
top: 2.9rem;
}
.TopNavi {
font-size: 15px;
display: block;
border-right: 1px solid #d2d2d2;
float: left;
height: 35px;
padding-top: 10px;
text-align: center;
width: 25%;
}
.TopNavi a, .TopNaviLast a {
text-decoration: none;
}
.TopNaviLast {
font-size: 15px;
display: block;
float: left;
height: 35px;
padding-top: 10px;
text-align: center;
width: 24%;
}
img.topimg { margin-bottom: 6px;}
img.bottomright { width: 49%;}
img.bottomleft { width: 49%; margin-right: 6px; float: left;}
.bottomimg { margin-bottom: 70px;}
.whyus { position: relative; color: #fff;}
.whyus ul li {font-size: 16px;
margin-bottom: 10px; line-height: 22px;}
.traptop { position: absolute;
color: #fff;
top: 0;
padding: 0 15px;}
.trapbottom { position: absolute; color: #fff; top: calc(100% - 250px);}
.bookingcontent { right: 0;
display: block;
border-left: 2px solid #e5e5e5;
height: 100px;
position: relative;
left: 0;
top: 45px;
margin-bottom: 150px;
margin-left: 30px;}
.proceduretop { position: absolute; left: -25px;top: 0;}
.procedurebottom { position: absolute; left:-25px; top: 70px;}
.proceduretitlebg {
background: #d2d2d2;
border-radius: 50%;
width: 50px;
height: 50px;
display: block;
float: left;
position: relative;
margin-right: 20px;
}
.proceduretitle {
display: table-cell;
font-size: 18px;
font-weight: 600;
line-height: 22px;
width: 320px;
height: 50px;
padding-top: 5px;}
img.taleft { float: left; margin-right: 10px;}
img.tarating { margin-bottom: 5px;
margin-top: 25px;}
.ratingnumber { font-size: 16px;
display: block;}
.ratingnumber strong { color: #00a680; font-size: 22px; font-weight: 600;}
.feedbackbg { background: #e5e5e5;
padding: 20px;
margin-bottom: 70px;
margin-top: 30px;
float: left;
height: 290px;
}
.feedbackbg p { line-height: 23px;}
.feedbacktitle {font-weight: 600;
font-size: 20px;}
.feedbackdate { font-size: 15px;}
.tourdaytitlebg { background: url(https://www.chinahighlights.com/image/tour-detail/guilin/gl-3-tourday-bg-mobile.png) no-repeat;
display: block;
float: left;
position: relative;
margin-right: 15px;
width: 61px;
height: 22px;
color: #fff;
padding-left: 4px;
padding-top: 4px;
font-size: 15px;
margin-bottom: 45px;
}
.tourdaytitle { font-size: 20px;
font-weight: 600;
margin-top: -60px;
}
.tourday {position: relative;
left: -10px;}
.tourday p{ margin-bottom: -17px;
padding: 0 0 50px 70px;
margin-left: 10px;}
.tourcontent { margin: 50px 0; border-left: 2px solid #e5e5e5;
position: relative;
left: 5px;}
.hoteltitle { display: block; text-align: center; font-size: 22px; margin-top: -25px;}
.tourprice { background: #eee; padding: 30px 15px 80px 15px; }
.pricefrom {display: block;
font-size: 16px;
color: #000;}
.pricefrom strong { color: #a31022;
font-size: 25px;
margin-left: 5px;}
.priceterm {
font-size: 16px;
color: #474646;
line-height: 20px;
margin-top: 10px;
display: block;
border-bottom: 1px solid #d2d2d2;
padding-bottom: 20px;
}
.tourprice ul { font-size: 16px;
border-bottom: 1px solid #d2d2d2;
padding-bottom: 5px; padding-left: 15px;}
.tourprice ul li { margin-bottom: 15px;
line-height: 20px;}
p.wechat { text-align: left;
float: left;
width: 55%;
font-style: italic;
padding-left: 10px;
color: #555;
line-height: 20px;}
img.code { display: block; margin: 0 auto;}
img.step { display: block;
margin: auto;
margin-top: 6px;}
.citytours { padding: 0 15px;}
ul.top { margin-bottom: 60px;}
.toptitle { position: absolute;
bottom: 0;}
.wechatname {
font-size: 14px;
text-align: center;
display: block;
margin-bottom: 10px;}
img.chinahighlightslogo {padding-left: 15px;}
h1.tourdetailh1 {
color: #fff;
text-shadow: 5px 3px 4px #000;
text-align: left;
padding-left: 15px;
text-transform: Uppercase;
line-height: 36px;
padding-right: 15px;
display: block;
}
/* menu begin */
/* Icons (made with Icomoon.io) */
@font-face {
font-family: 'feather';
font-weight: normal;
font-style: normal;
src: url('https://data.chinahighlights.com/css/fonts/feather.eot?1gafuo');
src: url('https://data.chinahighlights.com/css/fonts/feather.eot?1gafuo#iefix') format('embedded-opentype'), url('https://data.chinahighlights.com/css/fonts/feather.woff2?1gafuo') format('woff2'), url('https://data.chinahighlights.com/css/fonts/feather.ttf?1gafuo') format('truetype'), url('https://data.chinahighlights.com/css/fonts/feather.woff?1gafuo') format('woff'), url('https://data.chinahighlights.com/css/fonts/feather.svg?1gafuo#feather') format('svg');
}
.icon {
font-family: 'feather';
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 1;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
.icon--arrow-left:before {
content: '\e901';
}
.icon--menu:before {
content: '\e903';
}
.icon--cross:before {
content: '\e117';
}
/* Menu styles */
.menu {
position: fixed;
top: 120px;
left: 0;
width: 300px;
height: calc(100vh - 120px);
background: #1c1d22;
}
.menu__wrap {
position: absolute;
11
5 years ago
top: 6em;
移动优先的模板css js
5 years ago
bottom: 0;
overflow: hidden;
width: 100%;
}
.menu__level {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
overflow-y: scroll;
width: calc(100% + 50px);
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.menu__level:focus {
outline: none;
}
.menu__level--current {
visibility: visible;
}
.menu__item {
display: block;
width: calc(100% - 50px);
}
.menu__link {
font-weight: 600;
position: relative;
display: block;
11
5 years ago
padding: 15px;
移动优先的模板css js
5 years ago
color: #bdbdbd;
-webkit-transition: color 0.1s;
11
5 years ago
transition: color 0.1s;
font-size: 26px;
移动优先的模板css js
5 years ago
}
.menu__link[data-submenu]::after {
content: '\e904';
font-family: 'feather';
position: absolute;
right: 0;
padding: 0.25em 1.25em;
color: #2a2b30;
}
.menu__link:hover,
.menu__link:focus,
.menu__link[data-submenu]:hover::after,
.menu__link[data-submenu]:focus::after {
11
5 years ago
color: #999;
移动优先的模板css js
5 years ago
}
.menu__link--current::before {
content: '\00B7';
font-size: 1.5em;
line-height: 0;
position: absolute;
top: 50%;
left: 0.5em;
height: 4px;
11
5 years ago
color: #999;
移动优先的模板css js
5 years ago
}
[class^='animate-'],
[class*=' animate-'] {
visibility: visible;
}
.animate-outToRight .menu__item {
-webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes outToRight {
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes outToRight {
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.animate-outToLeft .menu__item {
-webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes outToLeft {
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes outToLeft {
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.animate-inFromLeft .menu__item {
-webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes inFromLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes inFromLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate-inFromRight .menu__item {
-webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes inFromRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes inFromRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.menu__breadcrumbs {
11
5 years ago
font-size:18px;
移动优先的模板css js
5 years ago
line-height: 1;
position: relative;
11
5 years ago
padding: 25px 20px;
移动优先的模板css js
5 years ago
}
.menu__breadcrumbs a {
font-weight: bold;
display: inline-block;
cursor: pointer;
vertical-align: middle;
letter-spacing: 1px;
text-transform: uppercase;
color: #5c5edc;
}
.menu__breadcrumbs a:last-child {
pointer-events: none;
}
.menu__breadcrumbs a:hover,
.menu__breadcrumbs a:focus {
color: #8182e0;
}
.menu__breadcrumbs a:not(:last-child)::after {
content: '\e902';
font-family: 'feather';
display: inline-block;
padding: 0 0.5em;
color: #33353e;
}
.menu__breadcrumbs a:not(:last-child):hover::after,
.menu__breadcrumbs a:not(:last-child):focus::after {
color: #33353e;
}
.menu__back {
font-size: 1.05em;
position: absolute;
z-index: 100;
top: 0;
right: 2.25em;
margin: 0;
padding: 1.365em 0.65em 0 0;
cursor: pointer;
color: #2a2b30;
border: none;
background: none;
}
.menu__back--hidden {
pointer-events: none;
opacity: 0;
}
.menu__back:hover,
.menu__back:focus {
color: #fff;
outline: none;
}
/* Open and close buttons */
.action {
position: absolute;
display: block;
margin: 0;
padding: 0;
cursor: pointer;
border: none;
background: none;
}
.action:focus {
outline: none;
}
/*
.action--open {
font-size: 1.5em;
top: 1em;
left: 1em;
display: none;
color: #fff;
position: fixed;
z-index: 1000;
}
*/
.action--close {
font-size: 1.1em;
top: 1.25em;
right: 1em;
display: none;
color: #45464e;
}
@media screen and (max-width: 40em) {
/*
.action--open,*/
.action--close {
display: block;
}
.menu {
z-index: 1000;
top: 0;
width: 100%;
height: 100vh;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu--open {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
PC端底部样式添加
5 years ago
/* menu end */