/********************************** 标签默认值,从行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;} @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;} /********************************** 通用,带前缀 ********************************** ._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;} .FullWidthDiv {width:100%; margin:auto; background-repeat:no-repeat; background-position:center top;/*background-size:contain;*/ /*注意这里background-size:contain表示将图片宽度自动拉伸或缩小满屏 */} .FlexBoxDiv {width:87vw; max-width:1400px; min-width:1160px; text-align:center; margin:auto; /*弹性布局,保证两侧2vw的留白 clear:both;:防止前面的float影响,*/} .DivideBlock {height:30px; width:100%;} /********************************** 整体宽度布局 ********************************** /* ' ' ' ' ' ' ' ' ' ' } */ /********** 1:Swiper用于页面的swiper,因此页面就不需要再加 swiper-bundle.css **********/ .swiper-container {position:relative; overflow:hidden; padding:0; z-index:1; width:100%; height:100%; margin:auto;} .swiper-wrapper {position:relative; width:100%; height:100%; z-index:1; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-transition-property:-webkit-transform; transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box; box-sizing:content-box} .swiper-slide {flex-shrink:0; width:100%; height:100%; position:relative; } .swiper-slide {text-align:center; font-size:18px; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:center; align-items:center; /*background:#FFF;*/} .swiper-slide {background-position:center top; background-repeat:no-repeat; background-size:100% auto!important; /*background-size:弹性布局*/} .pagination {position:absolute; text-align:center; transition:.3s opacity; transform:translate3d(0,0,0); z-index:10} .swiper-pagination {position:absolute; text-align:center; transition:.3s opacity; z-index:10} .swiper-pagination-bullet {width:0.9rem; height:0.9rem; display:inline-block; margin:0 0.3rem; border-radius:100%; background:#000; opacity:.2; cursor:pointer;} .swiper-pagination {position:relative; top:-30px;} .swiper-pagination-bullet {opacity:0.4; color:#000;} .swiper-pagination-bullet-active {opacity:1;} .swiperWidth {width:87vw; /*为兼容2K屏幕*/} .swiper-button-next, .swiper-button-prev {position:absolute; top:50%; width:27px; height:44px; margin-top:-22px; z-index:10; cursor:pointer; background-size:27px 44px; background-position:center; background-repeat:no-repeat} .swiper-button-next {right:0px;} .swiper-button-Next, .swiper-button-Pre {width:42px; height:42px; opacity:0.5; background:url(../Images/Common/ArrowNext.png) no-repeat center center; /*top:24%;*/} .swiper-button-Next:after, .swiper-button-Pre:after {content: ''; /*取消原来的上页下页箭头*/} .swiper-button-Pre {background:url(../Images/Common/ArrowPre.png) no-repeat center center;} .swiper-button-NextA, .swiper-button-PrevA {width:1.5rem; height:1.5rem; background-size:100%; border-width:0; outline:none;} /****************************** swiper的Css结束 ******************************/ /* LoadingDiv特定: 1)如果视窗宽度小于底图,底图按视窗按比例所需 2)Loading动画总计6秒 3)由于封面图png尺寸过大,使用new Image()预载入 4)原来图片框 850 */ .LoadingDiv {display:table; width:100vw; opacity:1; position:fixed; z-index:101; background-color:#FFFFFF;} .LoadingDiv dd {display:table-cell; height:100vh; vertical-align:middle; text-align:center; overflow:hidden;} .LoadingDiv dd center {position:relative; width:100%; max-width:66vw; margin:auto;} .LoadingDiv dd center blockquote {width:100%; padding-bottom:53%; background:url() no-repeat center center; background-size:100%; opacity:0; transform:scale(0.8);} .LoadingDiv dd center hr {width:0%; border-width:0; height:2px; margin:8px auto; position:relative; background-color:#CCCCCC;} @keyframes LoadingBackImg {0%{opacity:0;transform:scale(0.8);} 20%{opacity:1;transform:scale(1);} 40%{opacity:1;transform:scale(1);} 60%{opacity:1;transform:scale(1);} 80%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(1.1);}} @keyframes LoadingLine {0%{opacity:1;width:0%;} 20%{opacity:1;width:0%;} 60%{opacity:1;width:100%;} 70%{opacity:1;width:100%;} 90%{opacity:0;} 100%{width:100%;} 100%{opacity:0;} 100%{width:100%;}} /************************************* 关于Swiper构建 ************************************* 0: 每次都要给SlideD设置width,目前设为1000,配合TopBarA导航的min-width:1000 1: 关山觉中,使用vw设置外围div的高度,以便弹性布局 2: dl,dt用于table结构多行单列, blockquote用于img背景图定位 3: dt手动设置height(vw),为便于定位,使用vertica-align:top; 4: 用span,tt控制文字大小和颜色,font-size,line-height都使用vw 5: 如果dt内图片,设置图片width(vw),同时不设置dt高度 6: h5控制一行两图片的位置处理(两图片水平排列导致总宽度过大,见万盟数控首页的Banner3图) 7: dd用于单行多列. 8: SlideDFontBig,SlideDFontSub:为适应2K屏幕,font-size仍使用vw,利用页面的media screen对2k进行专门控制 9: li用于图片Css动画,图片尺寸都是一致的png图,便于设置动画(样本: 北京永旺) 10: SlideDAni_00:这里的末尾数字与页面的id="Slide0"是对应的 ******************************************************************************************/ .SlideD {display:table!important; width:100%; max-width:83vw; margin:auto;} .SlideD dl {display:table-row;} .SlideD dl dt {display:table-cell; vertical-align:top; text-align:center;} .SlideD dl dt span {font-size:3vw; color:#FFFFFF; font-weight:bolder; letter-spacing:1px;} .SlideD dl dt tt {font-size:1.2vw; color:#CCCCCC; line-height:1.5vw;} .SlideD dl dt h6 {display:inline-block; height:100%; overflow:hidden; white-space:nowrap;} /*仅用于开镜动画*/ .SlideD dl dt h5 {margin:auto; width:0; height:0; background-color:#EEEEEE;} .SlideD dl dt blockquote {left:0px; top:0px; z-index:0; background-repeat:no-repeat; background-position:center top; margin:auto;} /*用于把图片放入背景*/ .SlideD dl dt blockquote, .SlideD dl dt blockquote img, .SlideD dl dt img, .SlideD dl dt h5, .SlideD dl dt h6, .SlideD dl dt span, .SlideD dl dt tt {position:relative;} .SlideD dl dt blockquote, .SlideD dl dt blockquote img, .SlideD dl dt img, .SlideD dl dt h3, .SlideD dl dt h4, .SlideD dl dt span, .SlideD dl dt tt {opacity:0;} .SlideD dl dt h6 span {opacity:1;} .SlideD dd {display:table-cell; vertical-align:top; text-align:left; height:600px; overflow:hidden;} .SlideD dd blockquote {position:relative; left:0px; top:0px; z-index:0; background-repeat:no-repeat; background-position:left top;} .SlideD dd blockquote img {position:relative; opacity:0;} .SlideD dd img {position:relative; margin-top:0px; opacity:0;} .SlideD dd center {width:100%; margin:auto; vertical-align:top; text-align:left; height:0px; position:relative;} .SlideD li {display:table-cell; width:100%; height:36.45vw; vertical-align:top; text-align:center; overflow:hidden; position:relative; background-repeat:no-repeat; background-position:center center} .SlideD li h3 {position:absolute; height:100%; width:100%; text-align:center;} .SlideD li h3 img {position:relative; width:auto; height:100%; opacity:0;} .SlideDFontBig {font-size:2.6vw!important; font-weight:normal!important;} .SlideDFontSub {font-size:1.4vw!important; line-height:3vw!important;} @keyframes SlideDAni_a {from{transform:scale(1.4);opacity:0; top:-3vw;} to{transform:scale(1); opacity:1; top:0vw;}} @keyframes SlideDAni_b {from{transform:scale(1.4);opacity:0; top:3vw;} to{transform:scale(1); opacity:1; top:0vw;}} @keyframes SlideDAni30 {from,20%,40%,60%,80%,to{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} 0% {opacity:0;transform:scale3d(.3, .3, .3);} 20%{transform:scale3d(1.1, 1.1, 1.1);} 40%{transform:scale3d(.9, .9, .9);} 60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03);} 80%{transform:scale3d(.97, .97, .97);} to {opacity:1;transform:scale3d(1, 1, 1);} } @keyframes SlideDAni31 {from{top:1vw;opacity:0;} to{top:0vw; opacity:1;}} .SlideDAni_30 {animation:SlideDAni30 1.5s forwards;} .SlideDAni_31 {animation:SlideDAni31 1s forwards; animation-delay:1s;} /** wow bounceIn 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值 wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度） wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变 wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右） wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变 wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值 wow lightSpeedIn 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 wow bounce 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） wow shake 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） wow flipInX 原位置后仰前栽、透明度从100%变化至设定值 wow swing 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 wow flipInY 原位置左右旋动、透明度从100%变化至设定值 wow bounceInU 原位置不变、直接从不显示到显示（无过过渡效果） wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度 关于网站弹性结构 1) 尽量使用%,不要使用px,如果板式外围构架为100%,可以使用vw 2) 板式构架尽量使用FlexBoxDiv控制最外围宽度,构架内部尽量使用% 3) 框架内部控制高度,可利用padding-bottom为宽度的百分比,再在内部建立块元素,利用height:100%,top控制定位,图片使用背景来完成 4) 文字大小可使用em,如果文字容器高度使用em,可避免文字过小 5) 1vw略比1em大一点 **/ /***************************** 通用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动画关键帧定义 ****************************/ .TitleA {font-size:2rem; color:#000; letter-spacing:0px; text-align:center; padding:2.3rem 0 2rem 0;} .TitleA hr {width:4rem; height:4px; background-color:#B3017C; border-width:0;} .Shop {width:230px; display:inline-block; padding:20px 0; margin-right:20px; vertical-align:top; text-align:center; border:#DDD 1px solid; box-shadow:0 0 6px rgba(0, 0, 0, 0.3);} .Shop center {width:200px; color:#000; font-size:1.2rem;} .Shop center:nth-last-child {margin-right:0;} .Shop center dd {font-size:1.7rem; font-weight:bolder; padding-bottom:16px; text-align:center;} .Shop center dd img {width:80px; height:80px; margin-bottom:10px;} .Shop center hr {height:1px; border-width:0; background-color:rgba(0,0,0,0.1);} .Shop center dt {padding-top:23px; line-height:20px;} .Shop center dt span {color:#979797;} .Brief {width:25%; text-align:center; display:inline-block; vertical-align:top;} .Brief center {width:250px; margin:auto; border:#FFF 1px dashed; border-radius:8px;} .Brief center dd {color:#FFF; font-size:1.2rem; line-height:1.8rem; box-sizing:border-box;} .Brief center dd span {font-weight:bolder;} .Brief center dd:nth-child(1) {height:40px; position:relative;} .Brief center dd:nth-child(1) span {position:absolute; display:block; width:91px; height:95px; top:-65px; font-size:1.5rem; font-weight:bolder; line-height:1.7rem; color:#A61873; text-align:center; background:url(../ImagesA/Circle0.png) no-repeat center center; left:75px; padding:44px 0 0 2px; letter-spacing:2px;} .Brief center dd:nth-child(2) {height:95px; text-align:center; padding:10px 0 0 0;} .Brief center dd:nth-child(2) span {font-size:1.4rem;} .Active {width:33%; text-align:left; display:inline-block; font-size:0; vertical-align:top;} .Active center {display:inline-block;} .Active center dd {padding:15px 10px 0 10px; box-sizing:border-box; width:348px; height:150px; background-color:#FFF; border:#B62883 0px solid;} .Active center dd h3 {padding-left:4rem; font-size:1.2rem; line-height:1.7rem; color:#000; position:relative;} .Active center dd h3:nth-child(1) {margin-bottom:10px;} .Active center dd h3 tt {position:absolute; left:0rem;} .Active center dd h3 span {color:#979797;} .Footer {display:table; margin:auto; width:100%;} .Footer dd {display:table-cell; vertical-align:middle; text-align:left; color:#FFF; width:50%; font-size:1.2rem;} .Footer dd hr {height:20px; border-width:0; margin:0;} .Footer dd span {font-size:2.2rem; font-family:arial;} .Footer dd tt {color:#999; font-size:1rem;} .Footer dd h3 {width:150px; text-align:center; margin-left:40px; display:inline-block; font-size:1.1rem;} .Footer dd h3 img {width:100%; height:auto;}