/********************************** 标签默认值,从行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一致 外用字体: Rajdhani-Regular: 用于广告设计方面,稍细 Rasa-Regular:创意类PS字体,稍粗 Bandy:个性独特 Army:左细,右粗 STEINEMU:稍正规 Army: OpenSans-Bold:粗体,正式,后两个字体用时在增加本css Teko:长粗字体 Consolas 等宽英文字体 目前未用 /* ' ' ' ' ' ' ' ' ' ' } */ html {font-size:16px; -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} ul,li {margin:0px; padding:0px; list-style:none;} input,select {font-size:12px; font-weight:lighter;} a:link, a:visited {text-decoration:none; color:#999999;} a:hover {color:#000; text-decoration:none;} 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","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,"宋体","SimSun","仿宋";} table,div,center {margin:auto;} dd,dt,li,center,td {box-sizing:border-box;} body {margin:0px; padding:0px; text-align:center;} input[type=checkbox],input[type=radio] {position:relative; top:2px; margin:0 0.2em;} @font-face {font-family:'Rajdhani-Regular'; src:url('../css/WebUsed/Rajdhani-Regular.woff'), url('../css/WebUsed/Rajdhani-Regularr.ttf');} @font-face {font-family:'Rasa-Regular'; src:url('../css/WebUsed/Rasa-Regular.woff'), url('../css/WebUsed/Rasa-Regular.ttf');} @font-face {font-family:'Bandy'; src:url('../css/WebUsed/Bandy.ttf');} @font-face {font-family:'STEINEMU'; src:url('../css/WebUsed/STEINEMU.ttf');} @font-face {font-family:'Consolas'; src:url('../css/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动画 DotLine:Css生成点线,虚线,可控制间距,用于
DottedLine:一长两短的虚线 Txt_Strok:给文字描边 *********************************************************************************/ .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, {width:145px; height:40px; background-color:#CCCCCC; text-align:center; line-height:40px; font-size:22px; border-radius:5px; margin:auto;} ._buttonA a:link, ._buttonA a:visited {color:#000000;} ._buttonA a:hover {color:#FFFFFF; border-bottom:#FFFFFF 1px dashed;} ._buttonB {display:inline-block; color:#888888; line-height:1.6rem} ._buttonB hr {border-width:0; background-color:#000000; height:0.05rem; width:0%; position:relative; left:50%; margin:0; transition:all .3s ease;} ._buttonB:hover {color:#000000;} ._buttonB:hover hr {width:100%; left:0%; transition:all .5s ease;} ._enfont {font-family:Arial,Verdana,Helvetica,sans-serif;} ._applefont {font-family:Apple LiGothic Medium,"蘋果儷中黑", "微軟正黑體"} .CoordDiv {position:relative; width:0; height:0; z-index:10;} .DotLine {position:absolute; border-width:0; width:100%; margin-left:0%; height:1px; background-size:6px!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 20%, transparent 100%);} .DottedLine {position:relative; border-width:0; width:100%; margin:10px 0 10px 0; height:0.5px; 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%);} .Txt_Strok {text-shadow:0 1px #FFF, 1px 0 #FFF, -1px 0 #FFF, 0 -1px #FFF;} /********************************** 整体宽度布局 ********************************** FullWidthDiv 最外围Div,容器固定高度 EqualWidthDiv 主框架Div,农工党新版,PC端固定宽度(1324px),移动端另外版本) DivMinWidth 用于统一全局布局的框架最小宽度,与其它class配合使用 MinWidthDiv 内页列表或正文所在Div最新宽度. 注意与 DivMinWidth 的关系,如果两者不同,前者用于首页,一般用于外框 FixedPosDiv 位置固定的Div(脱离页面滚动影响).用于页面导航, FixedWidth 用于页面最外围table的固定宽度布局,要放在后面以便其优先级大于MainContain等 范例见农工党,但目前尚未完美 NavContain 和 SubPgN 直接在屏幕缩小时的匹配,后续再解决 FlexBoxDiv 用于弹性布局,保证最外围Div宽度一致.min-width:如没有width缩小自动跳转3G,就需要设置该值 目前两种样本 1)关山觉:87vw 注意,1920px下的87vw对应2560下的65vw,在htm页面下设置@media screen 2)华通:73vw(1920下1400宽) 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:contain; /*注意这里background-size:contain表示将图片宽度自动拉伸或缩小满屏 */} .FixedPosDiv {width:100%; height:1; position:fixed; text-align:center; z-index:1000; clear:both;} .MinWidthDiv {min-width:900px;} .FlexBoxDiv {width:87vw; max-width:1400px; min-width:1160px; text-align:center; margin:auto; /*弹性布局,保证两侧2vw的留白 clear:both;:防止前面的float影响,*/} .MainContain {display:table; width:100%; /* max-width:1000px; 农工党,不需要此,因为外围已使用EqualWidthDiv padding:0 88px */} .DivMinWidth {min-width:1076px;} .GlobeWidth {width:80vw; max-width:1360px; 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;} .DivideBlock {height:20px; width:100%;} .EqualWidthDiv {max-width:1324px; min-width:1076px; margin:auto; } .FixedWidth {width:1085px;} .EqualWidthDiv:after, .EqualWidthDiv:before, .FlexBoxDiv:after, .FlexBoxDiv:before, .FixedWidth:after, .FixedWidth:before {display:block; clear:both; content:"";} .BothSides_Shadow {box-shadow:-15px 0px 15px -15px rgba(0,0,0,0.6), 15px 0px 15px -15px rgba(0,0,0,0.6); padding:0 20px; box-sizing:border-box;} .ShadowBlock {display:table; width:100%;} .ShadowBlock dd {display:table-cell; position:relative; text-align:right;} .ShadowBlock dd:nth-child(2) {height:1px; width:1324px; background-color:#FFF;} .ShadowBlock dd:nth-child(1) center, .ShadowBlock dd:nth-child(3) center {position:absolute; z-index:1; top:-30px; height:60px; width:40px;} .ShadowBlock dd:nth-child(1) center {box-shadow:-15px 0px 15px -15px rgba(0,0,0,0.6); right:-40px; } .ShadowBlock dd:nth-child(3) {text-align:left; } .ShadowBlock dd:nth-child(3) center {box-shadow:15px 0px 15px -15px rgba(0,0,0,0.6); left:-40px;} /********************************** 通用,带前缀 *********************************/ /****************** 关山觉整屏遮罩,一级栏目竖形导航,含关闭按钮 ******************/ .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栏目标题大字) *********************************************************************************/ @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 _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}} /***************************** 通用CSS动画关键帧定义 ****************************/ /***************************** 页头和主导航的CSS说明 ***************************** SubDivPadding = .NavSubMenu h4 tt.height 1) 样式名:NavContain:外框 NavItem:一级栏目 NavSubMenu:二级栏目 2) 后台程序计算NavSubMenu的width(百分百),left(px)和height(用于css动画) 3) css参数是和HtmCrtFunc.php页面的CrtNavigate函数(Types=1)对应的 NavContentWidth = .NavContain.width - .NavContain li:nth-child(1).width SubTextTopPadding 和 SubTextLeftPadding = .NavSubMenu h4 a.padding 4) PC端与移动端为同一页面,移动端改用TopBar_Y 5) 使用@media screen and (max-width:350px)控制切换 6) TopBar:PC端,用于顶部,比如农工党,分左右两栏,左边两链接(农工党国家,省),右侧两链接(微信号,手机版) *********************************************************************************/ .TopBar {display:table; width:100%; background-color:#FFFFFF; border-bottom:#CCCCCC 1px solid;} .TopBar dd {display:table-cell; height:55px; vertical-align:middle; text-align:center; font-size:13px;} .TopBar dd:nth-child(1), .TopBar dd:nth-child(3) {width:165px;} .TopBar dd blockquote {max-width:1000px; height:100%; position:relative; margin:auto;} .TopBar dd span {float:right; width:75px;} .TopBar dd span a {color:#B50081; font-weight:bolder;} .TopBar dd span:hover {opacity:0.5;} .HomeTop {display:table; width:100%; } .HomeTop dd {display:table-cell; height:377px; vertical-align:bottom; text-align:center;} .HomeTop dd:nth-child(2), .HomeTop dd:nth-child(4) {width:88px; background-repeat:no-repeat; background-position:right bottom;background-image:url(../images/BarFrm_L.png);} .HomeTop dd:nth-child(2) div, .HomeTop dd:nth-child(4) div {position:relative; z-index:1; height:120px; top:30px; box-shadow:-15px 0px 15px -15px rgba(0,0,0,0.6)} .HomeTop dd:nth-child(4) div {box-shadow:15px 0px 15px -15px rgba(0,0,0,0.6);} .HomeTop dd:nth-child(3) {width:1148px; position:relative; vertical-align:top; /* min-width:900px,用 MinWidthDiv 代替 */} .HomeTop dd:nth-child(3) h2 {width:100%; height:} .HomeTop dd:nth-child(3) h3 {width:100%; height:30px; line-height:30px; font-size:0;} .HomeTop dd:nth-child(3) h3 span {display:inline-block; font-size:12px; width:50%; text-align:left; color:#015293; padding:0 2em; box-sizing:border-box;} .HomeTop dd:nth-child(3) h3 span {text-shadow:1px 1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, -1px -1px 0 #FFF; /*文字描边*/} .HomeTop dd:nth-child(3) h3 span:nth-child(2){text-align:right;} .HomeTop dd:nth-child(3) h3 span a:link, .HomeTop dd:nth-child(3) h3 span a:visited {color:#015293!important;} .HomeTop dd:nth-child(3) h3 span a:hover {color:#FF0000!important; border-bottom:#FF0000 1px dashed;} .HomeTop dd:nth-child(3) h3 span a:nth-child(1) {margin-right:70px;} /* .HomeTop dd:nth-child(3) h3 span:nth-child(2) a {position:relative; z-index:1; display:bolck;} .HomeTop dd:nth-child(3) h3 span:nth-child(2) a img {width:80px; height:80px; position:absolute; top:20px; left:-10px; opacity:0;} .HomeTop dd:nth-child(3) h3 span:nth-child(2) a:hover img {opacity:1;} */ .HomeTop dd:nth-child(3) h3 span:nth-child(2) {font-size:0; position:relative; top:2px;} .HomeTop dd:nth-child(3) h3 span:nth-child(2) input[type=text], .HomeTop dd:nth-child(3) h3 span:nth-child(2) a {display:inline-block; vertical-align:top; height:30px; line-height:30px; position:relative; box-sizing:border-box; border:#189DF0 1px solid; } .HomeTop dd:nth-child(3) h3 span:nth-child(2) input[type=text] {width:180px; background-color:#FFF; font-size:13px; color:#000; text-align:left; text-indent:5px; border-right-width:0;} .HomeTop dd:nth-child(3) h3 span:nth-child(2) input::placeholder {color:#DDD;} .HomeTop dd:nth-child(3) h3 span:nth-child(2) a {background-color:#189DF0; width:75px; color:#FFF!important; font-size:14px; text-align:center; border-left-width:0; text-shadow:0 0 0;} .HomeTop dd:nth-child(3) h3 span:nth-child(2) a i {margin-right:4px;} .ContentSearch {position:absolute; z-index:10; right:77px; top:2px; color:#999; font-size:12px; /*正文搜索复选框*/} .HomeTop dd:nth-child(3) h1 {height:115px; text-align:left; box-sizing:border-box; position:relative;; top:25px; width:61%; margin:0 auto; min-width:700px; } .HomeTop dd:nth-child(3) h1 span {position:absolute; width:100%; top:30px;} .HomeTop dd:nth-child(3) h1 span:nth-child(1) {left:-5%;} .HomeTop dd:nth-child(3) h1 span:nth-child(1) img {position:absolute; left:24%; transform:scale(0.5); opacity:0;} .HomeTop dd:nth-child(3) h1 span:nth-child(2) {display:block; width:43.5%; height:65px; right:3%; text-align:right; overflow:hidden;} .HomeTop dd:nth-child(3) h1 span:nth-child(2) img {position:absolute; left:-100%;} .HomeTop dd:nth-child(3) h1 span:nth-child(3) {display:block; width:100%; top:50px; text-align:center;} .HomeTop dd:nth-child(3) h1 span:nth-child(3) {width:100%; text-align:center; margin-top:0px; top:-10px;} .HomeTop dd:nth-child(3) h1 span:nth-child(3) img {width:600px; position:relative; opacity:0; width:70%;} @keyframes HomeTop_H1_Span_0_img_0 {from{transform:scale(0.5); opacity:0} to{transform:scale(1.0); opacity:1;}} @keyframes HomeTop_H1_Span_0_img_1 {from{left:24%; opacity:1; transform:scale(1.0);} to{left:6.9%; opacity:1; transform:scale(1.0);}} @keyframes HomeTop_H1_Span_1_img {from{left:-100%;} to{left:0%;}} .HomeTop dd:nth-child(3) h5 {height:60px; width:800px; margin:auto;} .HomeTop dd:nth-child(3) h5 {width:50%;} .HomeTop dd:nth-child(3) h5 input, .HomeTop dd:nth-child(3) h5 center {display:inline-block; vertical-align:top; height:100%; line-height:60px; } .HomeTop dd:nth-child(3) h5 input {width:70%; border:#0068B7 1px solid; box-sizing:border-box; font-size:18px; color:#000; text-indent:10px;} .HomeTop dd:nth-child(3) h5 input::placeholder {color:#CCC; font-size:18px; t} .HomeTop dd:nth-child(3) h5 center {width:30%; background-color:#0068B7; font-size:20px; color:#FFF; text-align:center; cursor:pointer;} .HomeTop dd:nth-child(3) h5 center:hover code {color:#FFFF00; border-bottom:#FFFF00 1px dashed;} .HomeTop dd:nth-child(3) h6 {width:100%; height:100px; position:absolute; bottom:0px; background-color:#298EC5; border-top:rgba(255,255,255,0.6) 1px solid;/* 农工党的 #2E7CC1:此颜色值为全局值 */} .HomeTop dd:nth-child(4) {background-position:left bottom;background-image:url(../images/BarFrm_R.png);} .HomeTop dd:nth-child(1) blockquote, .HomeTop dd:nth-child(5) blockquote {height:122px; background-color:#EEE; width:100%; border-top:#AAA 1px solid;} .HomeTop dd:nth-child(1) blockquote p, .HomeTop dd:nth-child(5) blockquote p {height:59px; background-color:#146a9B;} .NavContain {display:flex; width:100%; height:100%; font-size:18px; align-items:center; justify-content:space-between;} .NavContain a {text-align:center; display:inline-block; width:100%; color:#FFF; height:100%; background-color:rgba(255,255,255,0);} .NavContain a span {position:relative; text-align:center; top:40%;} .NavContain a span hr {height:1px; border-width:0; border-bottom:#FF0 1px dashed;background-color:transparent; opacity:0; width:0%; position:absolute; left:50%; top:16px; transition:all .3s ease;} .NavContain a:hover {background-color:rgba(255,255,255,0.2);} .NavContain a:hover span {color:#FF0;} .NavContain a:hover span hr {opacity:1; width:100%; left:0%; transition:all .5s ease;} .WrapMenu {width:100vw; height:100vh; overflow:hidden; position:absolute; top:0;left:100vw; background:rgba(0,0,0,1); display:table; z-index:1000;} .WrapMenu dd {display:table-cell; text-align:center; vertical-align:top; height:100%; position:relative;} .WrapMenu dd:nth-child(1) {width:80vw; text-align:left;} .WrapMenu dd:nth-child(2) {width:20vw; background-color:#002E73; text-align:right; display:none; /*display:取消右边条,北京永旺提供新图片*/} .WrapMenuLeftImg {position:absolute; top:0; z-index:0; left:0; width:100%; height:100%; opacity:1/*0.4*/; background:url(../images/WrapMenuImg.jpg) no-repeat left top;background-size:auto 100%;} .WMenuA {display:table; width:100%; position:relative;z-index:1;} .WMenuA dl {display:table-row;} .WMenuA dl dt {display:table-cell; color:#FFFFFF; vertical-align:middle; text-align:center;} .WMenuA dl:nth-child(1) dt {height:10vh; vertical-align:top; text-align:right;} .WMenuA dl:nth-child(1) h4 {display:inline-block; width:2.1em; height:2.1em; border-radius:50%; padding:0px; vertical-align:top; text-align:center; margin:1rem 3rem 0 0; background-color:rgba(255,255,255,0)} .WMenuA dl:nth-child(1) h4 img {height:3em; width:auto; border-width:0px; opacity:0.8; vertical-align:middle;} .WMenuA dl:nth-child(2) dt {height:80vh; opacity:0;} .WMenuA dl:nth-child(2) img {height:80%; width:auto; opacity:0.3;} .WMenuA dl:nth-child(3) dt {height:10vh;} .WMenuB {height:10vh; line-height:10vh; font-size:2.2rem; opacity:0; position:relative; top:2vw;} .WMenuB a {color:#FFFFFF;} .WMenuC {width:30vw; height:2rem; line-height:2rem; background-color:#AE007A; border:#FF0000 1px solid; margin:auto;} @keyframes WrapMenu_In {from{left:100vw;} to{left:0vw;}} @keyframes WrapMenu_Out {from{left:0vw;} to{left:100vw;}} @keyframes WMenuB_In {from{top:2vw; opacity:0;} to{top:0vw; opacity:1;}} @keyframes WMenuB_Out {from{top:0vw; opacity:1;} to{top:2vw; opacity:0;}} @keyframes VerticalBarIn {from{height:0vh;} to{height:80vh;}} @keyframes VerticalBarOut {from{height:80vh;} to{height:0vh;}} .WrapMenu_In {animation:WrapMenu_In 0.5s forwards;} .WrapMenu_Out {animation:WrapMenu_Out 0.3s forwards;} @keyframes NavFadeIn {from{top:0vw; opacity:0;} to{top:1vw; opacity:1}} @keyframes NavFadeOut {from{top:1vw; opacity:1;} to{top:0vw; opacity:0}} .NavFadeIn {animation:NavFadeIn 1s ease 0s 1 normal forwards;} .NavFadeOut {animation:NavFadeOut 0.5s ease 0s 1 normal forwards;} /************************************ 页头 ************************************/ /****************************** 固定沿右侧滚动条 *******************************/ .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:#000000; 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 {display:table; width:100%;} .FootBar dl {display:table-row;} .FootBar dl dd {display:table-cell; width:25%; margin:10px 0; vertical-align:middle; text-align:left; color:rgba(255,255,255,0.7); font-size:12px; line-height:25px;} .FootBar dl dd:nth-child(1), .FootBar dl dd:nth-child(5) {width:4.5%; vertical-align:top; padding:0; position:relative;} .FootBar dl dd:nth-child(1) blockquote {position:absolute; top:20px; left:100%; width:2080%;} .FootBar dl dd:nth-child(1) blockquote span {display:inline-block; margin-left:15px; width:18.5%; color:#FFF; line-height:35px; height:35px; border-radius:5px; text-align:center; background-color:#FFF; box-sizing:border-box;} .FootBar dl dd:nth-child(1) blockquote span:nth-child(1) {margin-left:0; background-color:#007EFF; width:15%; font-size:16px; letter-spacing:1px;} .FootBar dl dd:nth-child(1) blockquote span select {width:85%; margin:0 auto; border:#CCC 1px solid;} .FootBar dl dd:nth-child(3) {text-align:center; width:41%;} .FootBar dl dd:nth-child(4) {text-align:right;} /************************************ 页脚
************************************/ /******************************* 内页框架样式说明 ******************************** 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) *********************************************************************************/ .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; box-sizing:border-box; position:relative;} .MainLeft {width:26.3%; text-align:left;} .MainLeft ul {} .MainLeftWidth {width:83.3%; border-right:#F4F7FA 1px solid;/*必须使用center样式,用display:none控制内页页面是否显示一级栏目名称*/} .MainRight {width:73.7%; } .ColNameDivide {height:5px;} .SubPgN {position:relative; font-size:0; background-color:#F5F5F5; border-bottom:#189DF0 3px solid;} .SubPgN>label, .SubPgN>tt {display:inline-block; vertical-align:top; height:3.3em; line-height:3.3em; box-sizing:border-box;} .SubPgN>tt {width:100%; font-size:14px; color:#434343; text-align:left; padding:0.4em 0 0 1em;} .SubPgN>tt tt {color:#898989;} .SubPgN>tt i {margin:0 8px;} .SubPgN>tt a {display:inline-block; color:#434343; position:relative;} .SubPgN>tt a hr {border-width:0; height:1px; width:0%; position:absolute; top:1.8em; left:50%; background-color:rgba(0,0,0,0.55); transition:all 0.3s;} .SubPgN>tt a:hover hr {width:100%; left:0%; transition:all 0.6s;} .SubPgN>label {position:relative; font-size:14px; overflow:hidden;} .SubPgN>label span {position:absolute; left:-60%; font-size:1.5rem; font-weight:bolder; opacity:1} .SubPgN dd {} /* 内页一级栏目显示及二级栏目导航 */ .LMainColName {padding:10px 0 13px 15px; border-bottom:#054A83 2px solid;border-top:#054A83 2px solid;margin:0; background-color:#F6F8Fb; text-align:left;} .LMainColName img {width:auto; height:28px;} .LMainColName tt {color:#2387F0; font-size:22px; font-weight:bolder; letter-spacing:2px; position:relative; top:4px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} .LSubNav, .CurLSubNav, .LSubNavAll, .LSubNavDisabled {height:35px; line-height:35px; font-size:16px; padding:0 15px; border-bottom:#DDD 1px solid; overflow:hidden; position:relative;} .LSubNav {display:none;} .CurLSubNav {display:block; background:url(../images/In_BackImg_2.png) no-repeat center center; background-size:100% 100%;} .CurLSubNav a {color:#FFF;} .LSubNav a {color:#1B1B1B;} .LSubNav:hover {background-color:#4097F5;} .LSubNav:hover a {color:#FF0; border-bottom:#FF0 1px dashed;transition:all .6s ease 0.0s;} .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;} /***********************************************/ .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布局,由TBannerA div支撑底图高度,在页面中手工写入 3) 好处在于文字可默认垂直居中布局 4) 两行字 h3,h4对应大文字(北京永旺,两种分屏动画) h5用于小文字 5) 大字 大小3.5rem,字间距0.2rem,目前按最大5这个字算 *********************************************************************************/ .BannerContain {width:100%; margin:auto; position:relative; background-repeat:no-repeat; background-position:center center; background-image:url(); /*用于放置banner的底图*/} .BannerCover {position:absolute; z-index:1; width:100%; height:100%; left:0%; background-color:rgba(0,0,0,1);} .TBannerA {display:table; margin:auto;} .TBannerA div {display:table-cell; text-align:center; vertical-align:middle; color:#000000; font-size:1rem; position:relative;} .TBannerA div h3, .TBannerA div h4 {font-size:3.5rem; font-weight:bolder; letter-spacing:0.4rem; margin:auto; position:relative;} .TBannerA div h3 {display:inline-block; width:10rem; height:4.5rem; overflow:hidden;} .TBannerA div h3 span {position:absolute; width:20rem; height:4.5rem; opacity:0;} .TBannerA div h3:nth-child(1) span {left:0%;} .TBannerA div h3:nth-child(2) span {right:0%;} .TBannerA div h4 {width:20rem; height:4.5rem;} .TBannerA div h4 span {display:inline-block; width:10rem; height:100%; position:absolute; left:0rem; overflow:hidden;} .TBannerA div h4 span:nth-child(2) {left:10rem;} .TBannerA div h4 span tt {position:absolute; white-space:nowrap; width:20rem; left:10.2rem;} .TBannerA div h4 span:nth-child(2) tt {left:-20rem} .TBannerA div h5 {font-size:1.8rem; line-height:2.28rem; position:relative; opacity:0;} @keyframes TBannerA_0 {from{left:10rem;} to{left:0.2rem;}} @keyframes TBannerA_1 {from{left:-20rem;} to{left:-9.8rem;}} @keyframes SlideDAni_a {from{transform:scale(1.4); opacity:0; top:-3vw;} to{transform:scale(1); opacity:1; top:0vw;}} /********************************* 内页的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;}} /***************************** 用于详情页的正文控制 *****************************/ /************************** 栏目单片文章正文控制(弹性) ************************* 外围包围元素使用 blockquote,避免造成CSS交互的影响 BriefA: 荷普药业的公司简介,正文右上显示图片的css Brief0: 1) 关山觉公司简介,使用wow实现进场动画 2) 因此读取后台正文时,利用AboutStatic.asp中程序预先完成对正文的文字图片新排版,再传到前台页面 3) 使用此CSS完成排版,一行三列,图片,段落文字交错排版 4) WOW在捆绑元素时,会自动设置visibility=hidden,如果右侧也使用dd,会导致右侧WOW无效果(因此此时右侧的dd的visibility=hidden,因为右侧的WOW是捆绑在h3上的) EnvirImg 1) 关山觉公司环境,模仿中信建筑页面 2) 将图片设为背景图.利用CSS改变dd的width完成图片的滑动门(手风琴)动画 3) 尽量利用CSS动画 4) 一行只放5张图片 比列数据 1920下,中信建筑尺寸 1390(外包围) 590(大图长) 190(小图长) 10(图间隔) 折算成百分比: 100 42.4 13.6*4=55.4 0.7*4=2.8 本站优化百分比: 100 43 13.5*4=54 0.75*4=3 大图片 590*450 折算成 长高比: 43% * 33% 小图片: 190*450 折算成 长高比: 13.5% * 33% ContentBCover, ContentBMain 1) 两个div配合使用,将关山觉的合作伙伴 2) ContentBMain使用Table结构,以便内容可在其中垂直居中 **/ /************************** 栏目单片文章正文控制(弹性) *************************/ .BriefA {width:100%; margin:auto; padding-top:1em; border:#F6F6F6 1px solid;} .Brief0 {display:; margin-bottom:1.3vw; width:100%; /*font-size:0;*/ /*1270 三列 左560 右615*/} .Brief0:last-child { margin-bottom:0vw;} .Brief0 dd, .Brief0 dt {display:inline-block; vertical-align:top; text-align:left; font-size:1.2rem; color:#5F636A;} .Brief0 dd p {line-height:2em; text-align:justify; text-indent:2em; /*文字,注意:p标签内不能有h标签*/} .Brief0 dd center {width:100%; position:relative; padding-bottom:85%; background-repeat:no-repeat; background-position:center center; background-size:100% auto; /*图片以背景图方式放入*/} .Brief0 dd center h3 {width:100%; height:100%; position:absolute; z-index:1; background-color:#FFFFFF; top:0; opacity:1;} .Brief0>dd:nth-child(1) {width:46%; } .Brief0>dd:nth-child(2) {width:8%;} .Brief0 dd:nth-child(3) {width:46%; text-align:right;} .EnvirImg {width:100%; margin:auto; box-sizing: border-box; overflow:hidden;} .EnvirImg center {display:table; width:100%; background-color:#FFF;} .EnvirImg center dd, .EnvirImg center dt {display:table-cell; vertical-align:top;} .EnvirImg center dd {width:13.5%; padding-bottom:33%; position:relative; z-index:1; background-repeat:no-repeat; background-position:left center; background-size:auto 100%; opacity:0.5;} .EnvirImg center dd:last-child {width:43%; opacity:1;} .EnvirImg center dt {width:0.75%; padding-bottom:33%;} @keyframes EnvirImg_0 {0{width:13.5%; opacity:0.5;} 50%{width:43%;opacity:0.5;} 100%{width:43%;opacity:1;}} @keyframes EnvirImg_1 {0{width:43%; opacity:1;} 50%{width:13.5%;opacity:1;} 100%{width:13.5%;opacity:0.5;}} .EnvirImg_0 {animation:EnvirImg_0 0.8s forwards;transition:all;} .EnvirImg_1 {animation:EnvirImg_1 0.8s forwards;transition:all;} .ContentBCover {position:absolute; z-index:1; left:0%; width:100%; background-color:#DDD;} .ContentBCover span {display:inline-block; margin:0 auto; font-size:2em; font-weight:bolder; opacity:1; color:rgba(0,0,0,0.2); text-align:center;} .ContentBCover span i {font-size:1.2em;} .ContentBMain {display:table; width:100%; margin:auto; background:url() no-repeat center center; margin-bottom:1.3em; background-size:100%;100%;} .ContentBMain dd {display:table-cell; text-align:center; vertical-align:middle;} /*说明 1) 框架总宽度:75vw;一排6个,float排列 2) 单元格宽度12.5,内部分为h3,h4放置图片和合作伙伴名,利用dd的padding确定间隔 3) 结算dd单元格高度: */ .ContentBMainA {width:100%; padding:2.5em 0;} .ContentBMainA div {display:block; width:84vw; margin:auto;} .ContentBMainA div dd {float:left; width:14vw; vertical-align:top; opacity:0; padding:0.5em 0em; box-sizing:border-box; position:relative;} .ContentBMainA div dd center {display:table; width:12.5vw; margin:auto; border-radius:0.3vw; border:#EEE 1px solid; background-color:#DDD;} .ContentBMainA div dd center h3 {display:table-cell; height:12.5vw; vertical-align:middle;} .ContentBMainA div dd center h3 img {margin:auto; width:85%; height:auto; opacity:0;} .ContentBMainA div dd p {width:12.5vw; font-size:1vw; color:#FFFFFF; opacity:0.75; text-align:center; padding:0.3em 0 0.4em 0; white-space:nowrap; margin:auto; overflow:hidden;} .ContentBMainA div dd:hover center {background-color:#FFF;} .ContentBMainA div dd:hover center h3 img {transform:scale(1.1); transition:all 0.4s ease-out;} .ContentBMainA div dd:hover p {opacity:1;} .Parter {position:relative; display:table; margin:0 auto;} .Parter li {display:table-row;} .LogoADiv {display:table-cell; width:14vw; height:14vw; overflow:hidden; vertical-align:middle;} .LogoADiv span {position:relative; display:block; width:65%; height:65%; background-color:#000; margin:auto; transform:rotate(45deg); border-radius:2px;} .LogoADiv span tt {display:block; width:100%; height:100%; background-color:#FFF; opacity:0.8; border-radius:2px; pointer-events:auto; transition:all;} .LogoImg {position:relative; width:0; height:0; z-index:1;} .LogoImg img {width:7vw; height:auto; left:-10.5vw; top:5.1vw; position:absolute; transition:all 0.4s ease-out;} .imgA {background-color:rgba(0,0,0,0)!important;} .LogoADiv:hover span tt {opacity:1;transition:all;} .LogoADiv:hover+h5 img {transform:scale(1.3);transition:all 0.4s ease-out;} /********************************** 最外框使用 blockquote **********************************/ /*************************** 栏目单片文章正文特性标题 ***************************/ .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元素浮动后高度不一致导致错位的解决办方法 NewsACss,NewsACss:用于聚合页(北京永旺店铺) AnchorColumn:用于锚点页(北京永旺促销活动) *********************************************************************************/ .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;} .NewsDiv_Y {display:none;/*北京永旺新闻中心移动端*/} .NewsDiv_Y dd {float:left; vertical-align:top; width:50%; padding:0 1% 0 2%; text-align:center; box-sizing:border-box;} .NewsDiv_Y dd:nth-child(2n) {padding:0 2% 0 1%;} .NewsDiv_Y dd:nth-child(2n+1) {clear:left;} .NewsDiv_Y dd h3 {width:100%; padding-bottom:66.6%; overflow:hidden; vertical-align:top; position:relative; border-radius:0.3rem;} .NewsDiv_Y dd h3 img {width:100%; height:100%; position:absolute; z-index:1; left:0; transform:scale(1);} .NewsDiv_Y dd h4 {width:100%; height:4rem; line-height:4rem; color:#898989; font-size:0.95rem; text-align:left;} .NewsDiv_Y dd h4 span {font-size:1.2rem; color:#B62883; padding-right:1rem; border-right:#c9c6c6 1px solid;} .NewsDiv_Y dd h5 {width:100%; padding:0 0 1rem 0; color:#000000; font-size:1.3rem; font-weight:bolder; line-height:1.9rem; text-align:left;} .NewsDiv_Y_More {margin:1.3rem auto; padding:1rem 1.7rem; font-size:1.3rem; color:#000000; border:#989898 0.1rem solid; position:relative; top:-0.6rem; display:none;} .FellowUsBar {width:100%; display:table;} .FellowUsBar dd {width:33.33%; display:table-cell; text-align:center;} .FellowUsBar dd blockquote {padding:0.9rem 0;} .FellowUsBar dd center {display:inline-block; width:130px; height:2.2rem; line-height:2.2rem; background-color:#B62883; color:#FFFFFF; text-align:center; border-radius:1.2rem;} .FellowUsBar_Y {text-align:center; width:90vw; margin:auto; color:#FFFFFF;} .FellowUsBar_Y h3 {font-size:1.3rem; line-height:2.7rem; padding-top:2.3em; color:#DDDDDD;} .FellowUsBar_Y h3 span {font-size:2.8rem; font-weight:bolder; display:block; color:#FFFFFF;} .FellowUsBar_Y p {font-size:1.3rem; padding:1.7rem 0 2.7rem 0;} .FellowUsBar_Y h4 {width:45vw; height:5.1rem; line-height:5.1rem; text-indent:1.5rem; font-size:1.3rem; text-align:left; margin:1.2rem auto; box-sizing:border-box; background-color:#AE007A; border-radius:0.3rem;} .FellowUsBar_Y h4 img {width:auto; height:2.5rem; position:relative; top:0.6rem;} .FootBar_Y {display:none; width:98vw; margin:auto;} .FootBar_Y dd {width:35vw; display:inline-block; font-size:1.1rem; color:#FFFFFF; vertical-align:top;} .FootBar_Y dd a {color:#FFFFFF;} .FootBar_Y dd a img {width:95%; height:auto; margin:0.5rem 0;} .FootBar_Y dd:nth-child(2) {width:63vw; text-align:right; line-height:2.8rem;} .FootBar_Y dt {width:100%; text-align:center; margin-top:0.3rem; border-top:#343434 1px solid; padding:0.4rem 0 0.3rem 0; font-size:0.85rem; line-height:1.6rem; color:#AAAAAA;} .MainTop_Y {width:100%; height:auto; text-align:center; background-color:#282828; padding:1.1rem 0em 1.1rem 0em;margin:0; clear:both; position:fixed; z-index:100;/*二级栏目所在ul样式*/} .MainTop_Y li {font-size:1.5rem; box-sizing:border-box;} .SHover, .SHoverA {display:inline-block; text-align:center; margin:0 0.3rem;} .SHover a, .SHoverA a {display:inline-block; height:2.3rem; line-height:2.3rem; padding:0 1rem; border:rgba(255,255,255,0.4) 1px solid; border-radius:0.3rem; white-space:nowrap; color:#FFFFFF;} .SHoverA {} .SHoverA a {color:#000000; background-color:#7ECEF4; border:#282828 1px solid; font-weight:bolder;} .SHoverMarginTop {margin-top:0.6em!important;} .AddiShow {width:100%; margin:auto; text-align:left;} .AddiShow span, .AddiShow tt {display:inline-block; width:7.14rem; height:2.86rem; line-height:2.86rem; margin: 0 3px 5px 0; font-size:1.1rem; text-align:center; /*公司动态显示年份*/} .AddiShow span {background-color:#EEEEEE; border:#EEEEEE 1px solid; color:#000000;} .AddiShow span:hover {background-color:#FFFFFF; border:#B62883 1px solid; color:#B62883;} .AddiShow tt {background-color:#FFFFFF; border:#B62883 1px solid; color:#B62883;} .NewsACss {display:table; margin:0 auto; border-collapse:collapse; width:100%; /*永旺店铺详情显示*/} .NewsAcss tr, .NewsACssA tr {display:table-row;} .NewsACss tr td, .NewsACss tr dd, .NewsACssA tr td {display:table-cell; text-align:left; font-size:1.15rem; line-height:1.7rem; box-sizing:border-box;} .NewsACss tr td, .NewsACss tr dd {vertical-align:middle; padding:1rem 1.2rem; border:#B5B5B5 1px solid;} .NewsACss tr td img {width:100%; height:atuo;} .NewsACss tr td:nth-child(1) {text-align:center; background-color:#FDF6F7; white-space:nowrap; padding:1rem 0rem;} .TitleCell {color:#FFFFFF; background-color:#313131!important; } .NewsACss tr td a {display:inline-block; color:#FFFFFF; font-weight:bold; padding:0.6rem 0.9rem; border-radius:0.3rem; letter-spacing:2px; background-color:#B50081} .NewsACss tr td a:hover {opacity:0.5;} .NewsACssA {display:table; margin:auto; width:100%; border-width:0; /*小Table*/} .NewsACssA tr td {vertical-align:top; border-width:0; padding:0 0 0 1.2rem;} .NewsACssA tr td:nth-child(1) {white-space:nowrap; background-color:#FFFFFF; padding:0; text-align:right;} .AnchorColumn {width:100%; margin:auto; display:none;} .AnchorColumn h3 {text-align: center; padding-bottom:1.7rem; position:relative;} .AnchorColumn h3 hr {height:3px; background-color:#B50081; position:absolute; width:100%; top:0.3rem; border-width:0; z-index:1;} .AnchorColumn h3 span {display:inline-block; background-color:#FFFFFF; padding:0 1.2rem; color:#B50081; line-height:1.6rem; font-size:1.6rem; font-weight:bolder; margin:auto; position:relative; z-index:2;} .AnchorColumn blockquote {display:block; width:100%; padding-bottom:4rem;} .AnchorColumn blockquote dd {display:inline-block; width:49%; vertical-align:top; font-size:0; margin:auto;} .AnchorColumn blockquote dd img {width:100%; height:auto;} .AnchorColumn blockquote dd h4 {width:90%; display:table; margin:auto;} .AnchorColumn blockquote dd h4:nth-child(2) {margin-top:1.2rem;} .AnchorColumn blockquote dd h4 span {display:table-cell; font-size:1.15rem; color:#313131; text-align:left; vertical-align:top;} .AnchorColumn blockquote dd h4>span:nth-child(1) {width:25%; font-weight:bolder; line-height:1.7em;} .AnchorColumn blockquote dd h4>span:nth-child(2) {width:75%; line-height:2rem;} .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;} /*********************************** 非通用样式 *********************************/