/********************************** 标签默认值,从行6开始 ************************* 主题色 原来是 #2E7CC1 现在是 #189DF0 重要: 1)这几个CSS不要轻易改动 2)行7,ul,li的list-style:none,取消li的序列圆点 3)行15,不能有div,否则layer.alert会异常 4)行16:不能有font-size,否则具体html页面的@media screen and (min-width:1024px)得font-size就不起作用,无法完成针对不同分辨率控制rem的显示大小(观山居) 5)html的 font-size 默认13px 1rem:15px 1.25rem:17px; 6)body中不设置font-size,保证基础的em与rem一致 外用字体(考虑兼容性,优先使用ttf): Rasa-Regular: 创意类PS字体,稍粗 Bandy:个性独特 Consolas 等宽英文字体 Avanti,Avanti_Bold:用于价格数字 暂未用字体,可根据实际情况使用 Rajdhani-Regular: 用于广告设计方面,稍细 Army:左细,右粗 STEINEMU:稍正规 Army,OpenSans-Bold:粗体,正式,后两个字体用时在增加本css Teko:长粗字体 /* ' ' ' ' ' ' ' ' ' ' */ @media screen and (max-width:1024px) {html {font-size:12px;}} @media screen and (min-width:1024px) and (max-width:1440px) {html {font-size:14px;}} @media screen and (min-width:1440px) and (max-width:1680px) {html {font-size:16px;}} @media screen and (min-width:1680px) {html {font-size:18px;}} html {-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} ul,li {margin:0px; padding:0px; list-style:none;} a:link, a:visited {text-decoration:none; color:#999;} a:hover {color:#000; text-decoration:none;} body {margin:0px; padding:0px; /*text-align:center;*/} hr {border-width:0; margin:0 auto 0 auto;} a,input,blockquote,center,li,dt,dd,span,tt,p,img {-webkit-tap-highlight-color:rgba(0,0,0,0); outline:none;-moz-transition:all .3s ease; -webkit-transition:all .3s ease; transition:all .3s ease;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0; padding:0; border:0; list-style-type:none; text-indent:0px; font-weight:normal;} * {font-family:"Microsoft YaHei UI", "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑","宋体","SimSun","仿宋";} table,div,center,h3,h4,h5,h6 {margin:auto;} dd,dt,li,center,td {box-sizing:border-box;} h3,h4,h5,h6 {font-weight:normal; font-size:initial; vertical-align:middle; /*因为h标签默认字体是加粗的*/} input[type=checkbox],input[type=radio] {position:relative; top:2px; margin:0 0.2em;} input::placeholder {color:#DDD;} @font-face {font-family:'Avanti'; src:url('WebUsed/Avanti.ttf');} @font-face {font-family:'Rasa-Regular'; src:url('WebUsed/Rasa-Regular.ttf');} @font-face {font-family:'Bandy'; src:url('WebUsed/Bandy.ttf');} @font-face {font-family:'Consolas'; src:url('WebUsed/Consolas.ttf');} .animated {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-delay:0.5s;-webkit-animation-delay:0.5s;} .animated.infinite {-webkit-animation-iteration-count:infinite; animation-iteration-count:infinite} .animated.hinge {-webkit-animation-duration:2s;animation-duration:2s} @keyframes fadeIn {0%{opacity:0} 100%{opacity:1}} @keyframes fadeOut {0%{opacity:1} 100%{opacity:0}} .fadeIn {animation-name:fadeIn; animation-duration:0.5s; animation-fill-mode:forwards;} .fadeOut {animation-name:fadeOut; animation-duration:0.5s; animation-fill-mode:forwards;} @keyframes rotate {0% {transform:rotate(0deg);} 50%{transform:rotate(-36000deg);} 100% {transform:rotate(0deg);}} @keyframes Spankling {0% {opacity:0;} 40%{opacity:1;} 60%{opacity:1;} 100%{opacity:0;}} /********************************** 标签默认值 **********************************/ /********************************** @media 设置 ********************************** 用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面 1024 1280 1366(我的笔记本) 1440 1680 1920,每个都必须有相同的样式设置(font-size),否则浏览器会使用前一个小的样式对应设置 注意 1)万盟数控,grid弹性布局,min-width:1000px;max-width:1320px; 2)比如 $(window).width()=1040 1140 1240,考虑到滑动条,screen的值要大16,因此max-width为1057px,以此类推 3)弹性布局,如果页面设置@media screen,CSS样式表最好使用rem做单位. 否则使用em 5)调试时打开F12,调试控制面板在右侧,左右移动控制面板,虽然看的的FullScreen的width在变化,但@media screen的min-width是固定的,为浏览器窗口宽度(不变),必须左右拉动浏览器外框才能正确调试 ********************************************************************************* @media screen and (min-width:1024px){ html {font-size:75%;}} @media screen and (min-width:1280px){ html {font-size:82%;}} @media screen and (min-width:1366px){ html {font-size:100%;}} @media screen and (min-width:1920px){ html {font-size:100%}} @media screen and (min-width:2560px){ html {font-size:130%;} .FlexBoxDiv {width:80vw;} .swiperWidth {width:80vw;}} **/ /********************************** 通用,带前缀 ********************************** _clearfloat: 用于class的伪类,带前缀_,父级div定义伪类:after和zoom,浏览器支持好,不容易出现怪问题(目前大型网站都有使用,如腾迅,网易,新浪等等),范例:
ewebeditor_doc 此样式用于导入PDF,Doc(生成图片)的启用文档效果 _buttonA: 用于圆角按钮,字体稍等,灰底黑字 _buttonB: 北京永旺首页 新闻更多按钮,hover时有underline css动画 Txt_Strok: 给文字描边 关于虚线 1)利用linear-gradient完成虚线 2)background-size的第一个数字为一个虚线组宽(px) 3)利用前面的ground:linear-gradient的 颜色值,百分比 控制一个虚线组的实线和间隔 4)注意百分比合值为100 5)虚线的长度有被引用的htm元素的width来控制 DotLine:Css生成点线,虚线,可控制间距,用于
DashLine:一长一短的虚线 *********************************************************************************/ .swiper-wrapper {transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s; /* 通过改变animation-timing-function 制作弹性切换效果 */} ._clearfloat {zoom:1} ._clearfloat:after, .clearfloat:before {display:block; clear:both; content:""; visibility:hidden;} ._ewebeditor_doc {overflow:auto; background-color:#A0A0A3; border:1px solid #D4D0C8; text-align:center;} ._buttonA {display:inline-block; width:3rem; height:1.6rem;; background-color:#CCC; text-align:center; line-height:1.6rem; font-size:1rem; border-radius:0.3rem; margin:auto;} ._buttonA a:link, ._buttonA a:visited {color:#000;} ._buttonA a:hover {color:#FFF; border-bottom:#FFF 1px dashed;} ._buttonB {display:inline-block; color:#888; line-height:1.6rem} ._buttonB hr {border-width:0; background-color:#000; height:0.05rem; width:0%; position:relative; left:50%; margin:0; transition:all .3s ease;} ._buttonB:hover {color:#000;} ._buttonB:hover hr {width:100%; left:0%; transition:all .5s ease;} ._enfont, ._NumFont {font-family:Arial,Verdana,Helvetica,sans-serif;} ._applefont {font-family:Apple LiGothic Medium,"蘋果儷中黑", "微軟正黑體"} .CoordDiv {position:relative; width:0; height:0; z-index:10;} .DotLine {border-width:0; width:100%; background-size:10px!important;background-repeat:repeat-x; background:linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 20%, transparent 40%, transparent 100%);} .DashLine {position:relative; border-width:0; background:linear-gradient(to right,#000 60%,transparent 40%); background-size: 10px 100%;} .Txt_Strok {text-shadow:0 1px #FFF, 1px 0 #FFF, -1px 0 #FFF, 0 -1px #FFF;} .DottedLine {position:relative; border-width:0; width:100%; margin:10px 0 10px 0; height:1px; opacity:0.2; background-size:20px!important;background-repeat:repeat-x; background:linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, transparent 30%, transparent 40%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 50%, transparent 50%, transparent 60%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 70%, transparent 70%, transparent 80%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%);} .Pause_Animation {animation-play-state:paused;} /********************************** 功能样式集合 ********************************** BackImgCover: 因为弹性结构,img作为背景放在center中,为此img加A标签,范例:传媒协会首页Logo Elas_Height: 1:父元素设置有width 2:padding-bottom为元素height,手工设置百分比,对应父元素的width Triangle: 1:Css绘制等腰三角形 2:颜色为border-bottom-color 3:边长为边长由border-width:0.25rem; 4:底长border-bottom-width:0.5rem; *********************************************************************************/ .BackImgCover {display:block; height:100%;/*必须保证其父级标签,比如center已设置好width和height*/} .BackImgCover>img {width:100%; height:100%; border-width:0;} .Elas_Height {position:relative; } .Elas_Height>div {position:absolute; height:100%; width:100%; font-size:0; box-sizing:border-box; ; ;} .Triangle {width:0; height:0; border-style:solid; border-color:transparent; border-width:0.25rem; border-top-width:0; border-bottom-width:0.5rem; border-bottom-color:black;} /********************************** 整体宽度布局 ********************************** FullWidthDiv 最外围Div,容器固定高度 FixedPosDiv 位置固定的Div(脱离页面滚动影响).用于页面导航, FixedWidth 用于页面最外围table的固定宽度布局,要放在后面以便其优先级大于MainContain等 MinWidthDiv 内页列表或正文所在Div最新宽度. 注意与 DivMinWidth 的关系,如果两者不同,前者用于首页,一般用于外框 DivMinWidth 用于统一全局布局的框架最小宽度,与其它class配合使用 范例见农工党,但目前尚未完美 NavContain 和 SubPgN 直接在屏幕缩小时的匹配,后续再解决 FlexBoxDiv 用于弹性布局,保证最外围Div宽度一致.min-width:如没有width缩小自动跳转3G,就需要设置该值 目前两种样本 1)关山觉:87vw 注意,1920px下的87vw对应2560下的65vw,在htm页面下设置@media screen 2)华通:73vw(1920下1400宽) EqualWidthDiv 也属于弹性,设置最大,最小宽度 针对文化传媒设计,对应font-size:1600下为18px,1160下,图片缩小,1rem仍然为12px;因此我设置 min-width:1160px;) GlobeWidth 此Div用于固定页面的内容宽度,属于通用 ElasticMove 关山觉,用于Swiper的弹性切换 通过改变animation-timing-function 制作弹性切换效果 MainContain: 用于内页左右结构布局(北京永旺,农工党),配合MainLeft和MainRight(两者使用float:left和float:right) BothSides_Shadow 农工党的主frm两边代阴影,由于此阴影有Css生成,上下有空白,无法接上 ShadowBlock: 用于填补上下两端的空白阴影 总宽:1140 left:300 right:840 *********************************************************************************/ .FullWidthDiv {width:100%; margin:auto; background-repeat:no-repeat; background-position:center top;background-size:100% auto; /*注意这里background-size:contain表示将图片宽度自动拉伸或缩小满屏 */} .FullDiv_Spec {background-color:#D23131;} .FixedPosDiv {width:100%; height:1; position:fixed; text-align:center; z-index:1000; clear:both;} .DivideBlock {height:20px; width:100%; font-size:0; margin:auto;} .MinWidthDiv {min-width:1160px; /*如果与DivMinWidth不同,一般用于首页swiper和内页的Banner,保证横屏的宽高比例一致*/} .DivMinWidth {min-width:1160px; max-width:1400px; /*用于全局*/} .FlexBoxDiv {min-width:1280px; max-width:1400px; width:85vw; text-align:center; margin:auto; /*弹性布局,保证两侧2vw的留白 clear:both;:防止前面的float影响,*/} .S_Border_Top, .S_Border_Bottom {border:rgba(0,0,0,0.05) 0 solid; border-top-width:1px; /*此样式主要用于测试边界*/} .S_Border_Bottom {border-top-width:0; border-bottom-width:1px;} .EqualWidthDiv {min-width:1160px; max-width:1600px; margin:auto; /* 一般用于首页 1060*/} .FixedWidth {width:1280px;} .EqualWidthDiv:after, .EqualWidthDiv:before, .FlexBoxDiv:after, .FlexBoxDiv:before, .FixedWidth:after, .FixedWidth:before {display:block; clear:both; content:"";} .MainContain {display:table; width:100%; /* max-width:1000px; 农工党,不需要此,因为外围已使用EqualWidthDiv padding:0 88px */} .GlobeWidth {width:80vw; max-width:1280px; padding:0; margin:auto; /*min-width:1160px;*/} .ElasticMove {transition:all 1.5s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s!important;} /********************************** 通用,带前缀 *********************************/ /****************** 关山觉整屏遮罩,一级栏目竖形导航,含关闭按钮 ******************/ .CloseIcon {width:2.5rem; height:2.5rem; cursor:pointer; position:relative; padding:0 0 0 8px; transform:rotate(0deg); transition:all .4s ease; box-sizing:border-box; /*见关山觉的NavModal的关闭按钮*/} .CloseIcon span {display:block; transform-origin:center center;position:absolute; background-color:#333333; width:100%; height:1px;} .CloseIcon span:nth-child(1) {transform:rotate(45deg); top:50%; left:25%;} .CloseIcon span:nth-child(2) {transform:rotate(-45deg); margin-top:37.5%; top:12.5%; left:25%;} .CloseIcon:hover {transform:rotate(180deg); transition:all .4s ease;} .AddrItem::after {content:""; display:block; position:absolute; right:0; bottom:1em; width:1.1rem; height:1.1rem; background:#DA251D;} .AddrItem::before {content:""; display:block; position:absolute; right:1.1em; bottom:2.1rem; width:0.5rem; height:0.5rem; background:#ADBAB3;} .WaveBtn, .WaveBtnB {width:100%; height:100%; line-height:100%; text-align:center; font-size:0.9em; color:#333333; overflow:hidden; position:relative; border:#333333 1px solid; /*新的按钮样式*/} .WaveBtn tt,.WaveBtnB tt {display:block; position:relative; z-index:1;top:35%; transition:all .2s ease} .WaveBtn::after, .WaveBtnB::after {transition:all .6s cubic-bezier(.165,.84,.44,1); transition-timing-function:cubic-bezier(.165,.84,.44,1); height:100%; left:-35%; top:0; transform:skew(50deg); transform-origin:top left; width:0; background:#333333; content:''; position:absolute; z-index:0;} .WaveBtn:hover::after, .WaveBtnB:hover::after{height:100%;width:135%;} .WaveBtn:hover {color:#333333;} .WaveBtn:hover tt, .WaveBtnB:hover tt {color:#ffffff; transition:all .36s ease .2s;} .WaveBtnB {color:#FFFFFF;border:#FFFFFF 1px solid;} .WaveBtnB::after {background:#FFFFFF;} .WaveBtnB:hover {color:#000000;} .WaveBtnB:hover tt {color:#000000;} /***************************** 通用CSS动画关键帧定义 ***************************** 说明: 感觉应该将vw改为rem为好,因为1rem=css定义的font-size,而如果移动端页面,我都会有font-size:10px;控制移动端文字整体大小.这样PC端和移动端的css可以通用 退场: _TopBarOut_0 _TopBarOut_1: 从内部向左,向右退场 _TopBarOut_5: 从下至上出场 进场: _OutToLeftH_0 _OutToRightH_1: 从外部向右,向左进场 _InToLeftH_2, _InToRightH_3: 从内部向左,向右进场 _ OutFromTopV_5, _InToTopV_6: 从上至下,从下至上进场 _LeftToRightW_10:长色块从外部由左到右进场 _TopBarIn_11, _TopBarIn_12: 从小放大或从大到小进场 _SlideOpen_13, _SlideOpen_13A: 用于开屏动画(北京永旺内页Banner栏目标题大字) _SlideOpen_14A,_SlideOpen_14B:开屏动画(文化传媒) Cov_M_Open: 遮罩从中展开(文化传媒党建) *********************************************************************************/ @keyframes _TopBarOut_0 {from{left: 0vw; opacity:1;} to{left: -1vw; opacity:0}} @keyframes _TopBarOut_1 {from{right:0vw; opacity:1;} to{right:-1vw; opacity:0}} @keyframes _TopBarOut_5 {from{top: 0vw; opacity:1;} to{top: -1vw; opacity:0}} @keyframes _OutToLeftH_0 {from{left: -1rem; opacity:0;} to{left: 0rem; opacity:1}} @keyframes _OutToRightH_1 {from{right:-1rem; opacity:0;} to{right:0rem; opacity:1}} @keyframes _InToLeftH_2 {from{left: 2vw; opacity:0;} to{left: 0vw; opacity:1}} @keyframes _InToRightH_3 {from{right:4vw; opacity:0;} to{right:0vw; opacity:1}} @keyframes _OutFromTopV_5 {from{top: -2vw; opacity:0;} to{top: 0vw; opacity:1}} @keyframes _InToTopV_6 {from{top: 1.5rem; opacity:0;} to{top: 0rem; opacity:1}} @keyframes _LeftToRightW_10 {from{width:100%; left:0%;} to{width:0%; left:100%;}} @keyframes _ScaleFromSamll_11 {from{transform:scale(.8); opacity:0;} to{transform:scale(1); opacity:1}} @keyframes _ScaleFromBig_12 {from{transform:scale(1.1); opacity:0;} to{transform:scale(1); opacity:1}} @keyframes _SlideOpen_13 {from{left: 100%; opacity:1;} to{left: 0%; opacity:1;}} @keyframes _SlideOpen_13A {from{right:100%; opacity:1;} to{right:0%; opacity:1;}} @keyframes _SlideOpen_13B {from{right:100%; opacity:1;} to{right:0%; opacity:1;}} @keyframes _SlideOpen_14A {from{left:100%; opacity:1;} to{left:0%; opacity:1;}} @keyframes _SlideOpen_14B {from{left:-200%; opacity:1;} to{left:-100%; opacity:1;}} @keyframes _SlideOpen_15A {from{right:-100%; opacity:1;} to{right:0%; opacity:1;}} @keyframes _SlideOpen_15B {from{left:-100%; opacity:1;} to{left:0%; opacity:1;}} @keyframes _Banner_0 {0%{width:0%; left:0%;} 49%{width:100%; left:0%;} 50%{width:100%; left:0%;} 100%{width:0%; left:100%;}} @keyframes _Banner_1 {0%{opacity:0} 50%{opacity:1} 100%{opacity:1}} @keyframes Cov_M_Open {0%{left:50%; width:0%} 100%{left:0%; width:100%}} /***************************** 通用CSS动画关键帧定义 ****************************/ /***************************** 页头和主导航的CSS说明 ***************************** 1) PC端与移动端为同一页面,移动端改用TopBar_Y 2) 使用@media screen and (max-width:350px)控制切换 3) TopBar:PC端,用于顶部,比如农工党,分左右两栏,左边两链接(农工党国家,省),右侧两链接(微信号,手机版) *********************************************************************************/ .TopBar {width:100%;/*设计稿1600px*/ display:table; margin:auto;} .TopBar dd, .TopBar dt {display:table-cell; vertical-align:middle; text-align:left; color:#000; width:50%;} .TopBar dd:nth-child(1) {width:25.0%;/*400px*/ padding-bottom:5.9%; position:relative; /* 1:根据设计稿,在max-width下,5.9%=95px 2:使用padding-bottom:可保证background-image图片随宽度变化 3:图片高度由dd:nth-child(1) width=400的height:76% width:85.5%;决定,正好为342*73pxx */} .TopBar dd:nth-child(1) center {position:absolute; height:76%; width:85.5%; top:15%; background:url(../images/LogoA.png) no-repeat left center; background-size:contain;} .TopBar dd:nth-child(2) {width:58.75%; text-align:right;} .TopBar dt:nth-child(3) {width:16.25%/*260*/; text-align:right; font-size:0;} .TopBar dt:nth-child(3) center {display:inline-block; padding-bottom:27%; font-size:0.75rem; position:relative; color:#888; vertical-align:top;} .TopBar dt:nth-child(3) center:nth-child(1) {width:75%; /*background-color:#F00;*/} .TopBar dt:nth-child(3) center:nth-child(1) h4 {position:absolute; width:100%; height:100%; display:table;} .TopBar dt:nth-child(3) center:nth-child(1) h4 blockquote {display:table-cell; height:100%; font-size:0.75rem; vertical-align:middle; line-height:1.5rem; white-space:nowrap; overflow:hidden;} .TopBar dt:nth-child(3) center:nth-child(1) h4 blockquote p {width:90%; height:1.7rem; border:#C6CCD2 1px solid; border-radius:0.3rem; background-color:#C6CCD2; text-align:left;} .TopBar dt:nth-child(3) center:nth-child(1) h4 blockquote p input {width:80%; height:1.7rem; background-color:#FFF; border-radius:0.3rem; float:left; text-indent:0.5rem; color:#000;} .TopBar dt:nth-child(3) center:nth-child(1) h4 blockquote p input::placeholder {color:#CCC;} .TopBar dt:nth-child(3) center:nth-child(1) h4 blockquote p i {color:#FFF; font-size:1rem; margin:0.3rem 0 0 5%;} .TopBar dt:nth-child(3) center:nth-child(2) {width:25%; } .TopBar dt:nth-child(3) center:nth-child(2) h3 {position:absolute; width:100%; height:100%; background-color:#0F0; right:0; background:url(../Images/WeChatCode.png) no-repeat right top; background-size:95% 85%;} .TopBar dt:nth-child(3) center:nth-child(2) h3 span {position:absolute; bottom:-5px; left:10%; font-size:0.65rem; white-space:nowrap; } @media screen and (max-width:1160px) { .TopBar dt:nth-child(3) center:nth-child(2) h3 span {font-size:0.75rem; bottom:-6px; left:0%; letter-spacing:-1px;} } /* VertiMenu: 对应烟花垂直导航 1) width: 14.7 200(设计稿宽度) / EqualWidthDiv.max_width *********************************************************************************/ .VertiMenu {display:flex; flex-direction:column; width:12%; position:absolute; top:1vw; box-shadow:0 0 12px rgba(0, 0, 0, 0.6); border:#BBB 1px solid; background-color:rgba(255,255,255,0.7);} .VertiMenu li {flex-grow:1; position:relative;} .VertiMenu li h4, .VertiMenu li h5 {width:80%; text-align:center; position:absolute; left:10%; top:50%; margin-top:-25%;} .VertiMenu li h4 {line-height:1.1rem; } .VertiMenu li h4 a {color:#000;} .VertiMenu li h4 a img {width:80%; height:auto; transform:scale(0.9);} .VertiMenu li hr {width:80%; left:10%; border-width:0; margin:auto; height:1px; position:absolute; top:100%; background-color:rgba(0,0,0,0.1);} .VertiMenu li h4 a:hover {color:#D23131;} .VertiMenu li h4 a:hover img {transform:scale(1.1);} /************************************ 页头 ************************************/ /* HorizontalMenu: 对应烟花垂直导航 1) width: 14.7 200(设计稿宽度) / EqualWidthDiv.max_width *********************************************************************************/ .HorizonMenu {display:table; width:100%; margin:auto;} .HorizonMenu li {display:table-cell; width:12.5%; text-align:center; vertical-align:middle; box-sizing:border-box;} .HorizonMenu li center {width:5.2rem; height:4.8rem; line-height:4.8rem; color:#FFF; font-size:1.05rem;} .HorizonMenu li center a {color:#000;} .HorizonMenu li center a hr {border-width:0; height:1px; width:0%; margin:auto; position:relative; left:2.5%; top:-35%; opacity:0.6; background:url(../Images/Common/LineB.png) repeat-x center center; transition:all 0.4s;} .HorizonMenu li center a:hover hr {width:90%; transition:all 0.7s;} .HorizonMenu li center a:hover {color:#CC150F;} .HorizonMenu_CurrLi center {background-color:#CC150F;} /****************************** 固定沿右侧滚动条 *******************************/ .RightFixNav {position:fixed; right:5px; top:320px; width:2.5vw; max-width:55px; min-width:25px; z-index:1000; box-sizing: border-box;} .RightFixNav dd {position:relative; top:-100%; width:100%; padding-top:100%; border-radius:100%; margin:10px 0; background-color:#FFF; box-shadow:0 0 8px rgba(0, 0, 0, 0.1);} .RightFixNav dd i {position:absolute; width:100%; color:#AAA; top:30%; left:-1%; transform:scale(1.3); cursor:pointer; transition:all 0.3s;} .RightFixNav dd center {position:absolute; width:0px; height:0px; background:url() no-repeat center center; background-size:cover; top:-25px; left:-115px; opacity:0; transition:all 0s;} .RightFixNav dd:hover i {color:#000; transition:all 0.5s;} .RightFixNav dd:hover center {width:90px; height:90px; transition-property:left,opacity; transition-delay:0.2s; transition-duration:0.6s; left:-100px; opacity:1;} /********************************************************************************/ /************************************ 页脚 ************************************ 注意 1)北京永旺(底色为白色) 2)这里定义字体的基本样式,分别对应第1,2,3行 ********************************************************************************/ .TitleBar {padding:3rem 0 1.7rem 0;} .TitleBar h3 {font-weight:bold; font-size:3.7rem; color:#000; line-height:4.7rem; font-family:"Noto Sans SC",sans-serif;} .TitleBar h4 {font-size:1.55rem; color:656565; text-align:center; position:relative; letter-spacing:0.1rem;} .TitleBar h4 tt {position:absolute; right:0px; top:0.3rem; font-size:1.1rem; letter-spacing:0;} .FootBar {position:relative; padding-bottom:8.75%;} .FootBar div {position:absolute; height:100%; width:100%; } .FootBar div h3 {display:block; text-align:center; height:64.3%; font-size:0.8rem; color:#BBB; position:relative; box-sizing:border-box;} .FootBar div h3 img {height:80%; width:auto; margin:0.7% auto;} .FootBar div h4 {position:absolute; height:100%; width:8.0%; text-align:center; top:8%; right:0; color:#FFF; font-size:0.8rem;} .FootBar div h4 img {height:70%; width:auto; margin:auto;} /************************************ 页脚
************************************/ /******************************* 内页框架样式说明 ******************************** LMainColName: 放置一级栏目名称 ColNameDivide: 作为LMainColName和LSubNav之间分界 SubPgN: 内页栏目路径导航,span,tt分左右放一级栏目名和路径 ArticleTypeBar,ArticleTypeBarA(用于Single.htm): 用于在MainRight的上面显示当前二级栏目名称 关于 SubPgN: 1) 根据内页二级菜单创建方式(SubMenuCrt) 2) 如果为0,使用dd标签,见WebStatic.js的行401(文化传媒) 3) 如果为1(手写程序完成内页二级栏目导航,在此函数内完成二级栏目路径),就使用tt标签 0:使用dd标签 布局 a) 左右布局(北京永旺) b) 样式命名: MainLeft->LSubNav MainRight c) 左右分别采取float:left 和 float:right d) 左侧div样式名为MainLeft,id=SubNavige 如果要显示当前内页的一级栏目名,使用center或blockquote,如果样式设为display:none,表示左侧不显示一级栏目名称((农工党). b) 上下布局 (关山觉) b) 样式命名: MainTop ->TSubNav MainDown c) 关于 MainLeft 1) 结构采用 MainLeft(id="SubNavige") > center(LMainColName) > tt 三级嵌套结构 2) MainLeft center:此二元素用于定位一级栏目名称的定位 3) tt中放置一级栏目名 img:如需在一级栏目名前显示Icon图 h3:用于装饰背景(范例:文化传媒) *********************************************************************************/ .ArticleTypeBar {/*背景图上显示一级栏目名称*/ position:relative; width:100%; height:113px; background:url(../images/In_BackImg_3.jpg) no-repeat top center; background-size:auto 100%; box-sizing:border-box;} .ArticleTypeBar span {display:inline-block; font-size:30px; font-weight:bolder; color:#FFF; letter-spacing:3px; text-align:center; padding-top:35px; text-shadow:1px 1px 5px rgba(0,0,0,0.7);} .ArticleTypeBarA {position:absolute; top:15px; font-size:2.5rem; text-align:center; font-weight:bold; position:relative; padding-bottom:1rem; margin:1.5rem 0 0rem 0; letter-spacing:0.2rem;} .ArticleTypeBarA hr {position:relative; border-width:0; height:3px; background-color:#B62883; width:5rem; top:0;} @keyframes ArticleTypeBar {/* 此keyframes给id=ArticleTypeBar专用 */ 0%{left:-60%;} 100%{left:0%;}} .MainRight, .MainLeft {display:table-cell; vertical-align:top; position:relative; box-sizing:border-box;} .MainLeft {width:20.2%; text-align:left; /*文化传媒,内页左侧显示一级栏目名称 1400 > MainLeft(290) > center(220) */} .MainLeft>h3 {position:absolute; left:-6.5%; width:82.7%/*235*/; padding-top:106%; background-color:#005375; z-index:-1;} .MainRight {width:79.28%;} .SubPgN {display:table; margin:0 auto 0 auto; width:100%;} .SubPgN dd {display:table-cell; width:50%; text-align:left; vertical-align:middle;} .SubPgN dd:nth-child(1) {padding:1.5% 0 1.0% 1.0%; font-size:1.4rem; font-weight:bolder; color:#000; letter-spacing:1px; position:relative;} .SubPgN dd:nth-child(2) {text-align:right; font-size:0; padding:0 1.2% 1.0% 0; vertical-align:bottom;} .SubPgN dd:nth-child(2) i {margin:0 0.3rem; font-size:0.95rem;} .SubPgN dd:nth-child(2) a {color:#000; font-size:0.9rem; display:inline-block; position:relative;} .SubPgN dd:nth-child(2) i:nth-child(1) {font-size:1.05rem; position:relative; top:0.1rem; color:#005375;} .SubPgN dd:nth-child(2) a hr {height:0.05rem; width:0%; position:absolute; top:1.25rem; opacity:0.5; transition:all ease 0.3s;} .SubPgN dd:nth-child(2) a:hover hr {width:100%; transition:all ease 0.5s;} /* --------------------- 内页二级栏目和正文采用左右布局 --------------------- 布局: 整体: Table架构, 结构体: MainContain > [ MainLeft+MainRight ] 左边: MainLeft -> [ h3+center(LMainColName) ] + [ ul > li(LSubNav)... ] 右侧: MainRight > [ div(SubPgN)+div(AContentDiv)+div(MainList)+div(PrenextDivB) ] MainLeft,id=SubNavige 如果要显示当前内页的一级栏目名,使用center或blockquote,如果样式设为 样式名: LMainColName: 内页一级栏目显示 LSubNav: 二级栏目导航 AContentDiv: 正文 AContentADD: 正文的附属样式,在PC_Contnet.Css中,以便保证PC_Content的样式不动 MainList: 列表内容 SubPgN: 当前栏目路径,采用Table结构,两列,第一例放置当前二级栏目名称 第二列放置路径path ThirdBtn: 用于文化传媒的协会频道,显示频道名称按钮列表 ----------------------------------------------------------------------- */ .LMainColName {width:77.59%; position:relative; padding-top:26.5%/*75*/; background-image:url(../Images/LogoC.png); background-repeat:no-repeat; background-position:right center; background-size:auto 93%; margin:0;} .LMainColName img {position:absolute; width:auto; height:1.7rem; left:0%; top:30%; z-index:2;} .LMainColName tt {position:absolute; text-align:left; z-index:1; left:2.1rem; top:30%; font-size:1.33rem; font-weight:bolder; color:#FFF; letter-spacing:0.15rem;;} .MainColNameA {width:100%; padding-bottom:20.3%; position:relative;} .MainColNameA hr {position:absolute; height:0.15rem; background-color:#2F5597; width:32%;} .MainColNameA tt {position:absolute; font-size:2.1rem; line-height:2.2rem; color:#2F5597; top:23%; letter-spacing:0.15rem;} .MainLeftA {display:block; width:98%; margin:0; border-top:#2F5597 0.1rem solid;} .MainLeftA ul {font-size:0; vertical-align:top;} .MainLeftA ul li {display:none; height:2.5rem; font-size:1.1rem; text-align:left; vertical-align:bottom; padding:0 2rem 0 0; position:relative;} .MainLeftA ul li a {display:block; padding-top:0.8rem; color:#888; position:relative;} .MainLeftA ul li a hr {position:absolute; width:0%; height:0.25rem; background-color:#2F5597; top:0rem; left:50%; transition:all ease 0.4s;} .MainLeftA ul li a:hover hr {width:100%; left:0%; transition:all ease 0.6s;} .MainLeftA ul li a:hover {color:#2F5597; } .CurTSubNavA a hr {width:100%!important; left:0%!important;} .CurTSubNavA a {color:#2F5597!important; font-weight:bolder; font-size:1.2rem!important;} .ColNameDivide {height:5px;} .MainLeftWidth {width:83.3%; border-right:#F4F7FA 1px solid;/*必须使用center样式,用display:none控制内页页面是否显示一级栏目名称*/} .MainLeft>ul {width:77.59%; background:url(../Images/BackImg_3.jpg) no-repeat right bottom #FFF; background-size:100% auto; } .MainLeft>ul {border-right:#FFF 1px solid; border-bottom:#FFF 1px solid; box-shadow:4px 4px 0 2px rgba(0, 0, 0, 0.08);} .LSubNav, .CurLSubNav, .LSubNavAll, .LSubNavDisabled {height:3.33rem; line-height:3.33rem; font-size:1.05rem; letter-spacing:0.1rem; padding:0 0 0 2.22rem; overflow:hidden; position:relative; border-bottom:rgba(0,0,0,0.1) 1px solid; box-sizing:border-box;} .LSubNav center, .CurLSubNav center {text-align:left;} .LSubNav {display:none;} .CurLSubNav {display:block; background:url() no-repeat center center #D5AB63; background-size:100% 100%; } .CurLSubNav a {color:#FFF;} .CurLSubNav center:before, .LSubNav center:before {display:inline; content:"☼ "; color:#BBB;} .CurLSubNav center:before {color:#FFF; font-weight:bolder;} .LSubNav a {color:#1B1B1B;} .LSubNav:hover {background-color:#D5AB63;} .LSubNav:hover a {color:#FFF; border-bottom:#FF0 1px dashed;transition:all .6s ease 0.0s;} .LSubNav:hover center:before {color:#FFF;} .LSubNav i, .CurLSubNav i, .LSubNavDisabled i{position:absolute; top:35%; right:15px; color:#FFF} .LSubNav i:nth-child(2) {color:#FFF; right:30px; opacity:0; transition:all .3s;} .LSubNav i:nth-child(3) {color:#666; opacity:1; transition:all .3s;} .LSubNavDisabled i:nth-child(3) {color:#666;} .LSubNav:hover i:nth-child(2) {opacity:1; right:15px; transition:all .6s ease 0.3s;} .LSubNav:hover i:nth-child(3) {color:#FFF; right:-20px; transition:all .4s ease 0.0s;} .ThirdBtnContain {padding:1.0% 0 1.5% 0; border-top:#000 0.05rem dashed;margin-top:.5%;} .ThirdBtn {padding:0.2rem 0.6rem 0.3rem 0.6rem; letter-spacing:0.1rem; background-color:#323232; white-space:nowrap; border-radius:0.2rem; display:inline-block; color:#AFDEF4; font-size:0.9rem; margin:0.2rem 0.4rem 0.4rem 0.2rem;} .ThirdBtn i {color:#FFF; margin-right:0.25rem;} .ThirdBtn a:link, .ThirdBtn a:visited {color:#FFF;} .ThirdBtn a:hover {color:#FF0; border-bottom:#FF0 0.05rem dashed;} .CurrThirdBtn a {color:#FF0!important; border-bottom:#FF0 0.05rem dashed;} /* ------------------- 内页二级栏目和正文采用上下布局 -------------------- */ .MainTop {} .TSubNav, .CurTSubNav {} .CurTSubNav a {} .TSubNav:hover {background-color:#B50081; transition:all .3s ease;} /***********************************************/ .MainTop {margin:auto; text-align:center;} .MainList {background-color:#FFFFFF;} .ArtiType {} .SubPgM {padding:1.5em 0em; text-align:left; display:inline-block;} .SubPgM span {height:3em; vertical-align:top; box-sizing:border-box;} .SubPgM span label {color:#E60012;} .SubPgM span:nth-child(1) {display:inline-block; width:0.25em; background-color:#E60012;} .SubPgM span:nth-child(2) {font-size:2.5rem; padding:0 0 0 0.2em; font-weight:bold; color:#333333; letter-spacing:0px; white-space:nowrap;} .SubPgM span:nth-child(2) tt {font-size:0.6em; color:#B5B5B5; line-height:2.0em; font-family:'Arial'; letter-spacing:-1px;} .TwoStage {display:table; margin:auto; width:80vw; max-width:1360px;} .TwoStage dl {display:table-row;} .TwoStage dl blockquote {display:table-cell; vertical-align:top; font-size:1rem; padding:0 0 1em 0; box-sizing:border-box;} .TwoStage dl blockquote:nth-child(1) {width:80%; min-width:800px;} .TwoStage dl blockquote:nth-child(2) {width:3%; min-width:20px; background:url(../images/Common/VerticalLA.png) repeat-y center top; opacity:0.1;} .TwoStage dl blockquote:nth-child(2) hr {width:1px; height:3vw!important; margin:auto; background-color:rgba(0,0,0,0.1); border-width:0;} .TwoStage dl blockquote:nth-child(3) {width:17%; min-width:100px; text-align:center; vertical-align:bottom; padding-bottom:1.5vw;} .TwoStage dl blockquote:nth-child(3)>span {font-size:2vw; font-weight:bolder; letter-spacing:3px;} .TwoStage dl blockquote:nth-child(3)>span tt {color:#E60C0C;} .RStageBox {width:100%; margin:0.4vw 0 0 0;} .RStageBox center:nth-child(1) {width:100%; padding-bottom:56.6%; border:#EEEEEE 1px solid; border-radius:0.3em; position:relative;} .RStageBox center:nth-child(1) dd {width:100%; height:100%; overflow:hidden; position:absolute; border-radius:0.3em;} .RStageBox center:nth-child(1) dd img {width:100%; height:auto; transform:scale(1);opacity:0.8;} .RStageBox center:nth-child(2) {padding:0.4em 0; text-align:center; font-size:0.9em; line-height:1.1em; color:#000000; opacity:0.5;} .RStageBox hr {border-width:0; height:0.6em;background:url(../images/Common/LineB.png) repeat-x left center; opacity:0.3;} .RStageBox:hover center:nth-child(1) dd img {transform:scale(1.2); opacity:1;} .RStageBox:hover center:nth-child(2) {opacity:1;} .HTitle {width:700px; margin:auto; color:#000000; padding:55px 0 60px 0;} .HTitle h4 {font-size:54px; color:#000000; font-weight:bolder; text-align:center;} .HTitle hr {border-width:0; height:2px; background-color:#A8D6BF; margin:20px 0 15px 0;} .HTitle h3 {color:#A5A5A5; font-size:54px; font-family:aileron-ultralight-webfont; font-weight:bold; text-align:center; letter-spacing:2px;} /******************************* 内页框架样式说明 *******************************/ /********************************* 内页的Banner ********************************* TBannerA: 传媒协会 1) 双行子,大字分屏 小字淡进 2) 采用table布局,由BannerContain>div支撑BannerDivA高度,在页面中手工写入 3) 好处在于文字可默认垂直居中布局 MoveIsImg: 党建阵地 1) 特点是子动画为1160*高度的png图,简化Css动画控制 2) 其宽度不这里设置,放在页面中,利用样式名DivMinWidth 4) 子动画图片作为背景放在TBannerB div中 *********************************************************************************/ .BannerContain {width:100%; margin:auto; background-repeat:no-repeat; background-position:center center; background-image:url(); background-size:auto 100%; /*用于放置banner的底图*/} .BannerContain>div {position:relative;} .BannerContain>div>div {position:absolute; height:100%; width:100%;} /* ----------------------------------------------------------- */ .TBannerA {display:table; height:100%; width:100%;} .TBannerA>div {display:table-cell; text-align:center; vertical-align:middle; position:relative;} .M_FenPin {font-size:0; position:relative; width:60%; left:0%; } .M_FenPin span {display:inline-block; vertical-align:top; overflow:hidden; position:relative; box-sizing:border-box; opacity:0; z-index:5; /*border:#EEE 0.05rem solid;*/} .M_FenPin span tt {position:relative; white-space:nowrap;} .M_FenPin span:nth-child(1) {text-align:right;} .M_FenPin span:nth-child(1) tt {right:-100%;} .M_FenPin span:nth-child(2) {text-align:left;} .M_FenPin span:nth-child(2) tt {left:-100%} .M_FenPin>h3 {position:absolute; z-index:1; background-repeat:no-repeat; background-position:center center; background-size:100% 100%; opacity:0; /*用于放置开屏动画的底图,比如传媒协会*/} /* ----------------------------------------------------------- */ .MoveIsImg {position:absolute; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:auto 100%; text-align:center; opacity:0; font-size:0;} .MoveIsImg>dd {display:inline-block; vertical-align:top; overflow:hidden; position:relative; box-sizing:border-box; width:50%; height:100%; border:rgba(0,0,0,0.1) 0px solid;} .MoveIsImg>dd img {position:absolute; height:100%; width:auto;} .MoveIsImg>dd:nth-child(1) img {right:-100%;} .MoveIsImg>dd:nth-child(2) img {left:-100%;} #Banner>h3 {position:absolute; width:16rem;/*最多8个字*/ height:1.8rem; line-height:1.8rem; font-size:1.8rem; font-weight:bolder; bottom:0; left:40%; bottom:11%; text-align:center; opacity:0; /*background-color:rgba(0,0,0,0.1);*/} .MainTit_Font {font-size:2rem; color:#000; font-weight:bolder; width:4rem;} @keyframes TBannerA_0 {from{right:-100%;} to{right:0%;}} @keyframes TBannerA_1 {from{left: -100%;} to{left:0%;}} .BannerCover {position:absolute; z-index:1; width:100%; height:100%; left:0%; background-color:rgba(0,0,0,1);} /********************************* 内页的Banner *********************************/ /***************************** 用于详情页的正文控制 *****************************/ /* 用于正文内Table的Css 永旺的店铺详情的名称 */ .ContentT {display:table; width:100%; border:#2597D5 1px solid; margin:auto; box-sizing:border-box; /*永旺的店铺介绍*/} .ContentT dl {display:table-row;} .ContentT dl dd, .ContentT dl dt {display:table-cell; vertical-align:middle; padding:5px 0px; border:#FFFFFF 1px solid; border-top-width:0px;} .ContentT dl dd {width:15%; background-color:#43A2D5; color:#FFFFFF; text-align:center; vertical-align:top; border-right:#DDD 1px solid;} .ContentT dl dt {width:80%; background-color:#DCEAF5; color:#000000; text-align:left; border-left:#999 1px solid; padding-left:10px;} .ContentT dl dt span {color:#FF0000;} .ContentT dl dt p {width:49%; display:inline-block; color:#888888; font-size:13px; line-height:18px; text-indent:0px;} .ContentT dl:nth-child(1) dd, .ContentT dl:nth-child(1) dt {border-top:#FFFFFF 1px solid;} /* 正文CSS控制轮播图 用于内页的Banner图文字动画,jquery实现,注意BannerDiv的height的调整 */ .LHSlide {position:relative; margin:auto; text-align:center; font-family:Arial; color:#FFF; overflow:hidden;} .LHSlide ul {width:9999px; transition:all 0.5s;} .LHSlide li {float:left; list-style:none; line-height:300px; font-size:36px;} .LHSlide, .LHSlide li {/*这里的width和height要手工设置*/width:900px; height:300px;} .LHSlide li img, .LHSlideAuto li img {width:100%; height:auto; margin:0px; max-width:900px;} .LHSlide .LHSlideAuto {/*自动播放*/animation: marginLeft 10.5s infinite;} .LHSlide li:nth-child(1) {background:#9FA8EF;} .LHSlide li:nth-child(2) {background:#EF9FB1;} .LHSlide li:nth-child(3) {background:#9FEFC3;} @keyframes marginLeft {0% {margin-left:0;} 28.5% {margin-left:0;} 33.3% {margin-left:-900px;} 62% {margin-left:-900px;} 66.7% {margin-left:-1800px;} 95.2% {margin-left:-1800px;} 100% {margin-left:0;}} /***************************** 用于详情页的正文控制 *****************************/ /********************************** 用于栏目单片文章的正文控制 **********************************/ .BriefA {/*样本:芘芘微莎 万盟数控,显示文章大标题和小标题,图片居右显示*/} .BriefA h2 {font-size:1.3rem!important; color:#000; padding-bottom:0!important} .BriefA h3 {display:inline-block; background:url(../Images/Common/LineA.gif) repeat-x center; padding:0 1.7rem!important; font-size:0.9rem!important; color:#6E6E6E; margin:00;} .BriefA h3 center {padding:0 0.3rem; background-color:#FFF; font-weight:normal; color:#6E6E6E;} .BriefAImg {width:240px; height:360px; margin:0 0 0.6rem 1rem!important; border-radius:0.4rem;} /********************************** 用于栏目单片文章的正文控制 **********************************/ .PgStyle0 {font-size:1.4rem!important; font-weight:bold; text-align:center; color:#b50081!important; border:1px solid #b62883; border-top:3px solid #b62883; padding:0.6rem 0; margin:3rem 0 1.6rem 0!important;} /** 非通用样式(炜尔申) 1) 这里的样式仅对当前网站有效 2) NoList:列表页面,表示没有列表信息内容,类似PC_Conntent.Css的NoArticle AdviceL: 留言列表 **/ .NoList {display:table; margin:25px auto; min-width:450px;} /*文章尚未录入的样式*/ .NoList div {display:table-cell; text-align:center; vertical-align:middle; padding:1.5em;; border:rgba(0,0,0,0.05) 1px solid;-webkit-font-smoothing:subpixel-antialiased; -webkit-font-smoothing:antialiased;} .NoList div img {width:150px; height:auto; opacity:0.1;} .NoList div span {font-size:1.9rem; letter-spacing:0.15em; color:#BBB;} .NoList div a {color:#999; font-size:14px; border:#EEE 1px solid; padding:6px 10px; border-radius:5px; background-color:rgba(0,0,0,0.02); display:inline-block;} .NoList div a:hover {color:#000; background-color:rgba(0,0,0,0.07);} /****************************** 用于留言板等小组件 ****************************** Advice_YW: 湖北永旺留言板 一行3个输入库,采用Table结构 SuggDiv:用于荷普药业,通用型 AdviceL: 留言列表 FInputDiv:用于上传域 1) 上传域个数不同,调整 div | div code | div i 这三个元素的 widt width margin-left 2) 如果三个上传域,对应值 80% 190px -10px 一个上传域 263% 280px 5px *********************************************************************************/ .FInputDiv {width:80%; text-align:left; display:inline-block; font-size:0; vertical-align:top; position:absolute; top:0; text-indent:initial;} .FInputDiv label, .FInputDiv code {display:inline-block; height:42px; line-height:42px;} .FInputDiv label {position:relative; width:73px; height:42px; text-align:center; background:url(../images/Common/IconEA.gif) no-repeat left top;} .FInputDiv label tt {color:#FFF; font-size:15px; line-height:38px; margin:initial;width:initial;} .FInputDiv label input[type=file] {position:absolute; top:0px; left:0px; width:73px; height:42px; z-index:1; background-color:#EEE; opacity:0;} .FInputDiv label:hover {background-image:url(../images/Common/IconE1A.gif); color:#FF0;} .FInputDiv label:hover tt {color:#FF0; border-bottom:#FF0 1px dashed;} .FInputDiv code {height:35px; line-height:32px; border-left:#BBB 1px solid; border-right:#BBB 1px solid; font-size:15px; background:url(../images/common/TileG.gif); text-indent:8px; white-space:nowrap; width:190px; position:relative; top:2px; margin-right:3px; color:#000; display:none;} .FInputDiv i {font-size:26px; display:none; position:relative; top:6px; cursor:pointer;} .SuggDiv {background-color:#F5F5F5; border:#C9C9C9 1px solid; font-size:0; padding:6px 2px 6px 10px;} .SuggDiv dd, .SuggDiv dt, .SuggDiv li {display:inline-block; line-height:25px; padding:3px 0; margin:2px 0; vertical-align:top;} .SuggDiv dd {width:15%; color:#565656; background-color:#DDD; text-align:right; font-size:13px;} .SuggDiv dt, .SuggDiv li {width:35%; text-align:left; padding:0 10px 0 8px;} .SuggDiv dt input[type="text"], .SuggDiv dt input[type="number"], .SuggDiv li textarea, .SuggDiv dt select {border:#ABACAD 1px solid; font-size:16px; line-height:28px;; color:#000; text-align:center; width:100%;} .SuggDiv li {width:85%; font-size:16px;} .SuggDiv dt textarea {text-align:left; height:60px; width:100%; padding:6px 8px; box-sizing:border-box;} .SuggDiv li btn {display:inline-block; margin:0 10px; width:66px; height:24px; text-align:center; font-size:13px; line-height:22px; background:url(../images/common/ReplyE.png) no-repeat center top;} .SuggDiv li btn a {color:#FFF;} .Advice_YW {display:table; width:93%; margin:auto; background-color:rgba(255,255,255,0.85);padding:6px; border-radius:10px;} .Advice_YW dl {display:table-row;} .Advice_YW dl dd {display:table-cell; width:33%; padding:12px 0px; text-indent:10px; font-size:15px; position:relative; } .Advice_YW dl dd input[type=text] {width:60%; height:30px; line-height:30px; border:#BBB 1px solid; color:#000; text-indent:5px;} .Advice_YW dl dd textarea {width:88%; padding:7px; line-height:25px; color:#000; font-size:17px; height:180px; border:#BBB 1px solid; background-color:rgba(255,255,255,0.7);} .AdviceL {display:table; width:99%; margin:auto; background-color:rgba(255,255,255,0.7);} .AdviceL dl {display:table-row;} .AdviceL dl:nth-child(odd) {background-color:#F8F8F8;} .AdviceL dl dd {display:table-cell; text-align:center; font-size:0.9em; font-family:Arial; vertical-align:middle; padding:0.3em 0em; color:#999; border-bottom:#BBB 1px solid; } .AdviceL dl dd:nth-child(1), .AdviceL dl dt:nth-child(1) {width:5%;} .AdviceL dl dd:nth-child(2), .AdviceL dl dt:nth-child(2) {width:82%;} .AdviceL dl dd:nth-child(3), .AdviceL dl dt:nth-child(3) {width:13%;} .AdviceL dl dd:nth-child(1) img {width:90%; height:90%; border-width:0em;} .AdviceL dl dd:nth-child(2) {border-left:#E5E5E5 1px solid; border-right:#E5E5E5 1px solid;} .AdviceL dl dd:nth-child(2) h3 {color:#888; line-height:1.1rem; width:98%; margin:auto; text-align:left;} .AdviceL dl dd:nth-child(2) h3 span {color:#465c95;} .AdviceL dl dd:nth-child(2) h3 tt {color:#999; display:block; text-align:right; border-top:#EEE 1px dashed; padding-top:0.4rem; margin-top:0.4rem;} .AdviceL dl dd:nth-child(2) h4 {color:#000; font-size:0.85rem; line-height:1.1rem; width:95%; margin:auto; border-top:#BBB 0.05rem solid;margin-top:0.4rem; padding:-0.4rem 0 0 0; text-align:left;} .AdviceL dl dd:nth-child(2) h4 span {color:#A40;} .AdviceL dl dd:nth-child(2) h4 tt {color:#999; border-bottom:#999 1px dotted;} .AdviceL dl dt {display:table-cell; text-align:center; background-color:#465c95; color:#FFF; font-size:14px; padding:8px 0px;} .AdviceL dl dt:nth-child(1) {font-size:0.8em;} .AdviceL dl dt:nth-child(2),.AdviceL dl dt:nth-child(1) {background-image:url(../Images/Common/VerticalL.png); background-repeat:no-repeat; background-position:right center;} /****************************** 用于留言板等小组件 ******************************/ /*************************** 栏目单片文章正文特性标题 ***************************/ .SubPgT {width:1160px; padding:30px 0 15px 0; font-size:36px; color:#5599FF; font-weight:bold; text-align:center; margin:auto; letter-spacing:6px; line-height:30px; background-color:#FFF;} .SubPgT span {font-size:18px; font-weight:bolder; letter-spacing:0px; font-family:Century,Verdana,Arial,sans-serif;} .SubPgTA, .SubPgTA1 {font-size:24px; color:#000;} .SubPgTB {display:inline-block;background:url(../Images/Common/LineA.gif) repeat-x center; padding:0 20px!important; font-size:15px; color:#6E6E6E; margin:7px 0px 10px 0px;} .SubPgTB center {padding:0 10px; background-color:#FFF;} .SubPgTA1 {text-align:center;} .SubPgTB1 {display:block; padding:7px 0px 15px 0px; margin:auto; white-space:nowrap; text-align:center;} .SubPgTB1 center {display:inline-block; background-color:#FFFFFF;} .SubPgTB1 center:before, .SubPgTB1 center:after {display:inline-block; content:"------"; margin-right:10px;} .SubPgTB1 center:after {margin-left:10px; margin-right:0px;} /*************************** 栏目单片文章正文特性标题 ***************************/ /******************************** 非通用样式(等分) ******************************* 北京永旺新闻列表 1) NewsDiv dd:nth-child(3n+1):float元素浮动后高度不一致导致错位的解决办方法 惠侬烟花产品展示 1) 采用inline-block,一行4个(23.5%),3个间距(2%) *********************************************************************************/ .NewsDiv {/*北京永旺新闻中心*/} .NewsDiv dd {float:left; vertical-align:top; width:31.5%; text-align:center; box-sizing:border-box;} .NewsDiv dd:nth-child(3n+1) {/*clear:left;*/} .NewsDiv dd:nth-child(3n+2) {/*width:37%; padding:0 2.75%; */} .NewsDiv dd h3 {width:100%; padding-bottom:66.66%;/*确定图片长高比例*/ overflow:hidden; vertical-align:top; position:relative; border-radius:0.3rem;} .NewsDiv dd h3 img {width:100%; height:100%; position:absolute; z-index:1; left:0; transform:scale(1);} .NewsDiv dd h3 center {width:100%; height:100%; position:absolute; z-index:2; padding:0!important;} .NewsDiv dd h3 center hr {width:0%; height:0.3rem; position:absolute; margin:0!important; border-width:0; transition:all .4s;} .NewsDiv dd h3 center hr:nth-child(1) {right:0; bottom:0;} .NewsDiv dd h3 center hr:nth-child(2) {top:0;} .NewsDiv dd h3 center hr:nth-child(3) {height:0%; width:0.3rem; left:0%;} .NewsDiv dd h3 center hr:nth-child(4) {height:0%; width:0.3rem; right:0%; bottom:0;} .HrBKColor {background-color:#000000;} .NewsDiv dd h4 {width:100%; height:4rem; line-height:4rem; color:#898989; font-size:0.85rem; text-align:left;} .NewsDiv dd h4 span {font-size:1.1rem; font-weight:bolder; color:#B62883; padding-right:1rem; border-right:#c9c6c6 1px solid;} .NewsDiv dd h5 {width:100%; height:4.5rem; padding:0 0 1rem 0; color:#000000; font-size:1.2rem; font-weight:bolder; line-height:1.5rem; text-align:left;} .NewsDiv dd h3 center:hover hr:nth-child(1), .NewsDiv dd h3 center:hover hr:nth-child(2) {width:100%; transition:all .7s ease;} .NewsDiv dd h3 center:hover hr:nth-child(3), .NewsDiv dd h3 center:hover hr:nth-child(4) {height:100%; transition:all .7s ease;} .NewsDiv dd h3:hover img {transform:scale(1.4); transition:all .7s ease;} .HrBKColor0 {background-color:#B62883;} .HrBKColor1 {background-color:#F39781;} .HrBKColor2 {background-color:#00B7EE;} .HrBKColor3 {background-color:#E60012;} .HrBKColor4 {background-color:#80C269;} .HrBKColor5 {background-color:#000000;} .HL_ProdContain {font-size:0; text-align:left;} .HL_Prod {display:inline-block; width:23.5%; margin:1% 2% 1% 0; box-sizing:border-box; font-size:1rem; vertical-align:top;} .HL_Prod:nth-child(4n) {margin-right:0;} .HL_Prod:nth-child(1), .HL_Prod:nth-child(2), .HL_Prod:nth-child(3), .HL_Prod:nth-child(4) {margin-top:0;} .HL_Prod center {display:table; width:100%; margin:auto; border-radius:0.5rem; background-color:#FFF; border:#D8D8D8 1px solid; box-shadow:0 0 12px rgba(0, 0, 0, 0.0); position:relative; top:0px; transition:all .3s ease .3s;} .HL_Prod center dl {display:table-row;} .HL_Prod center dl dd, .HL_Prod center dl dt {display:table-cell; position:relative; box-sizing:border-box; font-size:0.8rem; color:#000;} .HL_Prod center dl dd {padding-bottom:100%; vertical-align:top;} .HL_Prod center dl dd h3 {height:92%; width:92%; position:absolute; left:4%; top:4%; box-sizing:border-box; display:table-cell; overflow:hidden;} .HL_Prod center dl dd h3 li {position:absolute; z-index:5; right:5%; top:5%; width:2rem; height:2rem; background:url(../Images/WaterMark.png) no-repeat center center;background-size:contain; /*放置logo*/} .HL_Prod center dl dd h3 img {width:100%; height:100%; cursor:pointer; transform:scale(1); transition:all .3s ease;} .HL_ProdH3_0 {background:url(../Images/ProdBG_Img0.png) no-repeat center center; background-size:contain;} .HL_Prod center dl dt {padding:0 0.8rem; /*注意,这个控制图片及所有行的宽度*/} .HL_Prod center dl dt span {display:inline-block; width:50%; text-align:left;} .HL_Prod center dl dt span:nth-child(2) {text-align:right; } .HL_Prod center dl:nth-child(2) dt {position:relative;} .HL_Prod center dl:nth-child(2) dt h3 {position:relative; top:-0.3rem; height:2.2rem; text-align:center; line-height:1.1rem; font-weight:bolder; text-align:center; vertical-align:middle; font-size:1rem; display:table-cell; transition:all .4s ease;} .HL_Prod center dl:nth-child(3) dt {text-align:left; padding-bottom:0.3rem;} .HL_Prod center dl:nth-child(3) dt code {color:#979797;} .HL_Prod center dl:nth-child(3) dt code tt {color:#000;} .HL_Prod center dl:nth-child(3) dt code:nth-child(2) {float:right;} .HL_Prod center dl:nth-child(4) dt {font-size:0;} .HL_Prod center dl:nth-child(4) dt hr {height:0.1rem; border-width:0; opacity:0.2; background:url(../images/Common/LineC.gif) repeat-x center center; } .HL_Prod center dl:nth-child(5) dt {padding-top:0.6rem; padding-bottom:0.25rem;} .HL_Prod center dl:nth-child(5) dt span:nth-child(1) {color:#FF8003;} .HL_Prod center dl:nth-child(5) dt span:nth-child(1) tt {font-size:1.2rem;} .HL_Prod center dl:nth-child(5) dt span:nth-child(2) {position:relative; top:-0.2rem;} .HL_Prod center dl:nth-child(5) dt span:nth-child(2) tt {color:#FF8003; margin:0 0.15rem;} .HL_Prod center dl:nth-child(6) dt {padding-top:0.3rem; padding-bottom:1.0rem;} .HL_Prod center dl:nth-child(6) dt span code {background-color:#000; border-radius:0.3rem; color:#FFF; cursor:pointer; padding:0.2rem 0.6rem 0.2rem 0.6rem; /*黑底按钮*/} .HL_Prod center dl:nth-child(6) dt span code i {margin-right:0.2rem; font-size:0.9rem;} .HL_Prod center dl:nth-child(6) dt span code a {color:#FFF; border-bottom:#000 1px dashed;} .HL_Prod_Price {font-family:'Avanti'; font-size:1.6rem; font-weight:bolder; letter-spacing:0.1rem;} .HL_Prod_Price tt {margin-right:0.2rem; font-weight:normal;} .HL_Prod center:hover {box-shadow:0 0 12px rgba(0, 0, 0, 0.5); top:-0.6rem; transition:all .5s ease;} .HL_Prod center:hover dl:nth-child(2) dt h3 {color:#F00; transition:all .7s ease .4s;} .HL_Prod center:hover dl dd h3 img {transform:scale(1.2); transition:all .7s ease .3s;}; .HL_Prod center dl:nth-child(6) dt span code:hover i {color:#FAF02F;} .HL_Prod center dl:nth-child(6) dt span code:hover a {border-bottom:#FAF02F 1px dashed;} /*********************************** 非通用样式 *********************************/