www.gusucode.com > 26:【198-3689】饮食食品美食日用品通用营销型网站织梦响应式模板(自适应手机) > 26:【198-3689】饮食食品美食日用品通用营销型网站织梦响应式模板(自适应手机)/skin/style.css
/* 织梦58(dede58.com)做最好的织梦整站模板下载网站 */ @charset "utf-8"; /** 清除内外边距 **/ html { width: 100%; height: 100%; } body { font-size: 12px; color: #000; line-height: 1.8; min-width: 320px; font-family: "微软雅黑", Arial; background: #fffef9 } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul, li { list-style-image: none; list-style-position: outside; list-style-type: none; } .input { padding: 0; margin: 0; font-family: "微软雅黑"; outline: none } .left { float: left; } .right { float: right; } .clear { clear: both; height: 0px; width: 0; margin: 0; padding: 0; border: none; overflow: hidden; } a { text-decoration: none; cursor: pointer; color: #000; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } a:hover { color: #e60012 } h1 { font-size: 18px } h2 { font-size: 18px } h3 { font-size: 16px } h4 { font-size: 14px } h5 { font-size: 12px } .beijing { margin: 0 auto; padding: 15px 10px; clear: both; overflow: hidden; min-width: 300px; } .beijing1 { margin: 0 auto; padding: 15px 10px; clear: both; overflow: visible; min-width: 300px; } .height20 { height: 20px } /**************header**************/ header { background: url(images/footer.jpg) repeat; border-bottom: 1px solid #f95969; clear: both; overflow: visible; height: 55px; position: relative; z-index: 99 } .head { clear: both; overflow: visible; height: 55px; margin: 0 auto; } .head h2 { float: left; display: inline-block; height: 100% } .head h2 img { height: 55px; } .language { float: left; margin: 15px 5px; display: inline-block; line-height: 25px; text-transform: uppercase } .language a { color: #fff; padding: 0 10px; border-radius: 3px; background: #ff9c00; display: block } .head1 { float: right/*; display:inline-block*/ } .head_1 { border: 1px solid #fff; border-radius: 5px; float: left; margin: 10px; padding: 4px 5px; width: 45px; cursor: pointer; } .head_1 em { display: block; height: 3px; width: 100%; float: left; margin: 3px 0; clear: both; overflow: hidden; background: #fff } .head1_1 { position: absolute; top: 55px; left: 0; width: 100%; background: url(images/footer.jpg) repeat; text-align: center; display: none } .head1_1 dt { color: #fff; display: none; float: left; padding: 10px 3px 9px; line-height: 33px } .head1_1 a { color: #fff; } .head1_1 span { display: block; clear: both; overflow: hidden; border-bottom: 1px solid #fff; } .head1_1 span a { display: block; clear: both; overflow: hidden } .head1_1 p a { margin: 0 5px; display: inline-block } .head1_1 p { position: absolute; left: 0; bottom: -36px; display: none; z-index: 34; line-height: 36px; background: url(images/menu.png) repeat; white-space: nowrap } .head2 { height: 0 } .head_s { float: left; margin-top: 30px; display: none } .head_s1 { background: url(images/sousuo.jpg) no-repeat 10px 0 #fff8f8; border: 1px solid #fff8f8; border-radius: 5px; text-indent: 35px; line-height: 28px; color: #858585; font-size: 14px; outline: none; width: 160px; height: 28px; } /**************banner**************/ .banner { position: relative; z-index: 10; clear: both; overflow: hidden; min-width: 320px; width: 100%; margin-top: 55px } .banner a { overflow: hidden; display: block; width: 100%; } .banner a img { width: 100%; vertical-align: top } /*slider*/ .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; overflow: hidden } .slick-list { position: relative; overflow: hidden; display: block; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* dots */ .banner .slick-dots { position: absolute; display: block; box-sizing: border-box; width: 100%; bottom: 45px; list-style: none; text-align: center; margin: 0; z-index: 5; } .banner .slick-dots li { position: relative; display: inline-block; *display:inline; margin: 0 4px } .banner .slick-dots li button { display: inline-block; outline: none; line-height: 0; font-size: 0; border: 0; color: transparent; padding: 0; cursor: pointer; outline: none; background: url(images/banner.png) no-repeat 0 0; width: 25px; height: 14px; margin: 0 2px } .banner .slick-dots li button:focus { outline: none; } .banner .slick-dots .slick-active button { background-position: -34px 0 !important } /* slick-slider */ .banner_1 { position: absolute; z-index: 4; bottom: 0; left: 0; width: 100%; background: url(images/banner_2.png) no-repeat center; height: 190px; display: none; } .banner_2 { background: url(images/logo.png) repeat-x bottom; height: 4px; position: absolute; left: 0; top: 0; z-index: 5; width: 100% } /**************index**************/ .index_left { clear: both; overflow: hidden; } .index_top { clear: both; overflow: hidden; font-size: 18px; text-transform: capitalize } .index_top big { font-size: 20px; margin-right: 5px; color: #000 } .index_top span { font-family: "Times New Roman"; color: #9a9a9a; } .index_left1 { clear: both; overflow: hidden } .index_left1 li { clear: both; overflow: hidden; padding: 20px 0; cursor: pointer; border-bottom: 1px dotted #dfdfdf } .index_left1 li .index_left2 { float: left; background: #8a8a8a; width: 60px; height: 60px; text-align: center; margin-right: 15px; display: inline-block; overflow: hidden; color: #cacaca; } .index_left1 li .index_left2 big { font-size: 24px;/* font-weight:bold; */ color: #fff; display: block; clear: both; overflow: hidden; padding-top: 5px; line-height: 30px } .index_left1 li .index_left2 span { display: block; clear: both } .index_left1 li .index_left3 { overflow: hidden; line-height: 24px; } .index_left1 li .index_left3 h4 { height: 24px; overflow: hidden; font-weight: lighter; } .index_left1 li .index_left3 h4 a { color: #e60012; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block } .index_left1 li p { color: #8f8e8e; clear: both; overflow: hidden } .index_left1 li p a { color: #ff9c00 } .index_left1 li.hover .index_left2 { background: #e84c3d !important; color: #f4b4b0 !important } .news3 { font-size: 12px; } .index_right { float: right; width: 265px; overflow: hidden; display: none } .index_right1 { padding: 10px 0 0; clear: both; overflow: hidden } .index_right1 li { width: 125px; height: 125px; display: inline-block; text-align: center; overflow: hidden; float: left; margin: 5px 0; } .index_right1 li img { width: 100% } .index_right1_1 { float: right !important } .index1 { clear: both; overflow: hidden; background: url(images/index_b.jpg) repeat } .index1 .index_top { line-height: 30px; } .index_m { background: url(images/index_m.png) no-repeat right center; padding-right: 22px; color: #e60012; float: right; font-size: 12px; } .index1 .index_top big { color: #e60012 } .index1 .index_top span { color: #fff; display: none } .index1_1 { clear: both; overflow: hidden; padding: 10px 0 } .index1_1 li { margin: 10px 0; background: #fdad00; color: #fff; height: 95px; float: left; clear: both; overflow: hidden; width: 100% } .index1_1 em { float: left; width: 140px; height: 95px; overflow: hidden; margin-right: 10px; display: inline-block } .index1_1 .index1_left1 { overflow: hidden; padding: 15px 5px 0 0; font-size: 14px; line-height: 22px; } .index1_1 .index1_left1 p { max-height: 44px; overflow: hidden; } .index1_1 .index1_left1 p a { color: #fff } .index1_1 .index1_left1 span { display: block; clear: both; text-align: right; padding: 5px 5px 0 0; } .index_t { float: right; overflow: hidden; font-size: 12px; *display:inline } .index_t li { float: left; line-height: 1.2; cursor: pointer; width: 61px; height: 61px; text-align: center; color: #fcc700; background: url(images/index_r1.png) no-repeat 0 0; margin-left: 5px; display: inline-block; overflow: hidden } .i_1.hover { background-position: 0 -89px !important; color: #e60012 !important } .i_2 { background-position: -84px 0 !important } .i_2.hover { background-position: -84px -89px !important; color: #e60012 !important } .i_3 { background-position: -167px 0 !important } .i_3.hover { background-position: -167px -89px !important; color: #e60012 !important } .index_t li i { font-style: normal; padding: 32px 5px 0 0; display: block; } .index2 { clear: both; overflow: hidden } .index2 dl { display: none; } .index2 dt { clear: both; overflow: hidden; padding: 5px 0 } .index2 img { width: 100%; border-radius: 5px; } .index2 dd { clear: both; overflow: hidden; } .index2 dd p { clear: both; overflow: hidden; display: block; padding: 5px 0 } /**************底部**************/ .foot { background: url(images/footer.jpg) repeat; clear: both; overflow: hidden; padding: 30px 0; display: none } .foot1 { clear: both; overflow: hidden; margin: 0 auto; color: #fff } .foot1 dl { clear: both; overflow: hidden; font-size: 14px; } .foot1 dl dd { float: left; width: 25%; overflow: hidden } .foot1 dl a { color: #fff; display: block; } .foot1 big { clear: both; overflow: hidden; font-size: 16px; line-height: 30px; height: 30px; } .foot1 big small { font-size: 14px; margin-left: 5px; } .foot1 p a { background: url(images/footer1.png) no-repeat 5px 10px; padding-left: 15px; height: 22px; line-height: 22px; overflow: hidden } .foot1 dl dt { float: right; display: none } .foot1 dl dt p { padding-left: 20px; clear: both; overflow: hidden } .f_1 { background: url(images/footer_1.png) no-repeat 0 center } .f_2 { background: url(images/footer_2.png) no-repeat 1px center } .f_3 { background: url(images/footer_3.png) no-repeat 3px center } .foot2 { float: right; width: 90px; overflow: hidden; margin-right: 5px; display: none } .foot2 big { display: block; clear: both; overflow: hidden; font-size: 16px; background: url(images/wx.png) no-repeat 0 center; line-height: 24px; height: 24px; padding-left: 25px; } .foot2 p { text-align: right; padding-top: 8px } footer { clear: both; overflow: hidden; padding: 25px 0; background: #3a3a3a; color: #bbb } footer dl { margin: 0 auto; clear: both; overflow: hidden; padding: 0 10px; text-align: center } footer dl dd, footer dl dt { clear: both; overflow: hidden } footer a { color: #bbb; padding: 0 5px; } /**************分页**************/ .page { width: 100%; overflow: hidden; line-height: 23px; clear: both; text-align: center; padding: 30px 0; color: #999 } .page a { margin: 2px; display: inline-block; padding: 0 10px; border: 1px solid #c2c3c5; color: #999; border-radius: 4px } .page .thisclass { color: #fff; background: #b80000; border-color: #b80000; } .page span { margin: 2px; display: inline-block; padding: 0 5px } .page_2 { border: 1px solid #c2c3c5; color: #999; border-radius: 4px; margin: 2px; display: inline-block; outline: none; cursor: pointer; background: none; height: 23px } .page_1 { text-align: center; border: #acadaf 1px solid; background: #fff; height: 23px; line-height: 23px; margin: 2px; display: inline-block; width: 40px; } /**************main**************/ .main_left { clear: both; overflow: hidden } .main_left1 { clear: both; overflow: hidden } .main_left1 big { clear: both; overflow: hidden; display: none; background: url(images/footer.jpg) repeat; text-align: center; color: #fff; font-size: 18px; padding: 10px 0 } .main_left1 big small { font-size: 12px; } .main_left1 dl { clear: both; overflow: hidden; text-align: center } .main_left1 dl dt { clear: both; overflow: hidden; font-size: 24px; cursor: pointer; color: #fff; background: #e60012; } .main_left1 dl dt small, .main_left1 big small { font-size: 14px; color: #fdd300; margin-left: 8px; text-transform: uppercase } .main_left1 dl dd { clear: both; overflow: hidden; background: #e60012; display: none } .main_left1 dl dd a { display: block; clear: both; overflow: hidden; border-bottom: 1px solid #f3404e; line-height: 30px; font-size: 14px; color: #fff } .main_left1 dl dd a.hover, .main_left1 dl dd a:hover { background: #fdd300; color: #e60012 !important } .main_left1_3 { background: url(images/left3.png) no-repeat 0 0; height: 6px; overflow: hidden; display: none } .main_left2 { clear: both; overflow: hidden; padding: 5px 0; display: none } .main_left2 li { clear: both; overflow: hidden; padding-top: 15px; } .main_left2 li img { width: 100% } .main_right { clear: both; overflow: hidden; padding-top: 20px; } /**************位置**************/ .weizhi { clear: both; overflow: hidden; background: url(images/right1.png) repeat-x bottom; } .weizhi dt { clear: both; overflow: hidden; color: #686868; background: url(images/weizhi.png) no-repeat 0 center; padding-left: 20px; } .weizhi dt a { color: #686868 } .weizhi dd { float: left; display: inline-block; overflow: hidden; line-height: 38px; height: 38px; font-size: 18px; background: url(images/right.png) no-repeat 0 center; padding-left: 20px; border-bottom: 2px solid #e60012 } .weizhi dd span { color: #e60012 } .weizhi_1 dd { border-bottom: 0 !important } /**************资料下载**************/ .load { clear: both; overflow: hidden; padding: 20px 0 } .load li { background: url(images/load_2.png) repeat-x bottom; padding: 15px 0; clear: both; overflow: hidden; color: #7e7e80 } .load li em { float: right; overflow: hidden; margin-left: 10px; display: inline-block } .load li em a { background: url(images/load1.jpg) no-repeat 0 0; width: 55px; height: 64px; display: block; overflow: hidden } .load li h4 { font-weight: lighter; overflow: hidden; background: url(images/load_1.png) no-repeat 0 center; padding-left: 10px; height: 24px; line-height: 24px; } .load li h4 a { white-space: nowrap; height: 24px; overflow: hidden; color: #7e7e80; text-overflow: ellipsis; display: block } .load li big { font-size: 16px; line-height: 24px; height: 24px; overflow: hidden; text-overflow: ellipsis; color: #7e7e80 } .load li p { color: #a2a2a3; overflow: hidden } .load li.hover em a { background: url(images/load2.jpg) no-repeat 0 0 !important } .load li.hover h4 a { color: #d42934 !important } .load li.hover big { color: #fe9b0e !important } .load li.hover p { color: #fbba5e !important } .bodyright { display: none; position: fixed; right: 0; top: 30%; z-index: 100000; font-size: 12px; color: #fff; width: 84px; } .bodyright dt { clear: both; overflow: hidden; cursor: pointer; margin: 0 auto; width: 61px; height: 41px; } .bodyright dd { float: left; width: 84px; position: relative; margin: 0 0 2px; background: url(images/b_background_01.png) no-repeat 0 bottom; height: 64px; text-align: center } .bodyright1 { width: 84px; overflow: hidden; cursor: pointer; background: url(images/bright1.png) no-repeat center 8px; padding-top: 37px; line-height: 24px; white-space: nowrap } .bodyright2 { position: absolute; z-index: 1000001; top: 0; right: 92px; background: url(images/brignt1.png) no-repeat right 27px; padding-right: 10px; display: none } .bodyright2 em { display: block; border-radius: 4px; border: 9px solid #fdbf00; padding: 7px; background: #fff } .bodyright3 { background: url(images/bright2.png) no-repeat center 8px; width: 84px; overflow: hidden; cursor: pointer; padding-top: 37px; line-height: 24px; white-space: nowrap; display: block; color: #fff !important } .bodyright dd.hover { background-position: 0 0 !important } .bodyright dd.hover .bodyright2 { display: block } #baike-sp-cont-bar { top: 24px } #baike-sp-cont-min, #baike-sp-cont-res, #baike-sp-cont-close { width: 15px; height: 14px; margin: 0 1px; background: transparent url(images/close.gif) } #baike-sp-cont-min { background-position: 0 0 } #baike-sp-cont-res { background-position: -20px 0 } #baike-sp-cont-close { background-position: -40px 0 } #baike-sp-cont { position: relative; width: 290px; height: 228px; } #baike-sp-sponsor { position: absolute; left: 0; top: 0; width: 234px; height: 64px; } #baike-sp-content { position: absolute; right: 15px; bottom: 10px; width: 285px; height: 180px; line-height: 18px; overflow: hidden; } .f-sidebar { position: absolute; top: 2px; right: 0; margin-right: 6px; } .f-sidebar a { float: left; +display:inline; width: 27px; height: 17px; overflow: hidden; } @media only screen and (min-width: 320px) { html { overflow-x: hidden } } @media only screen and (min-width: 768px) { .beijing, .beijing1 { padding: 15px 0; width: 768px; } .head, .foot1 { width: 768px; } header, .head, .head h2 img, .head1_1 dd { height: 55px; } .banner { margin-top: 55px } .head_1 { display: none } .head1 { z-index: 100; position: relative } .head1_1 { display: inline-block; position: static; left: auto; top: auto; height: 100%; background: none; float: left; width: auto } .head1_1 dd { float: left; width: 84px; line-height: 33px; padding: 10px 0 9px; position: relative; z-index: 100 } .head1_1 span { border-bottom: 0 } .head1_1 dt { display: inline-block } .head2 { background: url(images/mneu.png) repeat; height: 36px; z-index: 30; width: 100%; position: absolute; left: 0; bottom: -37px; display: none } .head1_1 dd.hover span a, .head1_1 dd span.on a { background: url(images/logo2.png) no-repeat 0 0 } .banner_1 { display: block } /*index*/ .index_left1 li { clear: none; width: 50%; float: left; padding-right: 2%; display: inline-block } .news3 li { width: 100% !important; padding-right: 0 !important } .news3 li p { line-height: 20px; height: auto !important } .news3 li.index_left1_1 { padding: 20px 0 !important; } .index_left1_1 { padding: 20px 0 20px 2% !important; float: right !important } .index_left1 li p { height: 72px; overflow: hidden } .foot { display: block } footer dl { padding: 0; width: 768px; } footer dl dd, footer dl dt { clear: none; } footer dl dt { float: left } footer dl dd { float: right } .weizhi dt { clear: none; float: right; display: inline-block } .main_left { float: left; width: 200px; margin-right: 20px; display: inline-block; overflow: visible; position: relative; z-index: 22 } .main_left2, .main_left1 dl dd, .main_left1 big { display: block } .main_left1 dl dt { display: none } .main_right { overflow: hidden; clear: none; padding: 0 } .index1 .index_top span { display: inline-block } .index1 .index_top { line-height: 61px; } .index1_left { float: left; width: 340px; margin-right: 30px; display: inline-block } .index1_right { overflow: hidden } .index1_1 { clear: both; overflow: hidden; padding: 0 } .index2 { clear: both; overflow: hidden } .index2 dl { display: none; } .index2 dt { clear: both; overflow: hidden; padding: 10px 0 } .index2 img { width: 100%; border-radius: 5px; } .index2 dd { display: none } .bodyright { display: block } } @media only screen and (min-width: 960px) { .head, .beijing, footer dl, .foot1, .beijing1 { width: 960px; } header, .head, .head h2 img, .head1_1 dd { height: 70px; } .language { margin: 23px 5px 22px } .head1_1 dd { padding: 19px 0 18px } .banner { margin-top: 70px } .head1_1 dt { padding: 19px 5px 18px; } .head_s { display: inline-block; margin: 20px 5px 0 } .foot1 dl { float: left; width: 850px } .foot2 { display: inline-block } .main_left { float: left; width: 250px; margin-right: 35px; } .index2 dd p em { display: table; width: 173px; height: 152px; overflow: hidden; text-align: center; vertical-align: middle } .index1_left { width: 355px; } .index2 dt { clear: none; float: left; margin: 10px 0; padding: 0; width: 375px; height: 325px; border-radius: 5px; background: #fff } .index2 dt em { display: table; width: 375px; height: 325px; overflow: hidden; text-align: center; vertical-align: middle } .index2 dt em a { height: 325px; display: table-cell; vertical-align: middle; overflow: hidden } .index2 dt img { width: auto; border-radius: 0; max-height: 325px; max-width: 375px; } .index2 dd { display: inline-block; float: left; width: 195px; height: 342px; overflow: hidden; clear: none } .index2 dd p { float: left; border-radius: 5px; background: #fff; border: 1px solid #e7ddbe; margin: 10px 0 7px 20px; width: 175px; height: 154px; overflow: hidden; clear: none } .index2 dd p em a { height: 152px; display: table-cell; vertical-align: middle; overflow: hidden } .index2 dd img { width: auto; border-radius: 0; max-height: 152px; max-width: 173px; } } @media only screen and (min-width: 1160px) { .head, .beijing, footer dl, .foot1, .beijing1 { width: 1160px; } header, .head, .head h2 img, .head1_1 dd { height: 89px; } .language { margin: 32px 10px } .banner { margin-top: 90px } .head1_1 dd { padding: 30px 0 27px; width: 84px; } .head1_1 dt { padding: 30px 12px 27px; } .head_s { margin: 30px 5px 0 20px } .index_left { float: left; width: 865px; clear: none } .index_right { display: inline-block } .foot1 dl { width: 1040px } .foot1 dl dd { width: 180px } .foot1 dl dt { width: 290px; display: inline-block } .beijing1 { margin-top: -10px } .main_left1 big { clear: both; background: url(images/left.png) no-repeat 0 0; font-size: 24px; padding: 40px 0 10px; height: 119px; line-height: 69px } .main_left { margin-top: -75px } .main_left1 dl dd { background: url(images/left2.png) repeat-y; clear: both; overflow: hidden; padding: 18px 0 } .main_left1 dl dd a { line-height: 46px; border-bottom: 0; background: url(images/left_3.png) no-repeat bottom center; height: 46px; } .main_left1 dl dd a.hover, .main_left1 dl dd a:hover { background: url(images/left1.png) no-repeat 0 0 !important; } .main_left1_3 { display: block } .main_left2 { padding: 5px 10px 15px 4px } .index1_left { width: 365px; } .index2 dd { width: 390px; } .index2 dd p { float: left; border-radius: 5px; background: #fff; border: 1px solid #e7ddbe; margin: 10px 0 7px 20px; width: 175px; height: 154px; overflow: hidden } .index2 dd p em a { height: 152px; display: table-cell; vertical-align: middle; overflow: hidden } .index2 dd img { width: auto; border-radius: 0; max-height: 152px; max-width: 173px; } } .empty { text-align: center; padding: 30px 0; }