/************************* 用于Dropload(上滑刷新) *******************************/ /* ' ' ' ' ' ' ' ' ' ' } */ .dropload-up,.dropload-down {position:relative; height:0; overflow:hidden; font-size:12px;/* 开启硬件加速 */-webkit-transform:translateZ(0); transform:translateZ(0);} .dropload-down, .dropload-noData {height:25px; line-height:25px;} .dropload-refresh, .dropload-update, .dropload-load, .dropload-noData {text-align:center; color:rgba(0,0,0,0.6); background-color:rgba(0,0,0,0.05); border-top:rgba(255,255,255,0.3) 1px solid; border-top:rgba(255,255,255,0.3) 1px solid;} .dropload-load .loading {display:inline-block; height:15px; width:15px; border-radius:100%; margin:6px; border:2px solid #666; border-bottom-color:transparent; vertical-align:middle; -webkit-animation:rotate 0.75s linear infinite; animation:rotate 0.75s linear infinite;} @-webkit-keyframes rotate {0% {-webkit-transform:rotate(0deg);} 50% {-webkit-transform:rotate(180deg);} 100% {-webkit-transform:rotate(360deg);}} @keyframes rotate {0% {transform:rotate(0deg);} 50% {transform:rotate(180deg);} 100% {transform:rotate(360deg);}} /******************************** 用于图片列表,尽量转入弹性结构 ********************************* PicList,PicListA: 1) 用于点图片看文章 2) 宽度由GlobeWidth的最大宽度决定 3) 一行3三个,三行,为图片,标题和概要 4) PicList(默认)见万盟数控产品中心,农工党的视频中心 PicListA见关山觉的新闻中心 5)PicList对应图片尺寸为350*210,因此padding-bottom为60% PicListB 北京永旺 1) ShowCase: 1) 用于点小图看大图 2) CSS样式原理同PicList,也是一行三个 masonry: 1) 关山觉项目的瀑布流结构 2) 关山觉,使用CSS动画间隔显示,因此在CSS书写时,将.MasonryDiv,.MasonryDiv dd h3,MasonryDiv dd h4先隐含,再使用CSS的_TopBarA_8来动画显示,见WebSDpec.js的MasonryShow函数 注意事项 1) float元素浮动后高度不一致导致错位的解决办方法,行末尾元素使用clear:left; 2) img所在元素,利用 padding-bottom,其值设为width的百分比,保证图片比列 ************************************************************************************************/ .PicList {float:left; width:31%; margin:0 2% 1.2em 0 ; vertical-align:top; background-color:#F6F6F6; box-sizing:border-box;} .PicList:nth-child(3n+1) {clear:left;/*float元素浮动后高度不一致导致错位的解决办方法*/} .PicList center {width:95%; margin:auto; padding-bottom:60%; position:relative; overflow:hidden; /* margin-top:10%; 撑开成正方形 */} .PicList center dd, .PicList center dt {width:100%; height:100%; border-radius:0.5em; position:absolute; overflow:hidden; z-index:1; /*border:rgba(0,0,0,0.15) 1px solid;*/} .PicList center dd, {background-color:#FFF; border:#FFF 3px solid; box-sizing:border-box; } .PicList center dd img {width:100%; height:100%; transform:scale(1);} .PicList center dt {z-index:2; text-align:center; vertical-align:middle; background-color:rgba(0,0,0,0.3);} .PicList center dt img {width:auto; height:40%; position:relative; top:30%; opacity:1;} .PicList h3 {width:80%; height:3em; overflow:hidden; line-height:1.2em; font-size:14px; color:#000; opacity:0.6; position:relative; top:0px; padding:0; display:table-cell; vertical-align:middle; text-align:center; transition:all 0.3s;} .PicList hr {width:80%; border-width:0; height:0.2em; background:url(../images/Common/LineA.gif) repeat-x left top;opacity:0.4; transition:all 0.6s linear 0s;} .PicList h4 {width:80%; margin:auto; padding-top:0em; font-size:0.85em; text-align:left;} .PicList h5 {height:1.2em; width:100%; position:relative; z-index:1; text-align:right;} .PicList h5 a span {background-color:#CCCCCC; padding:0.25em 0.6em 0.35em 0.6em; border-radius:0.3em; font-size:0.8em; color:#555555; position:relative; top:-1.6em; right:10%;} .PicList h5 a:hover span {color:#FFFFFF; background-color:#DA261E;} .PicList a:hover center dd img {transform:scale(1.2);} .PicList a:hover center dt {background-color:transparent;} .PicList a:hover center dt img {opacity:0;} .PicList a:hover h3 {opacity:1; top:-6px; transition:all 0.3s linear;} .PicList:a:hover h4 {color:#DA261E;} /* PicListA:Table结构,分为四行 dd:图片 dt:标题 li:概要 h4:发布时间和More按钮 h5:Css动画的hr 注意:对Table结构的td,overflow对其是无效的,因此我只有在其中在放入span元素 */ .PicListA {float:left; width:33%; vertical-align:top; margin-top:1.5em; box-sizing:border-box;} .PicListA center {display:table; width:97%; margin:auto; border:#FFFFFF 0.05em solid; transition:all .4s ease 0.2s;} .PicListA center dl {display:table-row;} .PicListA center dl dd {display:table-cell; width:100%; position:relative; padding-bottom:45%; box-sizing:border-box;} .PicListA center dl dd h3 { width:100%; height:100%; position:absolute; background-color:#EFEFEF; } .PicListA center dl dd h3 {/*padding:2px; border-radius:0.2em; border:#EEEEEE 0.05em solid; 用于显示图片外框 */} .PicListA center dl dd h3 blockquote { width:100%; height:100%; overflow:hidden; /*border-radius:0.3em;*/} .PicListA center dl dd h3 blockquote img { width:auto; height:100%; margin:auto; transform:scale(1); transition:all .4s ease;} .PicListA center dl dt, .PicListA center dl li, .PicListA center dl h4, .PicListA center dl h5 {display:table-cell; text-align:left; padding:0 0.4em;} .PicListA center dl dt {padding:0.8em 0.4em 0.5em 0.4em;} .PicListA center dl dt span {display:block; height:2.5em; color:#000000; font-size:1.1em; line-height:1.3em; font-weight:bolder; overflow:hidden;} .PicListA center dl li { padding:0 0.4em} .PicListA center dl li span {display:block; height:3em; color:#999999; font-size:0.9em; line-height:1.4em; text-align:left; overflow:hidden; border-bottom:#EFEFEF 0.05em solid;} .PicListA center dl h4 {padding-top:0.6em!important; color:#454545; font-size:1em; font-weight:bolder; font-family:'Arial'; padding:0.3em 0.8em 0.7em 0.8em;} .PicListA center dl h4 span {float:right; color:#888888; font-size:0.85em; font-weight:normal;} .PicListA center dl h5 {padding:0!important;} .PicListA center dl h5 hr { width:0%; height:3px; border-width:0; margin:0; padding:0; background-color:#E60C0C;} .PicListA center:hover {border:#CCCCCC 0.05em solid; transition:all .4s ease;} .PicListA center:hover dl dd h3 img {transform:scale(1.2); transition:all .4s ease;} .PicListA center:hover dl dt span {color:#E60C0C;} .PicListA center:hover dl h4 span {color:#E60C0C; font-weight:bolder;} .PicListA center:hover dl h5 hr {width:100%; transition:all .4s ease 0.3s;} /* Masonry: */ .Masonry {width:75vw; margin:auto;} .Masonry center {width:22.9vw; margin:0 0.7vw; float:left;/*center的width与margin和MasonryDiv的margin联合调整图片的间隔*/} .MasonryDiv {width:100%; margin:1vw 0; padding:3px; font-size:0; position:relative; box-sizing:border-box; transform:scale(0.4); opacity:0; border:#DDDDDD 1px solid;} .MasonryDiv dt {width:100%; height:100%; overflow:hidden;} .MasonryDiv dt img {width:100%; height:auto; margin:auto;} .MasonryDiv dd {width:98.8%; height:8.0vw; bottom:0.1vw; position:absolute; text-align:left; overflow:hidden;} .MasonryDiv dd h3, .MasonryDiv dd h4 {width:100%; color:#FFFFFF; position:relative; padding:0 1vw; box-sizing:border-box; text-shadow:0px 0px 3px #000000; transition:all .6s ease;} .MasonryDiv dd h3 {height:2vw; line-height:1.7vw; font-size:1.2vw; top:3.0vw; z-index:5; opacity:0;} .MasonryDiv dd h4 {height:1vw; line-height:1vw; font-size:0.9vw; top:3.0vw; z-index:5; opacity:0;} .MasonryDiv dd h5, .MasonryDiv dd h6 {width:100%; color:#666666; position:relative; padding:0 1vw; box-sizing:border-box; transition:all .6s ease;} .MasonryDiv dd h5 {height:2.6vw; opacity:1; line-height:1.4vw; font-size:0.8vw; z-index:3; top:8vw; overflow:hidden;} .MasonryDiv dd h6 {height:9.9vw; opacity:0; width:100%; top:3.6vw; z-index:2;; background-color:#FFFFFF;} .MasonryDiv:hover dd h3 {top:1.4vw; color:#000000; text-shadow:0px 0px 0px #000000; transition:all .7s ease 0.2s;} .MasonryDiv:hover dd h4 {top:1.4vw; color:#000000; text-shadow:0px 0px 0px #000000; transition:all .7s ease 0.2s;} .MasonryDiv:hover dd h5 {top:1vw; opacity:1; transition:all .6s ease;} .MasonryDiv:hover dd h6 {top:-5.4vw; opacity:1; transition:all .6s ease;} /**************************************** 用于图片列表 *****************************************/ .ShowCase {vertical-align:top; width:25%; margin-bottom:20px; float:left;} .ShowCase dd {border:#BBBBBB 1px solid; background-color:#FFFFFF; border-radius:7px; padding:2px; box-sizing: border-box; width:212px; height:158px; margin:auto;/*注意,根据实际情况设置dd和a的width和height*/} .ShowCase dd center {overflow:hidden; border-radius:5px; width:100%; height:100%; background-color:#000000;} .ShowCase dd center img {width:100%; height:100%; border-width:0px; border-radius:5px; position:relative; opacity:0.8; left:0%; top:0%; transition:all .3s ease;} .ShowCase p {text-align:center; background-color:#FFFFFF; color:#888888; margin-bottom:4px; font-size:14px; padding:4px 0px; transition:all .2s ease;} .ShowCase:hover dd center img {width:120%; height:120%; left:-10%; top:-10%; opacity:1; transition:all .6s ease;} .ShowCase:hover p {width:100%; background-color:#EEEEEE; color:#000000; transition:all .4s ease;} /******************************** 用于文字列表,尽量转入弹性结构 ********************************* NewsList: 新闻中心,左右结构,左边分标题,概要 发布时间及人气 右边为图片,使用Table结构 (奇居商贸) #0A489C 重点: 1)图片尺寸控制与.NewsList dd center相关 HNewList: 新闻中心,左中右结构,左边为时间,中间为标题,发布时间及人气 概要 右边为装饰图,使用Table结构 (荷普药业) 重点:1)控制dd的width TitleList: 最简单的文章List,每行显示文章标题和发布时间,典型用于Searching.php TitleListB: 文章标题列表,左边小方块显示时间,右边分两行(万盟数控,农工党) ************************************************************************************************/ .TitleContainB {width:1160px; margin:auto; text-align:left; background-color:rgba(255,255,255,0.6); padding:0px 0px 1.5em 0px;} .TitleListB {width:100%; display:table; margin-top:1.5em; border:#EFEFEF 1px solid;} .TitleListB dd, .TitleListB dt { display:table-cell; text-align:left; vertical-align:middle; font-family:'Rajdhani-Regular';} .TitleListB dd {/*左侧时间*/ width:100px; height:100px; font-size:2em; color:#888888; text-align:center; font-weight:bolder; border-right:#EEE 1px solid;} .TitleListB dd blockquote {font-size:12px; color:#999999; line-height:1.1em; font-family:'Courier'; padding:0; letter-spacing:-1px; } .TitleListB dt {/*右侧标题*/ color:#000000; font-size:1.4em; padding-left:0.8em; box-sizing:border-box;} .TitleListB dt h3 {width:98%; text-align:left; padding:0.5em 0; font-weight:bolder; overflow:hidden; opacity:1; left:0; border-bottom:#FFF 1px dashed;position:relative; box-sizing:border-box;} .TitleListB dt h3 a i {color:#444444; margin-right:4px;} .TitleListB dt h3 a {color:#000000;} .TitleListB dt h4 {width:97%; font-size:0.85em; color:#AAAAAA; text-indent:1.4em; margin-top:0.1em; background-color:#F7F7F7; text-overflow:ellipsis; padding:0.75em 0.75em 0.15em 0;} .TitleListB dt h3, .TitleListB dt h4 { transition:all .4s ease;} .TitleListB:hover dd {color:#000; background-color:#EEE;} .TitleListB:hover {border-color:#00b7ee;} .TitleListB:hover h3 {opacity:0.4; border-bottom-color:#888; left:0.75em; transition:all .4s ease;} .TitleListB:hover h4 {color:#000000; background-color:#FFF;} .TitleListBDDA {/*用于无概述的情况*/ width:70px!important; height:70px!important; } .TitleListBDDA blockquote {font-size:14px!important; margin-top:-5px;} .TitleListBDTA {} .TitleListBDTA h3 {line-height:21px; font-size:18px; padding:0 0 0 1em!important; font-weight:lighter!important;overflow:visible!important; border-bottom-width:0px!important; } .TitleListBDTA h3 i {position:absolute; left:0.3em;/*-0.5*/ top:0.2em;} /**************************************** 用于文字列表 *****************************************/ .NewsList {display:table; margin-top:15px; border-bottom:#DCDCDC 1px solid;} .NewsList:nth-child(1) {border-bottom-width:0px;} .NewsList dd {width:650px; display:table-cell; vertical-align:top;} .NewsList dd:nth-child(1) {text-align:left;} .NewsList dd h3 {height:40px; line-height:40px; margin-bottom:5px; font-size:19px; border-bottom:#E0E0E0 1px dashed;color:#000000; overflow:hidden; position:relative; left:0px; transition:all .3s ease;} .NewsList dd h3 i {font-size:20px; margin:0px 8px; color:#999999;} .NewsList dd h4 {height:65px; overflow:hidden; background-color:#F7F7F7; -moz-border-radius:6px; border-radius:6px;} .NewsList dd h4 p {width:97%; margin:auto; line-height:18px; padding:5px 0px; color:#000000; opacity:0.4; transition:all .2s ease;} .NewsList dd h5 {padding:7px 0px 20px 0px; width:97%; margin:auto;} .NewsList dd h5 span {float:left; font-size:16px; color:#999999; letter-spacing:1px; font-family:Arial;} .NewsList dd h5 span i {font-size:22px;} .NewsList dd h5 span:nth-child(2) {float:right;} .NewsList dd h5 span tt {color:#000000; font-size:16px;} .NewsList dd:nth-child(2) {width:20px;} .NewsList dd:nth-child(3) {width:130px;} .NewsList dd center {width:216px; height:144px; border:#E0E0E0 1px solid; border-radius:7px; box-sizing:border-box; padding:2px ;margin:auto;} .NewsList dd center blockquote {width:100%; height:100%; vertical-align:middle; overflow:hidden; border-radius:5px;} .NewsList dd center blockquote img {width:100%; height:auto; border-radius:5px; position:relative; left:0%; top:0%; transition:all .3s ease;} .NewsList:hover dd center blockquote img {transform:scale(1.2); transition:all .4s ease;} .NewsList:hover dd h3 {left:15px; transition:all .4s ease;} .NewsList:hover dd h4 p {opacity:1; transition:all .4s ease;} .NewsList:hover {background-color:#F9F9F9;} .HNewList {width:100%; display:table; padding:11px 0; border-bottom:1px solid #EAEAEA; margin-top:6px;} .HNewList a {display:table-row; overflow:hidden;} .HNewList a dd {display:table-cell; text-align:center; color:#B0B0B0; box-sizing:border-box;} .HNewList a dd:nth-child(1) {width:9%; font-family:arial; background-color:#F3F3F3; vertical-align:middle; border-right:#777777 1px solid;color:#0A489c; transition:all .5s ease;} .HNewList a dd:nth-child(1) span {display:block; font-size:30px; line-height:34px;} .HNewList a dd:nth-child(1) tt {display:block; font-size:15px; line-height:20px;} .HNewList a dd:nth-child(2) {width:83%; text-align:left; vertical-align:top;} .HNewList a dd:nth-child(2) h3, .HNewList a dd:nth-child(2) h4, .HNewList a dd:nth-child(2) h5 {width:98%; margin-left:3%;} .HNewList a dd:nth-child(2) h3 {font-size:18px; font-weight:normal; color:#000000; padding:3px 0px 6px 0px; position:relative; left:0px; transition:all .5s ease;} .HNewList a dd:nth-child(2) h3 i {margin-right:3px;} .HNewList a dd:nth-child(2) h5 {padding:4px 0px 6px 0px; color:#999999; border-top:#EEEEEE 1px dotted;} .HNewList a dd:nth-child(2) h5 i {font-size:16px;} .HNewList a dd:nth-child(2) h5 span {color:#000000;} .HNewList a dd:nth-child(2) h4 {height:35px; color:#666666; font-size:13px; overflow:hidden; opacity:0.4; transition:all .5s ease;} .HNewList a dd:nth-child(3) {width:8%; vertical-align:middle;} .HNewList a dd center {height:45px; overflow:hidden; float:right; margin-bottom:10px;} .HNewList a dd center img {position:relative; top:0px; display:block; transition:all .5s ease;} .HNewList a dd center img:nth-child(2) {margin-top:12px;} .HNewList a:hover dd:nth-child(1) {color:#FFFFFF; background-color:#0A489c;} .HNewList a:hover dd:nth-child(2) h3 {color:#0A489C; left:15px;} .HNewList a:hover dd:nth-child(2) h4 {opacity:1;} .HNewList a:hover dd center img {top:-45px;} /* 农工党,新闻动态,两列式,左图右标题 总宽度:830 两列宽度分别为:200 630 列高度 185 图片尺寸:224*145 比率 64.7 对应后台缩略图尺寸 300*195 */ .HNewListA {display:table; width:98%; margin:20px auto 0 auto; cursor:pointer;} .HNewListA:first-child {margin:0 auto;} .HNewListA dl {display:table-row;} .HNewListA dl dd, .HNewListA dl dt {display:table-cell; text-align:left; position:relative;} .HNewListA dl:nth-child(odd) dd {width:24%; padding-top:14.6%; } .HNewListA dl dd center {position:absolute; width:92.0%; height:100%; top:0%; z-index:1; overflow:hidden; border-radius:5px; background-color:#FFF;} .HNewListA dl dd center img {height:auto%; width:100%; border-radius:5px; transform:scale(1);} .HNewListA dl:nth-child(odd) dt {width:76%; vertical-align:top;} .HNewListA dl dt h3 {height:50px; line-height:25px; font-size:20px; color:#000; font-weight:bolder; overflow:hidden; display:table-cell; vertical-align:middle; transition:all .5s; font-family:"华文细黑",STHeiti; position:relative; left:0px;} .HNewListA dl dt h3 i {font-size:12px; transform:scale(0.6); margin:0 5px 0 4px; position:relative; top:-2px;} .HNewListA dl dt h4 {height:50px; line-height:21px; font-size:14px; overflow:hidden; background-color:#F6F6F6; margin-top:10px; color:#AAA; border-radius:5px; padding:3px 6px; box-sizing:border-box; transition:all .5s} .HNewListA dl:nth-child(even) dd, .HNewListA dl:nth-child(even) dt {height:35px; vertical-align:top; font-size:12px; color:#BBB; padding:7px 8px 0 10px;} .HNewListA dl:nth-child(even) dt {text-align:right; color:#000; padding-top:2px;} .HNewListA dl:nth-child(even) dt a span {display:inline-block; width:20px; height:16px; overflow:hidden; position:relative; } .HNewListA dl:nth-child(even) dt a span i {color:#999; position:absolute; top:4px; font-size:16px; transition:all .3s;} .HNewListA dl:nth-child(even) dt a span i:nth-child(1){left:-100%; color:#000;} .HNewListA dl:nth-child(even) dt a span i:nth-child(2){left:0%; } .HNewListA dl:nth-child(even) dd hr {position:absolute; z-index:5; width:410%; bottom:0px; border-width:0; height:1px; background-color:#000; background-size:6px!important;background-repeat:repeat-x; margin:0 auto; background:linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 20%, transparent 20%, transparent 100%);} .HNewListA:hover dl dd center img {transform:scale(1.2);} .HNewListA:hover dl:nth-child(odd) dt h3 {color:#F00; left:6px; transition:all .5s;} .HNewListA:hover dl:nth-child(odd) dt h4 {color:#000; transition:all .6s linear .3s;} .HNewListA dl:nth-child(even) dt a:hover span i:nth-child(1) {left:10%; transition:all .8s ease;} .HNewListA dl:nth-child(even) dt a:hover span i:nth-child(2) {left:100%; transition:all .8s ease;} .TitleList {display:table; width:100%; margin:0 auto 7px auto; border-bottom:#EEE 1px dashed;transition:all .5s; table-layout:fixed;/*注意,这里的min-width:0;非常重要,避免white-space:nowrap;造成父盒子被撑大的问*/} .TitleList:nth-child(5n) {margin-bottom:12px; border-bottom:#4399F6 2px solid;} .TitleList dd {display:table-cell; padding:0 0 7px 0; vertical-align:middle; line-height:30px;} .TitleList:nth-child(5n) dd {padding-bottom:12px;} .TitleList dd:nth-child(1) {width:85%; overflow:hidden;} .TitleList dd center {position:relative; color:#656565; font-size:17px; left:0em; text-align:left; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} .TitleList dd center i {width:1em; text-align:center; position:relative;} .TitleList dd center span {font-style:italic; color:#F00; border-bottom:#F00 1px dotted;margin:0 2px; /*关键词时重点符*/} .TitleList dd center tt {color:#BBB; margin-left:4px; font-size:12px;} .TitleList dd:nth-child(2) {width:15%; white-space:nowrap; overflow:visible; padding-left:5px; text-align:right; color:#767676;} .TitleList:hover {border-bottom-color:#565656; transition:all .5s;} .TitleList:hover dd:nth-child(1) center {left:-1em; color:#2486F0; transition:all .5s;} .TitleList:nth-child(5n):hover {border-bottom-color:#4399F6; transition:all .5s;} /* 产品中心,一行3个,float:left结构 (荷普药业) 重点:1)控制dd的width */ .ProductList {float:left; width:33%; margin:8px 0px; vertical-align:top; background-color:#FFFFFF;} .ProductList dd, .ProductList dt, .ProductList blockquote{width:290px;} .ProductList dd {height:181px; border-radius:5px; border:#DDDDDD 1px solid; padding:1px; box-sizing:border-box;} .ProductList dd center {width:100%; height:100%; overflow:hidden; border-radius:3px; background:url(../Images/BackImgB.jpg) no-repeat center center;} .ProductList dd center img {width:100%; height:100%; border-width:0px; border-radius:3px; position:relative; left:0%; top:0%;transition:all .3s ease;} .ProductList dt {height:100px; overflow:hidden; position:relative; z-index:5; text-align:left;} .ProductList dt h3 {width:95%; margin:auto; line-height:35px; color:#000000; font-size:18px; border-bottom:#F3F3F3 1px solid;} .ProductList dt h3 i {margin-right:4px;} .ProductList dt h4 {width:95%; margin:auto; line-height:20px; color:#999999; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ProductList dt h4:nth-child(2) {padding-top:3px;} .ProductList dt h4 span {color:#656565; font-size:14px;} .ProductList blockquote {background-color:#0068B7; position:relative; height:100px; top:-180px; z-index:-1;} .ProductList:hover blockquote {top:-79px;} .ProductList:hover h3 {color:#FFFFFF; transition:all .4s ease; transition-delay:0.3s;} .ProductList:hover h4 {color:#FFFFFF; transition:all .4s ease; transition-delay:0.6s;} .ProductList:hover h4 span {color:#FFFFFF; transition:all .4s ease; transition-delay:0.6s;} .ProductList:hover h4:nth-child(3) {color:#FFFFFF; transition:all .4s ease; transition-delay:0.8s;} .ProductList:hover h4:nth-child(3) span {color:#FFFFFF; transition:all .4s ease; transition-delay:0.8s;} .ProductList:hover dd center img {width:110%; height:110%;left:-5%;top:-5%;transition:all .6s ease;} /* 产品中心,一行3个,float:left结构 (荷普药业) 重点:1)控制dd的width */ .ProductListA {float:left; width:33%; margin:8px 0px; vertical-align:top; background-color:#FFFFFF;} .ProductListA dd, .ProductListA dt, .ProductListA blockquote {width:290px;} /* .ProductListA dd {height:290px; border-radius:5px; border:#DDDDDD 1px solid; padding:1px; box-sizing:border-box;} .ProductListA dd center {width:100%; height:100%; overflow:hidden; background:url(../Images/BackImgC_1.jpg) no-repeat center center; border-radius:3px; position:relative; z-index:1;} .ProductListA dd center img {width:100%; height:100%; border-width:0px; border-radius:3px; position:relative; opacity:0.5; transition:all .3s ease;} .ProductListA dd li {height:290px; position:relative; top:-286px; z-index:5; background:url(../Images/BackImg.png) no-repeat center center; opacity:0;} */ .ProductListA dd {height:290px; border-radius:5px; border:#DDDDDD 1px solid; padding:1px; box-sizing:border-box; background:url(../Images/BackImgC.jpg) no-repeat center center; background-size:100% 100%;} .ProductListA dd center {width:100%; height:100%; overflow:hidden; border-radius:3px; position:relative; z-index:5;} .ProductListA dd center img {width:100%; height:100%; border-width:0px; border-radius:3px; position:relative; left:0%; top:0%; transition:all .3s ease;} .ProductListA dd li {height:290px; position:relative; top:-288px; z-index:1; background:url(../Images/BackImgCA.jpg) no-repeat center center; opacity:0; transition:all .3s ease; background-size:100% 100%;} .ProductListA dt {height:100px; overflow:hidden; position:relative; z-index:5; text-align:left;} .ProductListA dt h3 {width:95%; margin:auto; line-height:35px; color:#000000; font-size:18px; border-bottom:#F3F3F3 1px solid; overflow:hidden; white-space:nowrap;} .ProductListA dt h3 i {margin-right:4px;} .ProductListA dt h4 {width:95%; margin:auto; line-height:20px; color:#999999; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ProductListA dt h4:nth-child(2) {padding-top:3px;} .ProductListA dt h4 span {color:#656565; font-size:14px;} .ProductListA blockquote {background-color:#0068B7; position:relative; height:100px; top:-180px; z-index:-1;} .ProductListA:hover blockquote {top:-79px;} .ProductListA:hover h3 {color:#FFFFFF; transition:all .4s ease; transition-delay:0.3s;} .ProductListA:hover h4 {color:#FFFFFF; transition:all .4s ease; transition-delay:0.6s;} .ProductListA:hover h4 span {color:#FFFFFF; transition:all .4s ease; transition-delay:0.6s;} .ProductListA:hover h4:nth-child(3) {color:#FFFFFF; transition:all .4s ease; transition-delay:0.8s;} .ProductListA:hover h4:nth-child(3) span {color:#FFFFFF; transition:all .4s ease; transition-delay:0.8s;} .ProductListA:hover dd center img {width:116%; height:116%; left:-8%; top:-12%; transition:all .8s linear; transition-timing-function:cubic-bezier(0.47, 2.02, 0.31, -0.36);} .ProductListA:hover dd li {opacity:1; transition:all .5s ease;} /* 芘芘微莎品牌资讯 一行三个,float,自行控制width大小 CSS动画 */ .ImgList {width:33.3%; float:left; font-style:normal;/*390px;*/} .ImgList li, .ImgList h3, .ImgList h4 {width:375px; margin:auto;} .ImgList li {height:258px; border:#DDDDDD 1px solid; padding:2px; box-sizing:border-box; border-radius:5px; text-align:center;} .ImgList li blockquote {width:100%; height:100%; border-radius:5px; overflow:hidden; padding:0px;} .ImgList li blockquote img {width:100%; height:100%; position:relative; left:0%; top:0%; transition:all .3s ease;} .ImgList h3 {text-align:left; padding:15px 0px 5px 0px; color:#999999; line-height:22px; font-size:15px;} .ImgList h3 i {margin-right:3px;} .ImgList h4 {font-size:13px; color:#000000; text-align:left; background-color:#FFFFFF;} .ImgList:hover li blockquote img {width:110%; height:110%; left:-5%;top:-5%; transition:all .6s ease;} .ImgList:hover h3 {color:#000000; transition:all .6s ease; background-color:#EEEEEE;} .ImgList:hover h4 {color:#AAAAAA; transition:all .6s ease;} /* 荷普药业的公司简介下的 一行四个,点小图看大图 CSS动画 */ .BigSmall {width:25%; float:left;} .BigSmall center {width:210px; height:160px; margin:auto; border:#E0E0E0 1px solid; border-radius:7px; box-sizing:border-box; padding:2px;} .BigSmall center blockquote {width:100%; height:100%; overflow:hidden; border-radius:5px;} .BigSmall center blockquote img {width:100%; height:100%; border-radius:5px; position:relative; left:0%; top:0%; transition:all .3s ease; transition-delay:.3s;} .BigSmall center blockquote dd {width:100%; height:100%; position:relative; z-index:1; top:0%; background-color:rgba(255,128,0,0.6); text-align:center; transition:all .2s ease;} .BigSmall center blockquote dd i {font-size:30px; margin-top:60px; color:#FFFFFF; opacity:0;} .BigSmall center dt {width:100%; height:35px; position:relative; z-index:2; top:-35px; overflow:hidden; text-align:center; font-size:14px; color:#AAAAAA; line-height:35px; background-color:rgba(0,0,0,0.7);} .BigSmall center:hover dd {top:-124%; transition:all .5s ease; transition-delay:.3s;} .BigSmall center:hover dd i {opacity:1; transition:all .3s ease; transition-delay:.9s;} .BigSmall center:hover blockquote img {width:120%; height:120%; left:-10%; top:-10%; transition:all .3s ease;} .BigSmall center:hover dt {color:#FFFFFF;} /*************************** Frm图片,上有遮罩,点小图看大图,横竖图上传 *************************** 1:FrmCentify采用float,且指定大小(单位为px),因此在外框class为 GlobeWidth(特点是max-width:1360px;),因此可保证一排4个 2:但针对2k屏幕,1360的宽度明显小了,因此关山觉中,在页面,针对2k,我设置GlobeWidth的max-width为1800px 3:因此最对2K的.目前只用重写dt,ul,h3的对应长宽,FrmCentify width:430px height:390px, 74.4% 4:dd对应的是横图,dt对应的竖图 . ************************************************************************************************/ .FrmCentify {float:left; width:320px; height:290px; border:#EEEEEE 1px solid; margin-bottom:15px; vertical-align:top;} .MidCell {margin:0px 17px; /* 1)固定结构,一行三个,FrmCentify的width:290 间隔12 2)弹性结构,一行4个,,FrmCentify的width:320,间隔17,外包围:1335,FrmCentify的width未包括此间隔,因此设置外包围的宽度注意此问题 */} .MidCellA {margin-right:0;} .FrmCentify dd {width:285px; height:200px; margin:auto; display:flex; align-items:center; justify-content:center;/*垂直居中;水平居中*/ background:url(../Images/Common/FrmCentify_h.jpg) no-repeat center center; background-size:100% 100%; overflow:hidden; position:relative;top:15%;} .FrmCentify dd ul {width:86%!important; height:82.5%!important; /*width:245px; height:165px;*/ overflow:hidden; box-sizing:border-box;} .FrmCentify dd ul h3 {width:100%; height:100%; overflow:hidden; box-sizing:border-box;/*注意:h3的尺寸比h2(半透明黑色Cover层)的尺寸稍微大一些*/} .FrmCentify dd ul h3 img {width:100%; height:100%; margin:auto; transform:scale(1); transition:all .4s ease 0.3s;} .FrmCentify dd h4 {width:100%; height:100%; position:absolute; z-index:5; top:0px; background:url(../Images/Common/FrmCentifyA.png) no-repeat center center; background-size:100% 100%;} .FrmCentify dd h2 {width:88.7%; height:86%; /*width:253px; height:172px;*/ position:absolute; z-index:2; margin:4% auto; display:flex; align-items:center; justify-content:center; background-color:rgba(0,0,0,0.4);/*遮罩的透明度*/ line-height:21px; opacity:0; transition:all .3s ease 0.3s;} .FrmCentify dd h2 span {color:#FFFFFF; font-size:1rem; opacity:0;transition:all .3s ease;} .FrmCentify dd h2 span i {font-size:33px; margin-bottom:10px;} .FrmCentify dd:hover ul h3 img {transform:scale(1.2); transition:all .5s ease;} .FrmCentify dd:hover h2 {opacity:1; transition:all .3s ease;} .FrmCentify dd:hover h2 span {opacity:1; transition:all .4s ease 0.3s;} .FrmCentify dt {width:225px; height:285px; margin:auto; display:table-cell; vertical-align:middle; overflow:hidden; position:relative; top:2px; background:url(../Images/Common/FrmCentify_v.jpg) no-repeat center center; background-size:100% 100%;} .FrmCentify dt ul {width:90.2%; height:93%; /*width:203px; height:265px;*/ overflow:hidden; box-sizing:border-box; display:table-cell; vertical-align:middle;} .FrmCentify dt ul h3 {width:88.7%!important; height:98%!important; /*width:180px; height:260px;*/ overflow:hidden; position:relative; top:1px;/*注意:h3的尺寸比h2(半透明黑色Cover层)的尺寸稍微大一些*/} .FrmCentify dt ul h3 img {width:100%; height:100%; margin:auto; transform:scale(1); transition:all .4s ease 0.3s;} .FrmCentify dt h2 {width:90.2%; height:93%; /*width:203px; height:265px;*/ position:absolute; z-index:2; top:11px; left:11px; display:flex; align-items:center; justify-content:center; background-color:rgba(0,0,0,0.4); line-height:21px; opacity:0; transition:all .3s ease 0.3s;} .FrmCentify dt h2 span {color:#FFFFFF; font-size:1rem; opacity:0; transition:all .3s ease;} .FrmCentify dt h2 span i {font-size:33px; margin-bottom:10px;} .FrmCentify dt:hover ul h3 img {transform:scale(1.2); transition:all .5s ease;} .FrmCentify dt:hover h2 {opacity:1; transition:all .3s ease;} .FrmCentify dt:hover h2 span {opacity:1; transition:all .4s ease 0.3s;} .FrmCentify li {width:100%; height:100%; vertical-align:middle;} /* 芘芘微莎团队成员,带成员头像 */ .Parter {display:table; margin:auto;} .Parter dd {display:table-cell; width:300px; vertical-align:top; text-align:center; padding-top:10px;} .Parter dt {display:table-cell; width:600px; vertical-align:top; text-align:left;} .Parter dd span {display:block; width:220px; height:220px; margin:auto; border-radius:220px; overflow:hidden;} .Parter dd span img {width:100%; height:100%; transition:all .3s ease;} .Parter dt h2 {height:50px; line-height:50px; color:#999999; font-size:16px;} .Parter dt h2 span {color:#000000; font-size:30px; font-family:"楷体";} .Parter dt h3 {height:50px; vertical-align:top; font-size:16px; color:#999999;} .Parter dt h4 {min-height:190px;} .Parter dt h4 blockquote {padding:8px 8px; width:96%; line-height:22px; color:#878787; background-color:#F6F6F6; border-radius:7px;} .Parter:hover dd span img {transform:scale(1.2); transition:all .5s ease;} .Parter:hover dt h4 blockquote {color:#000000; background-color:#F0F0F0;} .ParterDivide {width:80%; height:40px; background:url(../images/DivideLineC.png) no-repeat center center; opacity:0.15; background-size:100% auto;margin:auto;} /* 留言板,使用grid布局 grid-template-columns:每行4列*/ .GridSuggest {display:grid; grid-template-columns:12% 38% 12% 38%; padding:5px 4px; box-sizing:border-box; margin:auto;} .GridSuggest dd, .GridSuggest dt, .GridSuggest li {padding:8px 0 10px 0;} .GridSuggest li {font-size:16px; color:#999999; text-align:center; grid-column-start:1; grid-column-end:5;} .GridSuggest li:nth-child(1) {background-color:#F4F4F4; margin-bottom:10px;} .GridSuggest li hr {background:url(../images/common/LineA.gif) repeat-x top center; border-width:0; height:20px; opacity:0.2;} .GridSuggest li span {float:right; padding:6px 17px 8px 17px; font-size:20px; background-color:#0A489C; border-radius:6px; margin-right:20px;} .GridSuggest li tt {float:left; color:#BBBBBB; font-size:14px;} .GridSuggest li span a:link, .GridSuggest li span a visited {color:#FFFFFF;} .GridSuggest li span a:hover {color:#FFFF00; border-bottom:#FFFF00 1px dashed;;} .GridSuggest dt {text-align:right; height:40px; padding-top:11px;} .GridSuggest dt sup {color:#FF0000; margin-right:5px;} .GridSuggest dd {text-align:left; padding:10px 0; color:#888888; font-size:15px;} .GridSuggest dd input[type=text] {width:95%; border:#DDDDDD 1px solid; background-color:#F8F8F8; height:30px; line-height:30px; font-size:16px; color:#000000; text-indent:8px; text-align:left;} .GridSuggest dd textarea {border:#DDDDDD 1px solid; background-color:#F8F8F8; height:50px; line-height:20px; font-size:16px; color:#000000; padding:5px; text-align:left;} /*************************** 上页 下页 页码 Css 就三种样式,不要再增加了 **************************** PreNextDiv: 比比芘芘薇莎,居右,圆形,未使用背景图 PreNextDD 对应中间数字样式 PreNextDivA: 万盟数控,上页下页页码皆为方形,居中,按钮为背景图 PreNextDivA blockquote 上下页按钮与列表内容之间的箭头分割线 PreNextDivA blockquote::after 完成背景图透明 PreNextDivB: 北京永旺 方形页码,居中显示,按钮为Css,上下页按钮按要求隐含 PreNextDivB dd 上页,下页 PreNextDivB li span, PreNextDivB li tt 页码 当前页面 ************************************** ***************************************/ .PreNextDiv {padding:15px 0px 0px 0px; margin:auto!important; width:100%;} .PreNextDiv blockquote {border-top:#DDDDDD 1px solid;width:100%!important; margin:auto;height:0px;} .PreNextDiv ul {float:right; white-space:nowrap; padding-top:10px;} .PreNextDiv ul li {display:inline-block; padding:0px 10px; text-align:center; cursor:pointer;} .PreNextDiv ul li span, .PreNextDiv ul li tt {display:inline-block; width:25px; height:25px; line-height:25px; margin:0px 3px; border:#CCCCCC 1px solid; border-radius:25px; text-align:center; font-size:12px; color:#000000; font-family:"Tahoma";} .PreNextDiv ul li tt {background-color:#193A84; color:#FFFF00; font-size:14px; width:30px; height:30px; line-height:30px; cursor:default;} .PreNextDiv ul li span:hover {background-color:#676767; color:#FFFFFF;} .PreNextDD, .PreNextDDDisable {display:inline-block; height:30px; width:30px; border-radius:25px; border:#BBBBBB 1px solid; background-color:#E0E0E0; text-align:center; line-height:30px; font-size:20px; color:#999999;} .PreNextDD:hover {background-color:#676767; color:#FFFFFF;} .PreNextDDDisable {opacity:0.4; border:#AAAAAA 1px solid;} .PreNextDivA {width:100%; padding:10px 0px; text-align:center;} .PreNextDivA blockquote {margin:auto; height:1px; position:relative;} .PreNextDivA blockquote::after {content:""; width:100%!important; opacity:0.2; position:absolute; z-index:1; left:0; top:0; bottom:0; right:0; background:url(../Images/Common/LineA.gif) repeat left center;} .PreNextDivA blockquote i {color:#AAAAAA; position:relative; top:-8px; float:left;} .PreNextDivA dd, .PreNextDivA li {text-align:center; display:inline-block; font-size:1.2em; color:#000000;} .PreNextDivA dd, .PreNextDivA li span, .PreNextDivA li tt {display:inline-block; width:32px; height:32px; line-height:32px; background-size:100% 100%; margin:0px 2px 0px 2px; font-size:1.2em; color:#000000;} .PreNextDivA dd {margin:10px 10px 0px 10px; background:url(../images/Common/Paging.png);} .PreNextDivA li span {background:url(../images/Common/Paging.png); cursor:pointer;} .PreNextDivA li tt {background:url(../images/Common/PagingA.png); color:#FFFFFF;} .PreNextDivA li span:hover {background:url(../images/Common/PagingA.png); color:#FFFFFF;} .PreNextDivB {clear:both; width:100%; margin:0; text-align:center;} .PreNextDivB li {display:inline-block; vertical-align:top;} .PreNextDivB dd, .PreNextDivB li span, .PreNextDivB li tt {display:inline-block; font-size:1.4rem; text-align:center; width:50px; height:50px; line-height:50px; border-radius:5px; margin:0 8px;} .PreNextDivB dd {color:#FFFFFF;} .PreNextDivB dd {background-color:#2E7CC1; cursor:pointer;} .PreNextDivB dd:hover {background-color:#7ABAFD;} .PreNextDivB li span {background-color:#FFF; border:#F0F0F0 1px solid; cursor:pointer; font-family:Arial,Verdana;} .PreNextDivB li span:hover {background-color:#CCC; color:#FFFFFF;} .PreNextDivB li tt {background-color:#7D7D7D; color:#FFFFFF;} .PreNextDivB_Y {clear:both; width:96vw; margin:0; text-align:center;} .PreNextDivB_Y li {display:inline-block;} .PreNextDivB_Y dd, .PreNextDivB_Y li span, .PreNextDivB_Y li tt {display:inline-block; text-align:center; font-size:1.2rem; width:3rem; height:3rem; line-height:3rem; border-radius:0.3rem; margin:0 0.5rem; } .PreNextDivB_Y dd {color:#FFFFFF; line-height:2.5rem;} .PreNextDivB_Y dd {background-color:#B62883; cursor:pointer;} .PreNextDivB_Y li span {background-color:#FFFFFF; border:#F5F5F5 1px solid; cursor:pointer;} .PreNextDivB_Y li tt {background-color:#7D7D7D; color:#FFFFFF;} /***************** 后台colun_list_2.htm的勾选自写样式复选框 *********************** SiteMap: 用于SiteMap.htm页面(北京永旺) */ .SiteMap {width:47%; display:inline-block; font-size:0; vertical-align:top;} .SiteMap dd {width:92%; font-size:1.15rem; color:#000000; text-align:left;} .SiteMap dd blockquote {padding:1.4rem 0 0.6rem 0; text-indent:1rem; margin-bottom:0.6rem; border-bottom:#CCCCCC 1px solid;} .SiteMap dd blockquote>a {text-decoration:initial; color:#000000; font-weight:bolder; font-size:17px;} .SiteMap dd li {padding:0.4rem 0; color:#B50081; font-size:1.1rem; position:relative; text-indent:1.4rem;} .SiteMap dd li::before {content:""; position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-4px; border-top:1px solid #B50081; border-right: 1px solid; transform:rotate(45deg);} .SiteMap dd li a {text-decoration:initial; color:#B50081;} .SiteMap dd li a:hover {border-bottom:#B50081 1px solid;} .SiteMap dd a:hover {} .Event {width:100%; margin:auto;} .Event h2 {font-size:40px; color:#596156; width:50%; margin:auto; line-height:0; padding-top:35px; text-align:center; letter-spacing:3px;} .Event h2 hr {border-width:0; height:20px;} .Event h2 i {font-size:25px; color:#AACE3A; position:relative; top:3px;} .Event center {display:table; width:100%; margin:auto; border-top:#F6F6F6 1px solid;} .Event center dd {display:table-cell; width:50%;; vertical-align:top; font-size:16px; box-sizing:border-box;} .Event center dd:nth-child(1) {text-align:right; border-right:#BBBBBB 3px solid;} .Event center dd:nth-child(2) {text-align:left;} .Event center dd:nth-child(1) hr {border-width:0; height:35px;} .Event center dd:nth-child(2) hr {border-width:0; height:160px;} .Event center dd h3, .Event center dd h4 {padding:10px 0; font-size:0;} .Event center dd h3 span, .Event center dd h4 span {display:inline-block; vertical-align:top;} .Event center dd h3 span:nth-child(1) {height:44px; width:20px; background:url(../Images/Common/Sprite.jpg) no-repeat 0px -44px;} .Event center dd h3 span:nth-child(1) span {background-position:-20px 0px;opacity:0;} .Event center dd h3 span:nth-child(2), .Event center dd h4 span:nth-child(1){padding:1px 7px; background-color:#383842; font-size:32px; color:#FFFFFF;} .Event center dd h4 span:nth-child(2) {height:44px; idth:20px;background:url(../Images/common/Sprite.jpg) no-repeat 0px 0px;} .Event center dd h4 span:nth-child(2) span {display:inline-block!important;opacity:0; background:url(../Images/Common/Sprite.jpg) no-repeat -20px -44px;} .Event center dd blockquote {padding:10px 45px 10px 0px;} .Event center dd:nth-child(2) blockquote {padding:10px 0px 10px 45px;} .Event center dd blockquote img {max-width:90%; height:auto; margin:10px 0 10px 0;} .Event center dd blockquote p {padding:8px 0 2px 0; color:#000000; font-size:15px;} .Event center dd blockquote p tt {color:#888888; display:block; line-height:18px; font-size:13px;} .Event center dd blockquote p span {border-bottom:#CCCCCC 1px dashed; /*background:url(../Images/Common/LineA.gif) repeat-x left bottom;*/} .Event center dd:nth-child(1):hover h3 span:nth-child(1) span {opacity:1;} .Event center dd:nth-child(1):hover h3 span:nth-child(2) {background-color:#AACE3A;} .Event center dd:nth-child(2):hover h4 span:nth-child(2) span {opacity:1;} .Event center dd:nth-child(2):hover h4 span:nth-child(1) {background-color:#AACE3A;} .Event center dd:hover blockquote {background-color:#F9F9F9;} .Event center:nth-last-of-type(1) {padding-bottom:25px;} .Event address {height:20px; width:100%; margin:auto; background:url(../Images/Common/LineC.gif) repeat-x left top;opacity:0.2;} /* 用于自写样式,与后台colun_list_2.htm的使用自写样式复选框设置对应.比如关山觉的联系我们内容 */