/********************************** 标签默认值,从行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一致 7)此文件中的样式一般用于通用性Css,列表型不放在这里 外用字体: Rajdhani-Regular: 用于广告设计方面,稍细 Rasa-Regular:创意类PS字体,稍粗 Bandy:个性独特 Army:左细,右粗 STEINEMU:稍正规 Army: OpenSans-Bold:粗体,正式,后两个字体用时在增加本css Teko:长粗字体 Consolas 等宽英文字体 目前未用 /* ' ' ' ' ' ' ' ' ' ' } */ html {font-size:14px; -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} ul,li {margin:0px; padding:0px; list-style:none;} dl {display:table-row;} 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-align:left; 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;} input[type=checkbox],input[type=radio] {position:relative; top:2px; margin:0 0.2em;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#EEE;} @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:#CCC; text-align:center; line-height:40px; font-size:22px; border-radius:5px; 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:#000000;} ._buttonB:hover hr {width:100%; left:0%; transition:all .5s ease;} ._enfont {font-family:Arial,Verdana,Helvetica,sans-serif;} ._font_smoothingt {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} .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配合使用 FixedWidth 用于页面最外围table的固定宽度布局,要放在后面以便其优先级大于MainContain等 FixedPosDiv 位置固定的Div(脱离页面滚动影响).用于页面导航, MinWidthDiv 内页列表或正文所在Div最新宽度. 注意与 DivMinWidth 的关系,如果两者不同,前者用于首页,一般用于外框,范例见农工党 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 北京永旺 max-width:1000 左:244 中间:1 右:755 SecondNav: 内页放置第二个二级栏目导航(水平,炜尔申) *********************************************************************************/ .FullWidthDiv {width:100%; margin:auto; background-repeat:no-repeat; background-position:center top;background-size:contain; /*注意这里background-size:contain表示将图片宽度自动拉伸或缩小满屏 */} .FixedPosDiv {width:100%; height:1px; position:fixed; text-align:center; z-index:1000; clear:both;} .FlexBoxDiv {width:87vw; max-width:1400px; min-width:1160px; text-align:center; margin:auto; /*弹性布局,保证两侧2vw的留白 clear:both;:防止前面的float影响,*/} .MinWidthDiv {min-width:900px;} .DivMinWidth {min-width:1076px;} .MainContain {display:table; width:100%; width:1200px; /* 农工党,不需要此,因为外围已使用EqualWidthDiv padding:0 88px */} .GlobeWidth {width:1120px; border:#DDD 1px solid; border-top-width:0px; border-bottom-width:0px;} .ElasticMove {transition:all 1.5s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s!important;} .DivideBlock {height:30px; width:100%;} .EqualWidthDiv {width:100%; max-width:1000px; text-align:center; margin:auto;} .FixedWidth {width:1200px;} .EqualWidthDiv:after, .EqualWidthDiv:before, .FlexBoxDiv:after, .FlexBoxDiv:before, .FixedWidth:after, .FixedWidth:before {display:block; clear:both; content:"";} .SecondNav {text-align:center; width:100%; padding:50px 0 10px 0; border-bottom:#DDD 1px solid;} .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端,用于顶部,比如农工党,分左右两栏,左边两链接(农工党国家,省),右侧两链接(微信号,手机版) 7) HomeTop:用于页面顶部Div,一般使用Table布局 *********************************************************************************/ .TopBar {display:table;); /*页面顶部导航*/} .TopBar dd {width:270px; display:table-cell; height:90px; text-align:left; vertical-align:middle;} .TopBar dd:nth-child(2) {width:850px; text-align:right;} .HomeTop {display:flex; justify-content:flex-end; align-items:center; height:35px; /*采用flex布局,单元格左对齐,justify-content:flex-end;实现第一例的弹性*/} .HomeTop dd i {font-size:19px; } .HomeTop dd:nth-child(1) {width:100%; } .HomeTop dd:nth-child(2) {width:145px; text-align:right; color:rgba(255,255,255,0.7); position:relative; } .HomeTop dd:nth-child(2) span {height:35px; padding:0 20px 0 7px; display:inline-block; position:relative; z-index:2; white-space:nowrap; background-color:#5C5C5C; box-sizing:border-box; line-height:34px; /*注意,这里的line-height要不HomeTop中的height少一个像素*/ } .HomeTop dd:nth-child(2) span tt {margin:0 8px; } .HomeTop dd:nth-child(2) span i:nth-child(3) {position:relative; opacity:0.5; top:3px; font-size:22px;} .HomeTop dd:nth-child(2) center {width:100%; background-color:#FFF; border:#BBB 1px solid; position:absolute; z-index:1; right:0px; top:-10px; padding:6px 0 13px 0; font-size:14px;} .HomeTop dd:nth-child(2) center img {width:25px; position:relative; top:-2px;} .HomeTop dd:nth-child(3), .HomeTop dd:nth-child(4) {height:35px; background-color:#BEBEBE;} .HomeTop dd:nth-child(3) {width:130px;} .HomeTop dd:nth-child(3) input {width:100%; height:100%; text-indent:5px; border-width:0; color:#000; font-size:15px; background-color:transparent;} .HomeTop dd:nth-child(4) {width:45px; display:table;} .HomeTop dd:nth-child(4) a {height:100%; display:table-cell; line-height:100%; vertical-align:middle; text-align:center;} .HomeTop dd:nth-child(2):hover center {top:35px;} @keyframes HomeTop_Center_0 {from{transform:scale(0.5); opacity:0} to{transform:scale(1.0); opacity:1; }} @keyframes HomeTop_Center_1 {from{width:0px; } to{width:500px; }} @keyframes HomeTop_Center_2 {from{opacity:0%; } to{opacity:1; }} /****************************** 湖北永旺全局导航 ******************************/ .NavContain dd {display:table-cell; background:url(../images/Frame0A.gif) no-repeat left center;width:9px; height:64px;} .NavContain dd:nth-child(2) {background:url(../images/Frame0C.gif);width:820px; text-align:center; padding-left:4px;} .NavContain dd:nth-child(2) a:last-child li:nth-child(2) {padding-right:0px;} .NavItem, .NavItemA {display:inline-table; } .NavItem li, .NavItemA li {display:table-cell;} .NavItem li:nth-child(1), .NavItemA li:nth-child(1) {background:url() no-repeat 0 2px; text-align:center; width:25px; height:25px; opacity:0.7;} .NavItem li:nth-child(2), .NavItemA li:nth-child(2) {padding:0px 20px 5px 2px; line-height:28px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} .NavItem li tt, .NavItemA li tt {font-size:16px; color:#FFFFFF; padding-bottom:3px;} .NavItemA li tt {color:#FFFF00; border-bottom:#FFFF00 1px dashed;} .NavItem:hover li tt {color:#FFFF00; border-bottom:#FFFF00 1px dashed;} .NavItem:hover li:nth-child(1) {opacity:1;} .NavItemADD {margin:0 8px; /*比如一级栏目减少,作为补充,增大栏目前的填充,由HtmCrtFunc.php决定是否写入*/} /****************************** 北京永旺全局导航 ******************************/ .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 div {display:table-cell; text-align:center; vertical-align:top; height:100%; position:relative;} .WrapMenu div:nth-child(1) {width:80vw; text-align:left;} .WrapMenu div: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 dt {display:table-cell; color:#FFFFFF; vertical-align:middle; text-align:center;} .WMenuA dl:nth-child(1) dt {height:10vh; vertical-align:bottom; height:12vh; text-align:center; /*放置永旺的logo和背景长条图*/} .WMenuA dl:nth-child(1) dt img {width:38vw; height:auto; position:relative; top:-2vh;} .WMenuA dl:nth-child(1) dt center {position:relative; left:31vw; height:1px; z-index:-1;} .WMenuA dl:nth-child(1) dt center center {position:absolute; left:0; height:0vh; width:38vw; background-color:#BF2191;} .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; text-align:center;} .WMenuB a {color:#FFFFFF;} .WMenuC {width:30vw; height:2rem; line-height:2rem; background-color:#AE007A; border:#F00 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; text-align:center; 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;} .FootBar dd {display:table-cell; vertical-align:middle; color:#FFFFFF; font-size:1rem; padding:1rem 0; box-sizing:border-box;} .FootBar dd:nth-child(1) {text-align:left; width:35%;} .FootBar dd:nth-child(2) {text-align:right; width:65%; line-height:1.7rem; color:#FFFFFF;} .FootBar dd:nth-child(2) a {color:#FFFFFF;} .FootBar dd:nth-child(2) span {font-size:0.80rem;} .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;} /************************************ 页脚
************************************/ /* - 页面底部Bar - */ .FootTD {display:table-cell;height:380px;width:5px;} .FootTD:nth-child(2), .FootTD:nth-child(4), .FootSlide{width:270px;vertical-align:top;text-align:left;color:#FFFFFF;} .FootTD h3 {font-weight:bolder;font-family:Noto Sans SC;letter-spacing:3px;font-size:20px;padding:80px 0px 10px 0px;} .FootSlide h4 {width:100%;background-color:#FFFFFF;height:95px;padding-top:10px;} .FootSlide h4 p {width:90%;margin:auto;font-size:16px;color:#000000;text-align:left;} .FootSlide h4 p span {font-size:12px;line-height:16px;color:#000000;display:block;padding-top:4px;} .FootSlide h4 p span tt {display:inline-block;width:15%;vertical-align:top;} .FootSlide h4 p span tt:nth-child(2) {width:85%;color:#888888;} .FootSlide h5 {width:100%;height:127px;background-repeat:no-repeat;background-position:left top;background-size:100% 100%;} .FootTD center {padding:40px 0px 50px 0px;font-size:36px;line-height:44px;font-family:Noto Sans SC;color:#FFFFFF;font-weight:bolder;font-family:Arial;} .FootTD center tt {font-size:30px;letter-spacing:3px;} .FootTDDiv {width:80%;margin:auto;padding:0px;} .FootTDDiv li {display:inline-block;margin:0px 20px;color:#CCCCCC;line-height:30px;} .FootTDDiv li span {font-size:12px;position:relative;top:-13px;} .FootTDA {display:table-cell;width:30%;padding:10px 0px;color:#999999;vertical-align:bottom;} .FootTDA a:visited, .FootTDA a:link {color:#FFFFFF;} .FootTDA a:hover {color:#FFFF00;border-bottom:#FFFF00 1px dashed;} .FootTDA tt {font-size:12px;} .FootTDA:nth-child(2) {width:70%;text-align:right;line-height:26px;font-size:13px;} /* - 页面底部Bar - */ /******************************* 内页框架样式说明 ******************************** ArticleTypeBar,ArticleTypeBarA(用于Single.htm): 用于在MainRight的上面显示当前二级栏目名称 注意: 1)正常ArticleType直接写到ArticleTypeBar下,同时设置同名ID 2)如果其下background-color,因为Css原因,ArticleType就要写入span或tt下,同时给其设置同名ID 3)tt(北京永旺)和span(农工党的关于我们)使用时有区别的 SubPgN: 内页栏目路径导航,span,tt分左右放置二级栏目名和路径 布局 a) 左右布局(北京永旺) b) 样式命名: MainLeft->LSubNav MainRight c)外部display=table,宽度由FixedWidth等控制,内部table-cell,左中右结构 d) 左侧div样式名为MainLeft,id=SubNavige 如果要显示当前内页的一级栏目名,使用center或blockquote,如果样式设为display:none,表示左侧不显示一级栏目名称((农工党). e) 手工修改 MainLeft,MainRight的width,中间div在页面设置 b) 上下布局 (关山觉) b) 样式命名: MainTop ->TSubNav MainDown c) *********************************************************************************/ .ArticleTypeBar {width:100%; line-height:3.5rem!important; text-align:left; text-indent:1rem; font-size:1.7rem!important; font-weight:bolder; color:#000; letter-spacing:0.1rem; background-color:#FDF6F7; } .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);} .ArticleTypeBar tt {position:relative; display:inline-block;} .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:2rem;opacity:0} 100%{left:0%;opacity:1;}} .MainRight, .MainLeft {display:table-cell; vertical-align:top; box-sizing:border-box; position:relative;} .MainLeft {width:20%; text-align:left;} .MainRight {width:75.5%; } .MainLeftWidth {width:95%; margin:auto;/*必须使用center样式,用display:none控制内页页面是否显示一级栏目名称*/} .MainLeft ul {} .ColNameDivide {height:5px;} .SubPgN {display:table; width:98%; border-bottom:#EAEAEA 1px solid;} .SubPgN dd {display:table-cell; width:50%; padding:0 0 1.2rem 0; position:relative;} .SubPgN dd label {font-size:1.4rem; font-weight:bolder; color:#999;} .SubPgN dd:nth-child(2) {text-align:right; padding:0 1em 0.6em 0; font-size:13px; color:555; vertical-align:bottom;} .SubPgN dd:nth-child(2) i, .SubPgN dd:nth-child(2) em {margin:0 4px;} .SubPgN dd:nth-child(2) a {position:relative; display:inline-block;} .SubPgN dd:nth-child(2) a hr {border-width:0; height:1px; width:0%; position:absolute; top:1.0em; left:50%; background-color:rgba(0,0,0,0.55); transition:all 0.3s;} .SubPgN dd:nth-child(2) a {} .SubPgN dd:nth-child(2) a:hover hr {width:100%; left:0%; transition:all 0.6s;} /* 内页一级栏目显示及二级栏目导航 : 放置一级栏目名称 注意: 1) 不同网站,这个都要手写,有blockquote和center的区别 2) margin:因此使用center,自动是居中的,想居左,就设置 margin:0; ColNameDivide: 作为LMainColName和LSubNav之间分界 */ .LMainColName {background-repeat:no-repeat; background-position:right top;background-color:#B60184; text-align:center; padding:0; font-size:0;} .LMainColName {background-image:url(../images/LogoB1.png); background-size:auto 90px; background-position:right 5px;/*此行手工修改,上行一般不动*/} .LMainColName img {width:100%; height:auto;} .LMainColName tt {color:#FFF; font-size:25px; display:block; letter-spacing:3px; text-align:left; text-indent:15px; height:110px; line-height:110px;} .LSubNav, .CurLSubNav, .LSubNavAll, .LSubNavDisabled {font-size:15px; text-align:center; display:none;} .LSubNav center, .CurLSubNav center {width:90%; margin:auto; padding:13px 0px; color:#888; text-align:left;} .LSubNav center i, .CurLSubNav center i {float:right; font-size:18px;} .CurLSubNav {background-color:#B60184; display:block;} .CurLSubNav center a {color:#FFF;} .CurLSubNav center i {color:#FFF;} .LSubNav {border-bottom:#CCCC 1px solid;} .LSubNav center a {letter-spacing:1px;} .LSubNav:hover {background-color:#F6F6F6; transition:all .3s ease;} .LSubNav:hover center a, .LSubNav:hover center i {color:#000;} */ /***********************************************/ .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 {width:900px; padding:0; text-align:left; margin:auto;} .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:#000; padding:55px 0 60px 0;} .HTitle h4 {font-size:54px; color:#000; 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 ********************************* 用于湖北永旺 *********************************************************************************/ .BannerDiv {height:350px; display:table; width:100%; text-align:center; background:url() no-repeat center top; vertical-align:top;} .BannerDiv dd { display:table-row;} .BannerDiv dd h5 {height:5px; display:table-cell; background-color:#EEE; padding:0px; } .BannerDiv dd div { display:table-cell; vertical-align:middle; box-sizing:border-box;overflow:hidden;} .BannerDiv dd div h3 {font-size:50px; color:#FFF; letter-spacing:6px; font-weight:bolder; line-height:50px; position:relative; left:-20px; opacity:0;/*大标题*/ text-align:center;} .BannerDiv dd div h4 {font-size:25px; color:#FFF; line-height:60px;/*控制与大标题的间距*/ letter-spacing:3px; position:relative; top:20px; opacity:0; text-shadow:0px 0px 5px rgba(0,0,0,0.7); font-family:宋体; font-weight:bolder;/*小标题,文字外发光*/ text-align:center;} .BannerDiv dd:nth-child(3) h5 {height:15px;} /********************************* 内页的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;}} /***************************** 用于详情页的正文控制 *****************************/ .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;} /****************************** 用于留言板等小组件 ******************************/