*{margin:0;padding:0;word-wrap: break-word;} li{list-style:none;} a{text-decoration:none;} .clearfix:after{height:0;clear:both;content:".";display:block;visibility:hidden;} img{border:0;display:block;} body{background-color:#f0f0f0;font-family:Microsoft YaHei,-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1); /*font-family: "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;cursor: url(/.images/cursor.ico),auto; */} body:before{content:'';top:0;bottom:0;left:0;right:0;display:block;opacity:0.086;z-index:-1;position:fixed;background-color:#fff;background:url(../images/hlow.jpg) center/cover no-repeat;} /* 延迟加载中的样式 */ .imglazyloading{} .imglazyloading img{margin:33% auto;} /* Ali_icofont引入 */ @font-face { font-family:'iconfont'; src: url('../fonts/iconfont.eot');/* IE9*/ src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('../fonts/iconfont.woff2') format('woff2'),/* chrome, firefox */ url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../fonts/iconfont.svg#iconfont') format('svg');/* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 默认样式 */ /* 我喜欢的字体 */ @font-face { font-family:'Comic Sans MS'; font-style: normal; font-weight: 400; src: local('Comic Sans MS'), local('Comic Sans MS'), url(../fonts/comic_sans_ms.ttf) format('truetype'); } /* -------------------------------------------------------------公共头部部分------------------------------------------------------- */ /* 顶部toper */ #toper{height:20px;width:100%;} #toper .loginAndregist{height:20px;background:rgba(240,240,240,0.2);margin:0 auto;width:1150px !important;font-size:12px;} #toper .loginAndregist p{display:inline-block;color:#666;} #toper .loginAndregist span{display:inline-block;float:right;margin-right:20px;} #toper .loginAndregist span a{color:rgba(79,153,210,1);} /* banner动图部分 */ header{margin:0 auto;width:1150px !important;} #banner{height:138px;width:100%;background:url(../images/banner3.jpg);background-size:100%;background-position:0 -300px;/*-45px*/} /* #nav */ .nav{height:59px;width:100%;background:#f2f2f2;} .navfix{top:0px;left:0px;z-index:199;border-left-width:0px;border-right-width:0px;height:59px;width:100%;position:fixed;background:#fff;opacity:0.95;box-shadow:0 1px 5px #8FA4B3;} /* Rinlogo */ #nav .logoimg{display:none;position:absolute;top:14.5px;left:20px;height:30px;width:auto;} #nav .logoimg:hover{transform:rotateY(360deg);-webkit-transition:all 0.75s;-moz-transition:all 0.75s;-o-transition:all 0.75s;transition:all 0.75s;} #nav ul{display:block;width:1150px;height:59px;margin:0 auto;} #nav ul li{display:block;width:115px;height:59px;float:left;} #nav ul li a{display:block;width:115px;height:57px;line-height:59px;text-align:center;color:rgb(21, 21, 21);font-size:17px;} #nav ul li a:hover{background:#cebfb8;text-shadow:0 1px 1px rgba(91,91,91,0.25);width:105px;height:49px;line-height:49px;margin:5px 0 0 5px;border-radius:9px;-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;transition:all 0.6s;border-bottom:2px solid #666;} /* navi_search导航处搜索弃用~ */ #navi_search{float:right;height:30px;width:200px;padding:14.5px;position:absolute;top:0;right:50px;display:none;} #navi_search input{height:30px;width:0px;border-radius:10px;text-indent:5px;outline:none;border:0px solid #ccc;float:left;} #navi_search img{height:30px;width:30px;display:block;float:left;margin-left:5px;cursor:pointer;} /*推荐圆*/ #itemcircle{height:87px;width:1150px;background:#fbfbfb;} #itemcircle .itemcircles{display:block;width:230px;height:60px;margin-top:15px;float:left;background: url(../images/line.png) left no-repeat;} #itemcircle .itemcircles:nth-child(1){background:none;} #itemcircle .itemcircles a.acircle{background:#4c98d2;height:57px;width:57px;float:left;border-radius:50%;margin-left:24px;display:inline-block;text-align:center;line-height:57px;color:#fff;font-size:18px;font-weight:500;box-shadow:0 0 3px #63a3d4;font-family:"Microsoft YaHei"} #itemcircle .itemcircles a.acircle:hover{transform:rotateY(360deg);-webkit-transition:all 0.75s;-moz-transition:all 0.75s;-o-transition:all 0.75s;transition:all 0.75s;} /* 弃用图片#itemcircle>.itemcircles>a>img时 #itemcircle .itemcircles a.acircle{width:57px;height:57px;} #itemcircle .itemcircles a img{margin-left:24px;display:inline-block;float:left;vertical-align:top;border:0;width:57px;height:57px;} #itemcircle .itemcircles a img:hover{transform:rotateY(360deg);-webkit-transition:all 0.75s;-moz-transition:all 0.75s;-o-transition:all 0.75s;transition:all 0.75s;} */ #itemcircle .itemcircles ul{width:140px;height:60px;float:right;} #itemcircle .itemcircles ul li{float:left;font-size:14px;padding:5px 12px 3px 5px;} #itemcircle .itemcircles ul li a{color:#333;} /* 中间AD部分 */ #ad{height:60px;width:1150px;margin:5px auto -5px;} #ad img{height:60px;width:100%;} /* -------------------------------------------------------------公共头部部分------------------------------------------------------ */ /* -------------------------------------------------------以下是展示页主体部分样式--------------------------------------------------- */ section#miancontent{width:1150px;margin-left:auto;margin-right:auto;} /** ****************************** 以下是index首页newblog主体部分 * *******************************/ #newblog{width:1150px;margin-top:12px;} /* ------主体左边----- */ #newblog .lwrap{width:800px;background:#fefefe;float:left;} #newblog .lwrap h2.headtitle{padding:0 10px;line-height:40px;height:40px;font-size:20px;border-bottom:1px solid #e1e1e1;border-left:5px solid #999;color:#676767;font-family:KaiTi;} #newblog .lwrap ul{display:block;padding:10px;overflow:hidden;} #newblog .lwrap ul li{display:block;border-bottom:#ccc 1px solid;height:200px;width:100%;margin-bottom:10px;overflow:hidden;} /* 1 */ #newblog .lwrap ul li h3{height:30px;width:780px;line-height:30px;margin:10px 0;} #newblog .lwrap ul li h3 span{background:#444;padding:2px 5px;font-size:14px;color:#FFF;border-radius:2px;position:relative;margin-right:20px;} #newblog .lwrap ul li h3 a.articlemark{color:#fff;} #newblog .lwrap ul li h3 a.articlemark:after{content:"";width:0px;height:0px;border-top-width:6px;border-top-style:solid;border-top-color:transparent;border-left-width:6px;border-left-style:solid;border-left-color:#444;border-bottom-width:6px;border-bottom-style:solid;border-bottom-color:transparent;margin:0px;padding:0px;position:absolute;right:-6px;top:6px;} #newblog .lwrap ul li h3 a.articletitle{color:#555;font-size:16px;} /* 2 */ #newblog .lwrap ul li div.articleinfo{height:115px;width:780px;} #newblog .lwrap ul li div.articleinfo span.articlepic{overflow:hidden;width:218px;height:115px;display:block;float:left;margin-right:20px;background:rgba(51, 51, 51, 0.2);} #newblog .lwrap ul li div.articleinfo span.articlepic img{width:100%;} #newblog .lwrap ul li div.articleinfo p{color:#888;line-height:24px;font-size:14px;} /* 3 */ #newblog .lwrap ul li div.articledata{height:20px;width:780px;margin-top:13px;overflow:hidden;clear:both;display:block;color:#838383;font-size:12px;} #newblog .lwrap ul li div.articledata .f_l{float:left;} #newblog .lwrap ul li div.articledata .f_r{float:right;} #newblog .lwrap ul li div.articledata a{color:#4f99d2;} #newblog .lwrap ul li div.articledata span{margin:0 10px 0 0;padding-left:20px;} #newblog .lwrap ul li div.articledata span.posttime{background:url(../images/posttime.gif) no-repeat left center;} #newblog .lwrap ul li div.articledata span.viewnum{background:url(../images/viewnum.png) no-repeat left center;} #newblog .lwrap ul li div.articledata span.readmore a{color:#4f99d2;font-size:13px;} /* 4 */ #newblog .lwrap ul li div.articleline{width:0px;height:2px;background:#444;-moz-transition:all 5s ease;-webkit-transition:all 5s ease;transition: all 5s ease;clear:both;} #newblog .lwrap ul li:hover .articleline{width:100%;} /* ------主体左边----- */ /* ------主体右边----- */ #newblog .rwrap{width:330px;float:right;} /* Search搜索 */ #newblog .rwrap div#rsearch{width:330px;height:150px;overflow:hidden;background:#fefefe;margin-bottom:15px;} #newblog .rwrap div#rsearch h2.headtitle{padding:0 10px;line-height:40px;height:40px;font-size:20px;border-bottom:1px solid #e1e1e1;border-left:5px solid #999;color:#676767;font-family:KaiTi;} #newblog .rwrap div#rsearch>div{height:55px;line-height:55px;width:330px;} #newblog .rwrap div#rsearch div.searchin{border-bottom:1px solid #ccc;} #newblog .rwrap div#rsearch div.searchout{} #newblog .rwrap div#rsearch>div form{height:45px;width:300px;padding:5px 15px;line-height:45px;} #newblog .rwrap div#rsearch>div form span{display:block;float:left;height:45px;width:210px;} #newblog .rwrap div#rsearch>div form span>input{height:26px;width:200px;border:1px solid #999;border-radius:5px;outline:none;text-indent:6px;font-size:17px;font-family:KaiTi;color:#000;} #newblog .rwrap div#rsearch>div form span>input:focus{box-shadow:0 0 5px rgba(79,153,210,1);-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;} #newblog .rwrap div#rsearch>div form .searchgo{display:block;float:right;height:45px;width:80px;} #newblog .rwrap div#rsearch>div form .searchgo>input{text-align:center;height:30px;width:80px;border-radius:5px;border:1px solid #999;cursor:pointer;font:13px/100% Arial, Helvetica, sans-serif;line-height:31px;box-shadow:0 1px 2px rgba(0,0,0,.2);outline:none;background:#c2c2c2;} #newblog .rwrap div#rsearch>div form .searchgo>input:hover{-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;box-shadow:0 1px 2px rgba(0,0,0,.6);} /* ringhtAD活动推荐 */ #newblog .rwrap .ringhtAD{width:330px;background:#fefefe;margin-bottom:15px;} #newblog .rwrap .ringhtAD h2.headtitle{padding:0 10px;line-height:40px;height:40px;font-size:20px;border-bottom:1px solid #e1e1e1;border-left:5px solid #999;color:#676767;font-family:KaiTi;} #newblog .rwrap .ringhtAD .ringhtADimg{width:330px;height:210px;background:#fefefe;margin-top:10px;position:relative;overflow:hidden;} #newblog .rwrap .ringhtAD .ringhtADimg a{display:block;width:320px;height:200px;margin:5px;background:rgba(0, 0, 0, 0.86);} #newblog .rwrap .ringhtAD .ringhtADimg a i{display:block;width:320px;height:200px;opacity:0.7;-moz-transition:all .5s ease;-webkit-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;overflow:hidden;} #newblog .rwrap .ringhtAD .ringhtADimg:hover a>i{opacity:1;} #newblog .rwrap .ringhtAD .ringhtADimg a i img{width:100%;height:200px;} #newblog .rwrap .ringhtAD .ringhtADimg a h3{color:#fff;display:block;font-weight:normal;font-size:16px;line-height:1.5;position:absolute;bottom:0;padding:5px 10px;left:0;right:0;background:url(../images/tbg.png) repeat-x;} #newblog .rwrap .ringhtAD .ringhtADimg a span{position:absolute;top:10px;left:10px;padding:6px 10px;background:rgba(50,124, 154,0.8);font-size:12px;display:block;color:#FFF;border-radius:3px;} /* Demo实验 */ #newblog .rwrap .demorecommend{overflow:hidden;background:#fefefe;margin-bottom:15px;} #newblog .rwrap .demorecommend h2.headtitle{padding:0 10px;line-height:40px;height:40px;font-size:20px;border-bottom:1px solid #e1e1e1;border-left:5px solid #999;color:#676767;font-family:KaiTi;} #newblog .rwrap .demorecommend ul{padding:10px;} #newblog .rwrap .demorecommend ul li{border-bottom:solid 1px #EAEAEA;font-size:14px;margin:0 0 10px 0;padding:0 0 10px 0;overflow: hidden;} #newblog .rwrap .demorecommend ul li b{height:30px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;} #newblog .rwrap .demorecommend ul li b a{color:#555;} #newblog .rwrap .demorecommend ul li .pictxt{display:block;} #newblog .rwrap .demorecommend ul li .pictxt p{display:block;width:310px;height:96px;line-height:24px;color:#888;overflow:hidden;text-overflow:ellipsis;} #newblog .rwrap .demorecommend ul li .pictxt p i{width:100px;height:90px;overflow:hidden;display:block;border:#efefef 1px solid;float:left;margin-right:10px;} #newblog .rwrap .demorecommend ul li .pictxt p i img{height:100%;margin:auto;-moz-transition:all .5s ease;-webkit-transition:all .5s ease;transition:all .5s ease;} #newblog .rwrap .demorecommend ul li a:hover{color:#000;} #newblog .rwrap .demorecommend ul li:hover p{color:#000;} #newblog .rwrap .demorecommend ul li:hover b a{color:#000;} #newblog .rwrap .demorecommend ul li:hover p i img{transform:scale(1.1);} /* 随心而录 */ #newblog .rwrap .followheart{width:330px;background:#fefefe;margin-bottom:15px;} #newblog .rwrap .followheart h2.headtitle{padding:0 10px;line-height:40px;height:40px;font-size:20px;border-bottom:1px solid #e1e1e1;border-left:5px solid #999;color:#676767;font-family:KaiTi;} #newblog .rwrap .followheart .topimg{width:330px;height:210px;background:#fefefe;margin-top:10px;position:relative;overflow:hidden;} #newblog .rwrap .followheart .topimg a{display:block;width:320px;height:200px;margin:5px;background:rgba(0, 0, 0, 0.86);} #newblog .rwrap .followheart .topimg a i{display:block;width:320px;height:200px;opacity:0.7;-moz-transition:all .5s ease;-webkit-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;overflow:hidden;} #newblog .rwrap .followheart .topimg:hover a>i{opacity:1;} #newblog .rwrap .followheart .topimg a i img{width:100%;height:200px;} #newblog .rwrap .followheart .topimg a h3{color:#fff;display:block;font-weight:normal;font-size:16px;line-height:1.5;position:absolute;bottom:0;padding:5px 10px;left:0;right:0;background:url(../images/tbg.png) repeat-x;} #newblog .rwrap .followheart .topimg a span{position:absolute;top:10px;left:10px;padding:6px 10px;background:rgba(50,124, 154,0.8);font-size:12px;display:block;color:#FFF;border-radius:3px;} /* 其他 othersAD */ #newblog .rwrap .othersAD{width:330px;background:#fefefe;margin-bottom:15px;} #newblog .rwrap .othersAD h2.headtitle{padding:0 10px;line-height:40px;height:40px;font-size:20px;border-bottom:1px solid #e1e1e1;border-left:5px solid #999;color:#676767;font-family:KaiTi;} #newblog .rwrap .othersAD .ringhtADimg{width:330px;height:210px;background:#fefefe;margin-top:10px;position:relative;overflow:hidden;} #newblog .rwrap .othersAD .ringhtADimg a{display:block;width:320px;height:200px;margin:5px;background:#000;} #newblog .rwrap .othersAD .ringhtADimg a i{display:block;width:320px;height:200px;opacity:0.7;-moz-transition:all .5s ease;-webkit-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;overflow:hidden;} #newblog .rwrap .othersAD .ringhtADimg:hover a>i{opacity:1;} #newblog .rwrap .othersAD .ringhtADimg a i img{width:100%;height:200px;} #newblog .rwrap .othersAD .ringhtADimg a h3{color:#fff;display:block;font-weight:normal;font-size:16px;line-height:1.5;position:absolute;bottom:0;padding:5px 10px;left:0;right:0;background:url(../images/tbg.png) repeat-x;} #newblog .rwrap .othersAD .ringhtADimg a span{position:absolute;top:10px;left:10px;padding:6px 10px;background:rgba(50,124, 154,0.8);font-size:12px;display:block;color:#FFF;border-radius:3px;} /* ------主体右边----- */ /** ****************************** 以上是index首页newblog主体部分 ******************************* **/ /* ****************************** 次页共有样式 *********************************** */ /*---- kanban部分 （demo实验、学无止境、随心所录、关于Rin、共用）----*/ section#miancontent .kanban{width:1150px;/*height:105px;*/background:#fefefe;margin-bottom:8px;} section#miancontent .kanban h2.kanbantitle{padding:0 10px;line-height:40px;height:40px;font-size:20px;border-bottom:1px solid #e1e1e1;border-left:5px solid #999;color:#676767;font-family:"Comic Sans MS",KaiTi,"Microsoft YaHei";font-weight:500;} section#miancontent .kanban .kanbanexplain{padding:10px;} section#miancontent .kanban .kanbanexplain p{text-indent:18px;color:#555;font-size:14px;line-height:23px;} /*---- kanban部分 （demo实验、学无止境、随心所录、关于Rin、共用）----*/ /*---- itmecase分类部分 （demo实验、学无止境、随心所录共用）----*/ section#miancontent .itmecase{height:58px;width:1150px;background:#fefefe;border-bottom:1px solid #ddd;} section#miancontent .itmecase ul{display:block;padding:10px;height:38px;} section#miancontent .itmecase ul li{display:block;width:100px;height:38px;float:left;text-align:center;margin-right:10px;border-radius:4px;background:#e4e4e4;} section#miancontent .itmecase ul li:nth-child(1){width:60px;} section#miancontent .itmecase ul li a{display:block;color:#000;font-size:14px;width:100px;height:38px;line-height:38px;border-radius:4px;-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;} section#miancontent .itmecase ul li a:hover{background:#4fa3c5;} section#miancontent .itmecase ul li a b{font-weight:400;} /* item选中时的颜色 */ section#miancontent .itmecase ul li:nth-child(1) a{width:60px;color:#fff;background:#4fa3c5;} /* 搜索Demo */ section#miancontent .itmecase .casesearchsection{float:right;height:38px;display:block;} section#miancontent .itmecase .casesearchsection input{height:26px;width:175px;border:1px solid #999;border-radius:3px;outline:none;text-indent:6px;font-size:17px;font-family:KaiTi;color:#000;margin-top:5px;} section#miancontent .itmecase .casesearchsection input:focus{box-shadow:0 0 5px rgba(79,153,210,1);-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;} section#miancontent .itmecase .casesearchsection button{text-align:center;height:30px;width:80px;border-radius:5px;border:1px solid #999;cursor:pointer;font:13px/100% Arial, Helvetica, sans-serif;line-height:32px;box-shadow:0 1px 2px rgba(0,0,0,.2);outline:none;background:#c2c2c2;margin:4px;margin-left:10px;} section#miancontent .itmecase .casesearchsection button:hover{-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;box-shadow:0 1px 2px rgba(0,0,0,.6);} /*---- itmecase分类部分 （demo实验、学无止境、随心所录共用）----*/ /*---- showpaging翻页部分 （demo实验、学无止境、随心所录共用）----*/ section#miancontent .showpaging{height:80px;width:1150px;padding-top:15px;/* background:#fefefe; */} section#miancontent .showpaging .gotopage{height:80px;width:1150px;/* border-top:1px solid skyblue; */text-align:center;} section#miancontent .showpaging .gotopage ul{display:inline-block;height:40px;margin:0 auto;padding:20px 0;} section#miancontent .showpaging .gotopage ul li{display:block;height:40px;width:40px;line-height:40px;border-radius:4px;float:left;background:#fefefe;cursor:pointer;margin:0 4px;font-size:14px;color:#787878;} section#miancontent .showpaging .gotopage ul li:hover{background:#4fa3c5;color:#fff;} /*---- showpaging翻页部分 （demo实验、学无止境、随心所录共用）----*/ /* ****************************** 次页共有样式 *********************************** */ /*--------------------- 以下是次页demo实验demoshow主体部分 ---------------------*/ #demoshow{/* min-height:1200px; */width:1150px;margin-top:12px;} /*---- denoshows展示部分 ----*/ #demoshow .demoshows{width:1150px;background:#fefefe;} #demoshow .demoshows ul{display:block;position:relative;} #demoshow .demoshows ul:before{content:"";position:absolute;background:#fefefe;width:1px;height:100%;top:0;left:0;} #demoshow .demoshows ul:after{content:"";position:absolute;background:#fefefe;width:100%;height:1px;bottom:0;left:0;} #demoshow .demoshows ul li{display:block;width:260px;height:298px;padding:13px;border-bottom:#dedede 1px solid;border-left:#dedede 1px solid;float:left;-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;} #demoshow .demoshows ul li:hover{background:#fff;box-shadow:#aaa 1px 1px 8px;} #demoshow .demoshows ul li div.demoshowbox{width:260px;height:298px;border-radius:5px;} #demoshow .demoshows ul li div.demoshowbox .demoshowtitlepic{width:260px;height:168px;position:relative;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} #demoshow .demoshows ul li div.demoshowbox .demoshowtitlepic img{width:260px;height:168px;border-radius:5px;-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;} #demoshow .demoshows ul li div.demoshowbox .demoshowtitlepic:hover img{transform:scale(1.1);} #demoshow .demoshows ul li div.demoshowbox .demoshowtitlepic i.iconFlag{display:inline-block;font-size:12px;font-style:normal;color:#fff;text-shadow:0 0 3px #333;position:absolute;left:15px;top:10px;z-index:10;} #demoshow .demoshows ul li div.demoshowbox .demoshowexplain{padding-top:10px;height:120px;width:260px;overflow:hidden;} #demoshow .demoshows ul li div.demoshowbox .demoshowexplain h3{color:#4e4e4e;font-size:15px;text-indent:10px;line-height:30px;height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Microsoft YaHei;} #demoshow .demoshows ul li div.demoshowbox .demoshowexplain p{display:block;height:40px;line-height:20px;font-size:12px;text-indent:15px;color:#888;overflow:hidden;margin-top:10px;} #demoshow .demoshows ul li div.demoshowbox .demoshowexplain span{display:block;height:20px;font-size:12px;line-height:20px;overflow:hidden;margin-top:15px;color:#4fa3c5;;/* color:#04ac71; */} /*---- denoshows展示部分 ----*/ /*--------------------- 以上是次页demo实验demoshow主体部分 ---------------------*/ /*--------------------- 以下是次页学无止境studydoc主体部分 ---------------------*/ #studydoc{/* min-height:1200px; */width:1150px;margin-top:12px;} /*---- studydocs文档部分 ----*/ #studydoc .studydocs{width:1150px;background:#fefefe;} #studydoc .studydocs ul{display:block;width:1150px;position:relative;} #studydoc .studydocs ul:after{content:"";position:absolute;background:#fefefe;width:100%;height:1px;bottom:0;left:0;} #studydoc .studydocs ul li{display:block;width:1150px;overflow:hidden;border-bottom:1px dashed #5e90a5;} #studydoc .studydocs ul li:last-child{border:none;} #studydoc .studydocs ul li a{display:block;width:1150px;height:70px;line-height:70px;font-size:16px;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;overflow:hidden;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-property:color,background-color;transition-property:color,background-color;} #studydoc .studydocs ul li a:hover{-webkit-animation-name:hvr-lists;animation-name:hvr-lists;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-color:#e2e8ea;/* color:#ffffff; */} #studydoc .studydocs ul li a .sortnum{width:70px;color:#333;font-family:Georgia,Microsoft YaHei;text-align:center;float:left;} #studydoc .studydocs ul li a .studydocstitle{width:950px;height:70px;font-size:15px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;} #studydoc .studydocs ul li a .recordingtime{width:120px;height:70px;color:#333;font-family:Georgia,Microsoft YaHei;text-align:center;float:right;} #studydoc .studydocs ul li a:hover .studydocstitle{color:#000;} #studydoc .studydocs ul li a:after{height:0;clear:both;content:".";display:block;visibility:hidden;} /*---- studydocs文档部分 ----*/ /*--------------------- 以上是次页学无止境studydoc主体部分 ---------------------*/ /*--------------------- 以下是次页随心所录followheart主体部分 ---------------------*/ #followheart{/* min-height:1200px; */width:1150px;margin-top:12px;} /*----followhearts分类部分-----*/ #followheart .followhearts{width:1150px;background:#fefefe;} #followheart .followhearts ul{display:block;width:1120px;padding:15px 15px;} #followheart .followhearts ul li{display:block;width:323px;float:left;padding:15px 25px;height:378px;} #followheart .followhearts ul li a{display:block;width:323px;height:378px;border-radius:4px;border:none;transition:0.15s ease-in-out;box-shadow:0 8px 15px rgba(0, 0, 0, 0.12);} #followheart .followhearts ul li a:hover{transform:translateY(-10px) scale(1.02);} #followheart .followhearts ul li a>img{height:249px;width:323px;border-radius:4px 4px 0 0;} #followheart .followhearts ul li a .caption{padding:26px 30px;text-align:center;color:#333;font-size:14px;} #followheart .followhearts ul li a .caption h3{font-size:14px;} #followheart .followhearts ul li a .caption p{font-size:12px;} /*----followhearts分类部分-----*/ /*--------------------- 以上是次页随心所录followheart主体部分 ---------------------*/ /*--------------------- 以下是次页关于Rin,aboutRin主体部分 ---------------------*/ #aboutRin{/* min-height:1200px; */width:1150px;margin-top:12px;} /*----aboutRins右边信息部分-----*/ #aboutRin .aboutRins{width:1150px;/*background:#fefefe;*/} #aboutRin .aboutRins div.rbox{float:right;width:320px;} #aboutRin .aboutRins div.rbox .info_of_Rin{width:320px;background:#fefefe;margin-bottom:8px;position:relative;} /*#aboutRin .aboutRins div.rbox .info_of_Rin::before{content:'';}*/ #aboutRin .aboutRins div.rbox .info_of_Rin .person_bg{width:320px;height:100px;background:url(../images/personal_bg.jpg) no-repeat center top;} #aboutRin .aboutRins div.rbox .info_of_Rin .person_bg::after{content:'';display:block;width:320px;height:100px;background:rgba(225,225,225,0.15);z-index:33;} #aboutRin .aboutRins div.rbox .info_of_Rin .person_img{position:absolute;width:92px;height:92px;top:56px;left:114px;} #aboutRin .aboutRins div.rbox .info_of_Rin .myheaderpic{position:relative;width:92px;height:92px;} #aboutRin .aboutRins div.rbox .info_of_Rin .myheaderpic img.neko{position:absolute;width:86px;height:86px;border-radius:50%;background-color:#FFF;padding:2px;border:1px solid rgba(255,255,255,.4);cursor: pointer;top:0;left:0;z-index:2;-webkit-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0);-ms-transition:all 0.5s;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;} #aboutRin .aboutRins div.rbox .info_of_Rin .myheaderpic img.neko:hover{opacity: 0;-webkit-transform: rotate(720deg);-ms-transform: rotate(720deg);transform: rotate(720deg);} #aboutRin .aboutRins div.rbox .info_of_Rin .myheaderpic img.me{position:absolute;width:86px;height:86px;border-radius:50%;background-color:#FFF;padding:2px;border:1px solid rgba(255,255,255,.4);cursor: pointer;top:0;left:0;z-index:1;box-shadow:0 0 10px 2px #888;} #aboutRin .aboutRins div.rbox .info_of_Rin .emptywrap50{width:320px;height:60px;} #aboutRin .aboutRins div.rbox .info_of_Rin .mywords{width:320px;} #aboutRin .aboutRins div.rbox .info_of_Rin .mywords h3{width:320px;height:30px;line-height:30px;font-size:20px;text-align:center;font-family:"KaiTi";text-shadow:none;color:#5f5f5f;cursor:default;} /*color:#888888;background:#dfdbdb;*/ #aboutRin .aboutRins div.rbox .info_of_Rin .mywords .mydetails{margin:10px 0 20px;padding:8px 10px;background:#dfdbdb;line-height:24px;font-size:12px;color:#888;text-align:left;cursor:default;} #aboutRin .aboutRins div.rbox .info_of_Rin .mywords .mydetails .pers_icon_left{display:block;float:left;margin:-7px 7px;font-size:12px;color:#888;transform:scale(0.8);} #aboutRin .aboutRins div.rbox .info_of_Rin .mywords .mydetails .pers_icon_right{display:block;float:right;margin:7px 7px;font-size:12px;color:#888;transform:scale(0.8);} #aboutRin .aboutRins div.rbox .info_of_Rin .linkmore{width:320px;height:80px;} #aboutRin .aboutRins div.rbox .info_of_Rin .linkmore ul{display:block;width:300px;height:80px;padding:0 10px;} #aboutRin .aboutRins div.rbox .info_of_Rin .linkmore ul li{display:block;width:60px;height:60px;float:left;border-radius:50%;margin:7px;} #aboutRin .aboutRins div.rbox .info_of_Rin .linkmore ul li a{display:block;width:58px;height:58px;border-radius:50%;text-align:center;line-height:57px;border:1px solid #ccc;font-size:27px;box-shadow:0 0 4px #d6d6d6;overflow:hidden;transition:all 0.5s;color:#ccc;} #aboutRin .aboutRins div.rbox .info_of_Rin .linkmore ul li a.linkmore_Home:hover{color:#4c98d2;text-shadow:0 0 2px #5a9fd4;} #aboutRin .aboutRins div.rbox .info_of_Rin .linkmore ul li a.linkmore_Email:hover{color:#ffb04d;text-shadow:0 0 2px #fdb459;} #aboutRin .aboutRins div.rbox .info_of_Rin .linkmore ul li a.linkmore_QQ:hover{color:#36b7f3;text-shadow:0 0 2px #45bdf5;} #aboutRin .aboutRins div.rbox .info_of_Rin .linkmore ul li a.linkmore_Wechat:hover{color:#27c527;text-shadow:0 0 2px #31c531;} /*the last li*/ #showwxqrcode{position:relative;} #showwxqrcode i{display:block;height:100px;width:100px;position:absolute;bottom:-12px;left:-21px;z-index:-1;-webkit-transition:all 0.65s;-moz-transition:all 0.65s;-o-transition:all 0.65s;transition:all 0.65s;} #showwxqrcode i>img{display:block;height:100px;width:100px;} #showwxqrcode:hover i{left:86px;} /*----aboutRins右边信息部分-----*/ /*----aboutRins左边简述部分-----*/ #aboutRin .aboutRins div.lbox{float:left;width:820px;background:#fefefe;} #aboutRin .aboutRins div.lbox .info_of_homesite{height:500px;width:780px;padding:0 20px;} #aboutRin .aboutRins div.lbox .info_of_homesite h3{font-weight:500;font-size:20px;} /*----aboutRins左边简述部分-----*/ /*--------------------- 以上是次页关于Rin,aboutRin主体部分 ---------------------*/ /*--------------------- 以下是次页左邻右舍,neighbour主体部分 ---------------------*/ #neighbour{/* min-height:1200px; */width:1150px;margin-top:12px;} /*----neighbours分类部分-----*/ #neighbour .neighbours{width:1150px;background:#fefefe;} /*--------------------- 以上是次页左邻右舍,neighbour主体部分 ---------------------*/ /*--------------------- 以下是次页实验室,laboratory主体部分 ---------------------*/ #laboratory{/* min-height:1200px; */width:1150px;margin-top:12px;} /*----laboratorys分类部分-----*/ #laboratory .laboratorys{width:1150px;background:#fefefe;} /*--------------------- 以上是次页实验室,laboratory主体部分 ---------------------*/ /* -------------------------------------------------------以上是展示页主体部分样式------------------------------------------------------- */ /* -----------------------------------------------------------底部----------------------------------------------------------- */ footer{width:100%;position:relative;} footer canvas#canvas{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;filter:alpha(opacity=50);-moz-opacity:.5;-khtml-opacity:.5;opacity:.1;} footer #footsection{margin:0 auto;width:1150px !important;height:90px;text-align:center;} footer #footsection h3{font-family:"Comic Sans MS","Microsoft YaHei",Arial,Helvetica,sans-serif;color:#868686;font-weight:500;font-size:15px;height:60px;line-height:80px;font-style:initial;} footer #footsection p{font-family:"Comic Sans MS","Microsoft YaHei",Arial,Helvetica,sans-serif;color:#aaa;font-weight:500;font-size:13px;height:30PX;line-height:20px;} footer #footsection a{color:#999;} /*footer #footsection a.footertitle{font-family:Georgia,Arial,KaiTi;color:#777;}*/ footer #footsection a.gotoaliyun{color:#5c7ebd;font-size:12px;} #backtotop{width:50px;height:50px;bottom:10px;right:15px;position:fixed;cursor:pointer;z-index:2;transition:transform .3s;} .backtotop_inactive{transform:scale(0);} .backtotop_active{transform:scale(1);} /* -----------------------------------------------------------底部----------------------------------------------------------- */