www.gusucode.com > 22:【198-3950】景区旅游旅行官方网站类织梦模板(带手机端) > 22:【198-3950】景区旅游旅行官方网站类织梦模板(带手机端)/skin/css/index.css
/* 织梦58(dede58.com)做最好的织梦整站模板下载网站 */ @charset "UTF-8"; /** * Index Css * @Authors dede58.com * @Date 2015-06-11 */ .m-header { width: 100%; height: 96px; background: url(../images/top_ba.png) repeat-x; position: absolute; top: 0; left: 0; z-index: 99; } .m-logo { position: absolute; left: 60px; top: 15px; } .m-nav { margin: 10px 0 0 300px; float: left; } .m-nav a.index, .m-nav dl dt a { float: left; color: #f2d374; font-size: 15px; overflow: hidden; text-align: center; width: 110px; line-height: 86px; margin: 0 10px; } .m-nav a.active, .m-nav a.index:hover, .m-nav dl.hover dt a { background: url(../images/cloud.png) no-repeat right 45px; font-size: 16px; } .m-nav dl { float: left; position: relative; font-size: 14px; } .m-nav dl dd { width: 100px; padding: 15px 0 15px 30px; position: absolute; top: 86px; left: 0; background-color: #908556; color: #ffffee; display: none; } .m-nav dl dd:before { content: ""; font-size: 0; width: 0; height: 0; line-height: 0; display: block; border: 0 solid transparent; border-width: 8px; border-bottom-color: #908556; position: absolute; top: -15px; left: 50%; margin-left: -8px; } .m-nav dl dd a { display: block; line-height: 30px; } .m-nav dl dd a:hover { text-decoration: underline; } .m-tool { position: absolute; right: 60px; top: 28px; z-index: 100; } .m-tool li { float: left; width: 50px; height: 65px; margin-left: 20px; position: relative; cursor: pointer; } .m-tool li.map { background: url(../images/map.png) no-repeat; } .m-tool li.map a { display: block; height: 100%; } .m-tool li.wei { background: url(../images/wei.png) no-repeat; } .m-tool li.qq { background: url(../images/qq.png) no-repeat; } .m-tool li.qq a { margin-top: 10px; display: block; } .m-tool li div { position: absolute; top: 58px; left: 50%; background-color: #908556; border-radius: 3px; padding: 10px; width: 80px; text-align: center; color: #fff; margin-left: -50px; display: none; } .m-tool li div:before { content: ""; background: url(../images/arrow.png) no-repeat; display: block; width: 16px; height: 9px; position: absolute; top: -7px; left: 50%; margin-left: -8px; } @media screen and (max-width:1440px) { .m-logo { left: 20px; } .m-tool, .m-login { right: 25px; } .m-nav { margin-left: 180px; } } @media screen and (max-width:1280px) { .m-nav a.index, .m-nav dl dt a { width: 100px!important; } .m-nav dl dd { width: 90px!important; } } @media screen and (max-width:1024px) { .m-nav { margin-left: 150px; } .m-tool { display: none; } } .m-sliderpage { position: absolute; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; } .m-sliderpage .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: none; } .m-sliderpage .page img { position: absolute; bottom: 0; right: 0; } .taoyuan .text-con { position: absolute; left: 50%; top: 180px; width: 520px; margin-left: -260px; z-index: 2; } .taoyuan i { position: absolute; display: block; overflow: hidden; z-index: 2; } .taoyuan .text-con i { opacity: 0; filter: alpha(opacity=0); } .taoyuan i.ty-a { background: url(../images/text1.png) no-repeat; width: 29px; height: 281px; top: 50px; right: 30px; } .taoyuan i.ty-b { background: url(../images/text2.png) no-repeat; width: 42px; height: 420px; top: 50px; right: 45px; } .taoyuan i.ty-c { background: url(../images/text3.png) no-repeat; width: 36px; height: 376px; top: 50px; right: 80px; } .taoyuan i.ty-d { background: url(../images/text4.png) no-repeat; width: 46px; height: 277px; top: 50px; right: 130px; } .taoyuan i.ty-e { background: url(../images/text5.png) no-repeat; width: 170px; height: 340px; top: 100px; left: 0; } .taoyuan i.ty-bg { background: url(../images/text_bg.png) no-repeat; width: 319px; height: 529px; top: 0; right: 0; } .taoyuan i.yun-a, .taoyuan i.yun-b { background: url(../images/image8.png) no-repeat; width: 900px; height: 350px; bottom: -150px; left: -150px; opacity: .9; filter: alpha(opacity=90); } .taoyuan i.yun-b { top: 0; left: auto; right: -500px; opacity: .1; filter: alpha(opacity=10); } .taoyuan i.hua-a { background: url(../images/image1.png) no-repeat; width: 500px; height: 487px; bottom: -8px; left: -30px; } .taoyuan i.hua-b { background: url(../images/image2.png) no-repeat; width: 500px; height: 338px; bottom: -8px; left: 80px; } .taoyuan i.hua-c { background: url(../images/image3.png) no-repeat; width: 388px; height: 224px; top: 8px; right: -20px; z-index: 3; } .taoyuan i.hua-d { background: url(../images/image11.png) no-repeat; width: 115px; height: 77px; top: 50px; right: -115px; } .taoyuan i.hua-e { background: url(../images/image7.png) no-repeat; width: 62px; height: 56px; top: -30px; right: -62px; } .taoyuan i.hua-f { background: url(../images/image4.png) no-repeat; width: 49px; height: 33px; top: 110px; right: 200px; display: none; } .taoyuan i.hua-g { background: url(../images/image5.png) no-repeat; width: 29px; height: 26px; top: 110px; right: 200px; display: none; } .taoyuan i.hua-h { background: url(../images/image6.png) no-repeat; width: 21px; height: 14px; top: 110px; right: 200px; display: none; } .shanshui .text-con { width: 1134px; position: absolute; top: 150px; left: 50%; margin-left: -567px; z-index: 2; font-size: 0; text-align: center; } .shanshui .text-con a { float: left; width: 99px; height: 443px; margin: 0 45px; } .shanshui .text-con i { display: inline-block; opacity: 0; filter: alpha(opacity=0); } .shanshui i.ss-a, .shanshui a.ss-c, .shanshui a.ss-d, .shanshui a.ss-e, .shanshui a.ss-f, .shanshui a.ss-g, .shanshui a.ss-h { background: url(../images/ss1.png) no-repeat; overflow: hidden; position: relative; } .shanshui i.ss-a { width: 550px; height: 96px; top: -50px; } .shanshui i.ss-b { background: url(../images/ss2.png) no-repeat center 0; width: 100%; height: 52px; overflow: hidden; margin: 30px 0; } .shanshui .link { position: relative; top: 100px; opacity: 0; filter: alpha(opacity=0); } .shanshui a.ss-c { background-position: 0 -97px; } .shanshui a.ss-d { background-position: -99px -97px; } .shanshui a.ss-e { background-position: -198px -97px; } .shanshui a.ss-f { background-position: -297px -97px; } .shanshui a.ss-g { background-position: -396px -97px; } .shanshui a.ss-h { background-position: -495px -97px; } .shanshui a:hover { opacity: .8; filter: alpha(opacity=80); } .wenhua .text-con { margin: 96px auto 0; width: 1000px; overflow: hidden; position: relative; z-index: 2; } .wenhua .text-con .mask { position: absolute; width: 1px; height: 0; top: 0; left: 0; background-color: #fff; opacity: .5; filter: alpha(opacity=50); } .wenhua .text-con i { float: left; height: 475px; width: 121px; background: url(../images/wh1.png) no-repeat; position: relative; z-index: 2; top: -475px; margin-left: 50px; } .wenhua .link { float: left; height: 100%; } .wenhua .link a { float: left; width: 72px; margin-left: 70px; background: url(../images/wh1.png) no-repeat -136px bottom; z-index: 2; position: relative; border-right: 2px #721704 solid; } .wenhua .link a.wh-b { background-position: -208px bottom; } .wenhua .link a.wh-c { background-position: -280px bottom; } .wenhua .link a.wh-d { background-position: -352px bottom; } .wenhua .link a.wh-e { background-position: -424px bottom; } .wenhua .link a em { background: url(../images/wh2.png) no-repeat; width: 49px; height: 33px; display: none; position: absolute; bottom: 20px; right: 11px; } .wenhua .link a:hover em { display: block; } .gongyi .text-con { position: absolute; left: 50%; top: 50%; width: 684px; margin-left: -342px; margin-top: -221px; text-align: center; z-index: 2; } .gongyi .text-con i { display: inline-block; background: url(../images/gy.png) no-repeat; opacity: 0; filter: alpha(opacity=0); } .gongyi .text-con i.gy-a { width: 230px; height: 125px; } .gongyi .text-con i.gy-b { width: 385px; height: 125px; background-position: -235px 0; position: relative; top: -50px; } .gongyi .link { width: 100%; margin-top: 50px; opacity: 0; filter: alpha(opacity=0); height: 210px; } .gongyi .link a { float: left; background: url(../images/gy.png) no-repeat 0 -125px; width: 121px; padding-top: 130px; margin: 0 25px; position: relative; } .gongyi .link a.gy-1 { background-position: -121px -125px } .gongyi .link a.gy-2 { background-position: -242px -125px } .gongyi .link a.gy-3 { background-position: -363px -125px } .gongyi .link a p { margin: 0 18px; background-color: #fff; opacity: .8; filter: alpha(opacity=80); font-size: 16px; line-height: 30px; } .gongyi .news { padding: 0 20px; position: relative; font-size: 15px; height: 52px; overflow: hidden; opacity: 0; filter: alpha(opacity=0); top: 50px; } .gongyi .news span { float: left; font-weight: 700; position: relative; z-index: 2; margin-top: 15px; } .gongyi .news ul { text-align: left; float: right; width: 550px; position: relative; z-index: 2; overflow: hidden; height: 22px; margin: 15px 0; } .gongyi .news ul li a { float: left; width: 450px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gongyi .news ul li em { float: right; color: #888; font-size: 13px; font-family: arial; margin-top: 2px; } .gongyi .news .mask { background-color: #fff; opacity: .8; filter: alpha(opacity=80); position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .m-sliderpage-nav { position: absolute; right: 35px; top: 50%; display: block; margin-top: -47px; z-index: 8; } .m-sliderpage-nav li { width: 10px; height: 10px; display: block; background-color: #fff; opacity: .8; filter: alpha(opacity=80); border-radius: 100px; margin: 8px 0; cursor: pointer; } .m-sliderpage-nav li.active { background-color: #50a261; height: 24px; opacity: 1; filter: alpha(opacity=100); } .m-arrow { position: absolute; width: 38px; height: 28px; bottom: 130px; left: 50%; margin-left: -19px; background: url(../images/arr.png) no-repeat; z-index: 9; cursor: pointer; } .m-content { position: absolute; bottom: 52px; left: 0; width: 100%; z-index: 9; } .m-content>div { float: left; width: 25%; position: relative; height: 60px; } .m-content dl { position: absolute; bottom: 0; left: 0; width: 100%; } .m-content dl dt { margin: 0 1px; background-color: #908556; display: block; overflow: hidden; line-height: 60px; height: 60px; text-align: center; opacity: .95; filter: alpha(opacity=95); font-size: 18px; } .m-content dl.hover dt { background-color: #66141b; color: #b3a16b; } .m-content dl dt a { display: block; } .m-content dl dt i { font-size: 12px; margin-left: 10px; } .m-content dl dd { background-color: #908556; margin: 0 1px; display: none; overflow: hidden; padding: 0 10px; opacity: .95; filter: alpha(opacity=95); } .m-content dl dd.news li a { font-size: 14px; display: block; padding-right: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-content dl dd.news li a:hover { color: #66141b; text-decoration: underline; } .m-content dl dd.news li i { position: absolute; right: 5px; top: 16px; color: #48422b; } .m-content dl dd.news li, .m-content dl dd.order a, .m-content dl dd.activity a, .m-content dl dd.video a { display: block; overflow: hidden; padding: 15px 5px; border-top: 1px #655d3c dotted; position: relative; } .m-content dl dd.news li:first-child, .m-content dl dd.order a:first-child, .m-content dl dd.activity a:first-child, .m-content dl dd.video a:first-child { border: 0; } .m-content dl dd.order a img { float: left; width: 80px; height: 60px; } .m-content dl dd.order a:hover img { border: 2px #66141b solid; width: 76px; height: 56px; } .m-content dl dd.order a div { margin-left: 95px; overflow: hidden; } .m-content dl dd.order a h4, .m-content dl dd.activity a div h4 { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-content dl dd.order a p { font-size: 14px; color: #fff; } .m-content dl dd.order a p b { font-family: 'Georgia'; font-size: 28px; line-height: 1; } .m-content dl dd.activity a label { float: left; font-size: 50px; line-height: 1; font-style: italic; color: #fff; } .m-content dl dd.activity a:hover label { color: #66141b; } .m-content dl dd.activity a div { margin-left: 40px; overflow: hidden; } .m-content dl dd.activity a p { color: #48422b } .m-content dl dd.video a { padding-left: 33px; background: url(../images/video.png) no-repeat 8px 16px; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; } .m-content dl dd.video a:hover { color: #66141b; text-decoration: underline; } @media screen and (max-width : 1024px) { .m-content dl dd.order a h4 { font-size: 16px; } .m-content dl dd.order a p { font-size: 12px; } .m-content dl dd.order a p b { font-size: 24px; } } .m-footer { width: 100%; height: 40px; padding: 6px 0; overflow: hidden; background-color: #02815c; position: absolute; bottom: 0; left: 0; color: #c6e3cc; font-family: arial, "宋体"; z-index: 9; } .m-footer .copy { float: left; margin-left: 20px; } .m-footer .design { float: right; margin-right: 20px; } .m-footer .design label { margin-left: 20px; } .m-footer .link { display: block; overflow: hidden; width: 100%; height: 20px; opacity: .7; filter: alpha(opacity=70); } .m-footer .link dt { float: left; padding-left: 20px; } .m-footer .link dd a { float: left; margin-right: 15px; } #weather { float: left; } #weather * { display: inline-block; } #weather img { height: 18px; vertical-align: text-bottom; margin-right: 5px; } #weather span { margin-right: 5px; } #weather b { border-radius: 2px; color: #fff; font-weight: 400; padding: 0 5px; line-height: 20px; margin-left: 3px; } #weather .pm25-l1, #weather .pm25-l2 { background: #096 } #weather .pm25-l3 { background: #f93 } #weather .pm25-l4 { background: #c03 } #weather .pm25-l5 { background: #609 }