邓伦周一围揭秘淑芳斋主人 乾隆十公主玩具曝光
前端实战：只用CSS写出爱奇艺官网
写在前面
经过两个月对HTML和CSS的学习，终于迎来了最后一个项目实战，拿爱奇艺官网练手。先说一下个人心得，一开始自己对于前端学习一片茫然，但是借鉴了各位大神的文章和速成之路，我觉得编程这条路是一口气吃不成胖子的。凭借着每周两篇的csdn博客，自己也在逐渐积累，发现现在写代码的能力提高很快，不仅是前端，还有其他语言，必须有强大的基础功底和内力，才能修炼更花哨的招式。对于学习语言的过程不要恐惧，你可以对一门语言抱有敬畏之心，但同时自己也要充满自信！
OK，现在来看一下我敲了一周的html和css效果图：
是不是很像了哈，实际上爱奇艺官网的前端开发人员用了大量的JS，但是目前我还不会哈哈哈，没事，来看看我是怎么用css实现它的吧。
网页导航
看起来并不难，只有三个盒子组成：爱奇艺logo、输入栏、功能栏。但是在每个盒子下面都有hover，就是暂时display:none的盒子，现在只是总结一下过程中遇到的难点。
难点一 网页缩小的时候防止盒子挤压、重叠甚至掉落
给body加min-width隐藏
body{
min-width: 1000px;
}
给主盒子加浮动和高度（防止高度塌陷）：
.nav-top-image{
float: left;
width: 120px;
height:70px;
margin-left:70px;
}
难点二 鼠标点击出现下拉菜单
鼠标点击出现下拉菜单一共两个步骤
- 下拉菜单必须不能比input盒子级别高，并且设置定位
- 利用:focus选择器
.nav-input-text1:focus + .nav-input-list{
display:block;
}
.nav-input-list{
position:absolute;
left:15px;
z-index: 2;
display:none;
width:245px;
height:360px;
background-color:#fff;
}
难点三 小三角形的编写
利用border写小三角形
.nav-icon6-triangle{
position:absolute;
top:-14px;
left:151px;
display: none;
width:0;
height:0;
border-width:7px;
border-style:solid;
border-color:transparent transparent #fff transparent;
}
下面贴上导航模块源码：
Html：
CSS：
.nav-top{
background-color: rgb(35,35,37);
height: 70px;
margin:0 auto;
}
.nav-top-image{
float: left;
width: 120px;
height:70px;
margin-left:70px;
}
.nav-top-image1{
width: 120px;
height: 70px;
padding-top:6px;
}
.nav-top-image1 img{
width:119px;
}
.nav-input{
position:relative;
float: left;
margin:14px 0 0 300px;
width: 360px;
height: 40px;
border-radius: 20px;
}
.nav-input-text{
float: left;
width: 228px;
height:40px;
border-radius:20px 0 0 20px;
}
.nav-input input{
background-color:rgb(51,51,51);
width: 228px;
height: 40px;
border:none;
outline: none;
text-indent: 14px;
color:rgb(153,153,153);
font-size: 16px;
border-radius:20px 0 0 20px;
}
.nav-input input:hover{
background-color:rgb(68,68,68);
color:rgb(204,204,204);
}
.nav-input-text1:focus + .nav-input-list{
display:block;
}
.nav-input-image{
float: left;
width:32px;
height:40px;
background-color:rgb(51,51,51);
}
.nav-input-image img{
margin-top:5px;
}
.nav-input-search{
position: relative;
float:left;
width: 100px;
height: 40px;
background-color:rgb(0,190,6);
border-radius:0 20px 20px 0;
}
.nav-input-search:hover{
background-color:rgb(0,200,6);
}
.nav-input-search:hover .nav-input-search-image2{
display: block;
}
.nav-input-search a{
display:block;
width:100px;
height:40px;
}
.nav-input-search-image{
position:absolute;
z-index:1;
width: 100px;
height: 40px;
margin:7px 0px 0px 10px;
}
.nav-input-search-image2{
position:absolute;
z-index:2;
float: left;
display:none;
width: 100px;
height: 40px;
margin:6px 0px 0px 11px;
}
.nav-input-list{
position:absolute;
left:15px;
z-index: 2;
display:none;
width:245px;
height:360px;
background-color:#fff;
}
.nav-input-list1 span{
color:rgb(204,204,204);
font-size:14px;
}
.nav-input-list div:first-child{
margin:5px 0 10px 15px;
}
.nav-input-list2 li{
width:245px;
height:31px;
line-height:30px;
}
.nav-input-list2 li:hover{
background-color:rgb(245,245,245);
}
.nav-input-list2 a{
display:block;
width:245px;
height:26px;
}
.nav-input-list2 i{
position:relative;
float:left;
width:22px;
height:16px;
margin:8px 15px 0 15px;
font-style:normal;
}
.nav-input-list2 p{
display:inline-block;
font-size:15px;
color:#000;
}
.nav-input-list2 p:hover{
color:rgb(0,190,6);
}
.nav-input-li1 i{
background-color:rgb(0,190,6);
border-radius:0 11px 11px 0;
}
.nav-input-list2 span{
position:absolute;
left:7px;
bottom:-7px;
font-family:'黑体';
color:#fff;
font-size:15px;
}
.nav-input-li2 i{
background-color:rgb(76,209,80);
border-radius:0 11px 11px 0;
}
.nav-input-li3 i{
background-color:rgb(153,229,155);
border-radius:0 11px 11px 0;
}
.nav-input-li4 i{
background-color:rgb(216,216,216);
border-radius:0 11px 11px 0;
}
.nav-input-li4:last-child span{
position:absolute;
left:3px;
bottom:-7px;
font-family:'黑体';
color:#fff;
font-size:15px;
}
.nav-icon1{
position:relative;
float:left;
height:70px;
width:40px;
margin-left:120px;
}
.nav-icon1:hover .nav-icon1-box{
display:block;
}
.nav-icon1:hover .nav-icon1-triangle{
display:block;
}
.nav-icon1-image1{
margin-top:14px;
}
.nav-icon1-box{
position:absolute;
left:-97px;
top:70px;
z-index: 2;
display:none;
width:222px;
height:158px;
padding-top:14px;
background-color:#fff;
border-radius:7px;
}
.nav-icon1-box a{
display:block;
height:35px;
}
.nav-icon1-li{
padding-top:5px;
width:222px;
height:30px;
}
.nav-icon1-li:hover{
background-color:rgb(245,245,245);
}
.nav-icon1-li div{
float:left;
margin-left:20px;
width:30px;
height:30px;
}
.nav-icon1-li span{
font-size:15px;
color:#000;
}
.nav-icon1-li:hover span{
color:rgb(200,160,106);
}
.nav-icon1-triangle{
position:absolute;
top:56px;
left:9px;
display: none;
width:0;
height:0;
border-width:7px;
border-style:solid;
border-color:transparent transparent #fff transparent;
}
.nav-icon1-btn{
position: relative;
left:87px;
top:12px;
width:53px;
height:22px;
background-color:rgb(200,160,106);
border-radius: 11px;
line-height:22px;
}
.nav-icon1-btn a{
display: block;
width:53px;
height:22px;
}
.nav-icon1-btn p{
font-size:14px;
font-family:'黑体';
color: #fff;
text-align: center;
}
.nav-icon1-btn:hover{
background-color:rgb(226,188,129);
}
.nav-icon2{
position:relative;
float:left;
height:70px;
width:40px;
margin-left:10px;
}
.nav-icon2-image1{
margin-top:13px;
}
.nav-icon2:hover .nav-icon2-box{
display:block;
}
.nav-icon2:hover .nav-icon1-triangle{
display:block;
}
.nav-icon2-box{
position:absolute;
left:-69px;
top:70px;
z-index: 2;
display: none;
width:160px;
height:233px;
padding-top:14px;
background-color:#fff;
border-radius:7px;
}
.nav-icon2-li{
padding-top:5px;
width:160px;
height:30px;
}
.nav-icon2-li:hover{
background-color:rgb(245,245,245);
}
.nav-icon2-li div{
float:left;
margin-left:35px;
width:30px;
height:30px;
}
.nav-icon2-li span{
font-size:15px;
color:#000;
}
.nav-icon2-li:hover span{
color:rgb(0,190,6);
}
.nav-icon3{
position:relative;
float:left;
height:70px;
width:50px;
margin-left:10px;
}
.nav-icon3:hover .nav-icon3-box{
display:block;
}
.nav-icon3:hover .nav-icon3-triangle{
display:block;
}
.nav-icon3-box{
position:absolute;
left:-73px;
top:70px;
z-index: 2;
display: none;
width:195px;
height:193px;
padding-top:14px;
background-color:#fff;
border-radius:7px;
}
.nav-icon3-image1{
margin-top:4px;
}
.nav-icon3-li{
padding-top:5px;
width:200px;
height:30px;
}
.nav-icon3-li div{
float:left;
margin-left:20px;
width:30px;
height:30px;
}
.nav-icon3-li span{
font-size:15px;
color:#000;
white-space: nowrap;
cursor:default;
}
.nav-icon3-btn{
position: relative;
left:67px;
top:12px;
width:67px;
height:22px;
background-color:rgb(200,160,106);
border-radius: 11px;
line-height:22px;
}
.nav-icon3-btn a{
display: block;
width:67px;
height:22px;
}
.nav-icon3-btn p{
font-size:14px;
font-family:'黑体';
color: #fff;
text-align: center;
}
.nav-icon3-btn:hover{
background-color:rgb(226,188,129);
}
.nav-icon3-triangle{
position:absolute;
top:56px;
left:19px;
display:none;
width:0;
height:0;
border-width:7px;
border-style:solid;
border-color:transparent transparent #fff transparent;
}
.nav-icon4{
position: relative;
float:left;
height:70px;
width:40px;
margin-left:20px;
}
.nav-icon4-box{
position:absolute;
left:-218px;
top:70px;
z-index: 2;
width: 300px;
height: 385px;
display: none;
background-color:#fff;
border-radius:7px;
}
.nav-icon4:hover .nav-icon4-box{
display: block;
}
.nav-icon4-nav{
width:300px;
height: 40px;
border-bottom: 2px solid rgb(230,230,230);
}
.nav-icon4-span{
position: relative;
float: left;
width:100px;
height: 40px;
line-height:40px;
text-align:center;
}
.nav-icon4-span a{
display:block;
width:100px;
height: 40px;
}
.nav-icon4-span span{
font-size:15px;
color:#000;
}
.nav-icon4-span:hover span{
color:rgb(0,190,6);
}
.nav-icon4-span:hover div{
display: block;
}
.nav-icon4-line{
position:absolute;
top:40px;
right:38px;
display:none;
width:24px;
height:4px;
background-color: rgb(0,190,6);
border-radius: 2px;
}
.nav-icon4-p{
position: absolute;
top:234px;
left:30px;
}
.nav-icon4-p p{
font-size:15px;
}
.nav-icon4-p a{
color:rgb(0,190,6);
}
.nav-icon4-img{
position:absolute;
left:50%;
top:117px;
margin-left:-71.5px;
}
.nav-icon4-image1{
margin-top:15px;
}
.nav-icon4-triangle{
position:absolute;
top:-14px;
left:228px;
width:0;
height:0;
border-width:7px;
border-style:solid;
border-color:transparent transparent #fff transparent;
}
.nav-icon5{
position: relative;
float:left;
height:70px;
width:40px;
margin-left:20px;
}
.nav-icon5-image1{
margin-top:14px;
}
.nav-icon5-box{
position:absolute;
left:-218px;
top:70px;
z-index: 2;
width: 300px;
height: 385px;
display: none;
background-color:#fff;
border-radius:7px;
}
.nav-icon5:hover .nav-icon5-box{
display: block;
}
.nav-icon5-nav{
width:300px;
height: 40px;
border-bottom: 2px solid rgb(230,230,230);
}
.nav-icon5-span{
position: relative;
float: left;
width:100px;
height: 40px;
line-height:40px;
text-align:center;
}
.nav-icon5-span a{
display:block;
width:100px;
height: 40px;
}
.nav-icon5-span span{
font-size:15px;
color:#000;
}
.nav-icon5-span:hover span{
color:rgb(0,190,6);
}
.nav-icon5-span:hover div{
display: block;
}
.nav-icon5-line{
position:absolute;
top:40px;
right:38px;
display:none;
width:24px;
height:4px;
background-color: rgb(0,190,6);
border-radius: 2px;
}
.nav-icon5-p{
position: absolute;
top:234px;
left:30px;
}
.nav-icon5-p p{
font-size:15px;
}
.nav-icon5-p a{
color:rgb(0,190,6);
}
.nav-icon5-img{
position:absolute;
left:50%;
top:117px;
margin-left:-71.5px;
}
.nav-icon5-image1{
margin-top:15px;
}
.nav-icon5-triangle{
position:absolute;
top:-14px;
left:228px;
width:0;
height:0;
border-width:7px;
border-style:solid;
border-color:transparent transparent #fff transparent;
}
.nav-icon6{
position: relative;
float:left;
height:70px;
width:40px;
margin-left:17px;
}
.nav-icon6-image1{
margin-top:14px;
}
.nav-icon6:hover .nav-icon6-box{
display:block;
}
.nav-icon6:hover .nav-icon6-triangle{
display:block;
}
.nav-icon6-box{
position:absolute;
left:-135px;
top:70px;
z-index: 2;
display: none;
width:195px;
height:193px;
padding-top:14px;
background-color:#fff;
border-radius:7px;
}
.nav-icon6-li{
padding-top:5px;
width:200px;
height:30px;
}
.nav-icon6-li div{
float:left;
margin-left:20px;
width:30px;
height:30px;
}
.nav-icon6-li span{
font-size:15px;
color:#000;
white-space: nowrap;
cursor:default;
}
.nav-icon6-btn{
position: relative;
left:67px;
top:12px;
width:67px;
height:22px;
background-color:rgb(200,160,106);
border-radius: 11px;
line-height:22px;
}
.nav-icon6-btn a{
display: block;
width:67px;
height:22px;
}
.nav-icon6-btn p{
font-size:14px;
font-family:'黑体';
color: #fff;
text-align: center;
}
.nav-icon6-btn:hover{
background-color:rgb(226,188,129);
}
.nav-icon6-triangle{
position:absolute;
top:-14px;
left:151px;
display: none;
width:0;
height:0;
border-width:7px;
border-style:solid;
border-color:transparent transparent #fff transparent;
}
Banner区域及菜单栏模块
其中这个区域的banner的大小是固定的，但是根据显示屏及浏览器的大小不同banner的其余部分怎么办？所以要给banner这个大盒子一个黑色背景。Banner的自动变换用css实现比较麻烦，所以现在暂时不用。这个区域存在的难点大都是定位的问题，比如右边这个透明区域是依靠网页中间定位的，菜单栏里的隐藏盒子是依靠每个li标签定位的，下面来看一看这编写过程中遇到的难点：
难点一 banner的居中
图片的居中方式有很多，比如依靠定位来绝对居中，但是在这里直接用background下面的center属性就行了：
.nav-body-banner{
height: 520px;
width:100%;
background:url("../images/banner/1.jpg") no-repeat center #000;
}
难点二 透明菜单的定位
把浏览器缩小可以发现，透明菜单是依靠网页中间定位的，我给了left为50%，剩下的自己调
.nav-body-list{
position:absolute;
left:50%;
top:0;
margin-left:289px;
width:276px;
height:419px;
padding-top:16px;
background-color:rgba(0,0,0,.3);
}
下面贴一下源码
HTML：
CSS：
.nav-body{
position: relative;
height:520px;
width:100%;
margin-bottom: 30px;
}
.nav-body-img{
height:520px;
width:100%;
}
.nav-body-img ul{
height:520px;
}
.nav-body-banner{
height: 520px;
width:100%;
background:url("../images/banner/1.jpg") no-repeat center #000;
}
.nav-body-banner a{
display:block;
height:520px;
}
.nav-body-list{
position:absolute;
left:50%;
top:0;
margin-left:289px;
width:276px;
height:419px;
padding-top:16px;
background-color:rgba(0,0,0,.3);
}
.nav-body-list li{
height: 30px;
line-height:30px;
margin-bottom:10px;
}
.nav-body-list a{
display: block;
height:30px;
text-indent: 15px;
color:#fff;
}
.nav-body-list a:hover{
color:rgb(28,190,6);
}
.nav-body-bottom{
position: absolute;
bottom: 0px;
width:100%;
height:85px;
background-color:rgba(0,0,0,.85);
}
.nav-body-box:first-child{
margin-left:40px;
}
.nav-body-box{
float: left;
height:85px;
padding:15px;
}
.nav-body-box-item{
float: left;
margin-right:12px;
}
.nav-body-box-item li{
margin-bottom: 12px;
}
.nav-body-box-item a{
font-size: 15px;
color:rgb(204,204,204);
}
.nav-body-box-item a:hover{
color:rgb(0,190,6);
}
.nav-body-box-img{
float: left;
}
.nav-body-box-img img{
opacity: .3;
}
.nav-body-box-rightimg{
float: left;
margin-top:16px;
}
.nav-body-box-rightimg img{
margin-left:12px;
}
.nav-body-box-rightimg p{
color:rgb(226,188,129);
font-size:15px;
}
.item-w{
position: relative;
}
.item-w-m{
position: absolute;
bottom: 30px;
left:-30px;
display: none;
width: 466px;
height: 209px;
padding:18px 0 0 20px;
border-radius: 7px;
background-color:rgba(0,0,0,.9);
}
.item-w-m a:first-of-type{
float: left;
width: 100%;
color:rgb(204,204,204);
font-size:15px;
}
.item-w-m a:hover{
color:rgb(0,190,6);
}
.item-w:hover .item-w-m{
display:block;
}
.item-w-m-i{
float: left;
width: 106px;
height:170px;
margin-top:10px;
margin-right:10px;
overflow: hidden;
}
.item-w-m-i img{
width:103px;
}
.item-w-m-i img:hover{
transform: scale(1.1);
}
.item-triangle{
position: absolute;
left:38px;
bottom: -14px;
width:0;
height:0;
border-width:7px;
border-style:solid;
border-color:rgba(0,0,0,.9) transparent transparent transparent;
}
网页内容
终于到网页内容了，其中在这块的细节也不少，有鼠标滑入的放大和阴影效果，也有鼠标滑入出现另一个大盒子，下面来看一下其中遇到的一些问题。
难点一 鼠标滑入放大和盒子阴影效果
首先放大的时候增加一个溢出隐藏，然后为属性添加过渡效果，记住transition不要放在hover里面。在添加阴影时不要给img添加阴影，那样会被overflow:hidden的，记住给img外边的盒子添加阴影效果。
.content-img0{
widows: 210px;
height: 118px;
overflow: hidden;
}
.content-img0 a{
display: block;
}
.content-img0 img{
display:block;
transition:0.3s;
}
.content-img0:hover img{
transform: scale(1.1);
}
.content-img0:hover{
box-shadow: 0 3px 5px #000;
}
难点二 图片下面出现空白
图片下面出现空白的时候是没有把图片变成块级元素，加上display:block就好了。
下面贴上源码：
HTML
CSS：
.content{
margin:0 auto;
width:1335px;
}
.content-box{
width:1335px;
height:532px;
margin-bottom:50px;
}
.content-box-title{
position: relative;
width:100%;
height:28px;
margin-bottom:15px;
}
.content-box-title-img{
float: left;
width:28px;
height:28px;
background:url("../images/18.png") no-repeat;
background-position:0px 0px;
background-size:1466%;
margin-right:10px;
}
.content-box-title span:first-of-type{
position:absolute;
bottom:-5px;
color:#000;
font-size:29px;
margin-right:5px;
}
.content-box-title span:nth-of-type(2){
position:absolute;
bottom:-2px;
left:167px;
color:#000;
}
.content-box-title span:hover{
color:rgb(0,190,6);
}
.content-box-con1{
float: left;
width: 435px;
height: 494px;
margin:-5px;
padding:5px;
}
.content-box-con1-top{
padding-top:8px;
margin-bottom:12px;
}
.content-box-con1-top div{
margin-right:3px;
float: left;
}
.content-box-con1-top a{
color:#000;
font-size:21px;
}
#txtList0 li{
position: relative;
height:38px;
line-height:38px;
}
#txtList0 a{
color:#000;
font-size:16px;
white-space: nowrap;
}
#txtList0 a:hover{
color:rgb(0,190,6);
}
.content-box-con1-top a:hover{
color:rgb(0,190,6);
}
#txtList0 a:first-of-type{
margin-left:29px;
}
#txtList0 a:nth-of-type(2){
margin-left:20px;
}
#txtList0 img{
position:absolute;
top:50%;
margin-top:-8px;
}
.content-box-con1-img{
float: left;
margin-top:10px;
}
.content-box-con1-img li{
float: left;
width:210px;
margin-right:5px;
}
.content-smallbox{
width:190px;
height: 23px;
padding:6px 10px 6px 10px;
background-color:rgb(248,248,248);
}
.content-smallbox a{
color:#000;
font-size:15px;
white-space: nowrap;
}
.content-img0{
widows: 210px;
height: 118px;
overflow: hidden;
}
.content-img0 a{
display: block;
}
.content-img0 img{
display:block;
transition:0.3s;
}
.content-img0:hover img{
transform: scale(1.1);
}
.content-img0:hover{
box-shadow: 0 3px 5px #000;
}
.content-box-con1-img li:hover .content-a{
color: rgb(0,190,6);
}
.content-smallbox a:hover{
color:rgb(0,190,6);
}
.content-box-con2{
float: left;
width: 435px;
height: 494px;
margin:-5px;
padding:5px;
}
.picList1{
position: relative;
width:425px;
height: 286px;
overflow: hidden;
}
.picList1 img{
display: block;
transition: 0.3s;
}
.picList1 img:hover{
transform: scale(1.1);
}
.picList1:hover{
box-shadow: 0 3px 5px #000;
}
.picList1-box{
position: absolute;
bottom:0;
width: 425px;
height: 44px;
padding:8px 0px;
background-color:rgba(0,0,0,.8);
}
.picList1-img{
width: 425px;
}
.picList1-img div{
float: left;
width:15px;
height: 22px;
margin:2px 10px;
background: url("../images/22.png") no-repeat;
background-position: -20px 0;
background-size: 39px;
}
.picList1-img a{
color:#fff;
font-weight: middle;
font-size: 15px;
}
.picList1-img a:hover{
color:rgb(0,190,6);
}
.picList1-txt{
font-size:14px;
}
.picList1-txt a{
height:24px;
line-height: 24px;
color:rgb(204,204,204);
}
.picList1-icon{
position:absolute;
right:10px;
top:31px;
}
.picList1-icon1{
display:inline-block;
width: 0;
height: 0;
margin-right:15px;
border-width:6px;
border-style:solid;
border-color:transparent rgb(204,204,204) transparent transparent;
}
.picList1-icon2{
display:inline-block;
width: 0;
height: 0;
margin-left:15px;
margin-top:2px;
border-width:6px;
border-style:solid;
border-color:transparent transparent transparent rgb(204,204,204);
}
.picList1-icon span{
position: absolute;
top:2px;
left:20px;
font-size:12px;
color:rgb(204,204,204);
}
.picList1-icon a{
display:inline-block;
}
.picList1-icon a:first-of-type:hover div{
border-color:transparent rgb(0,190,6) transparent transparent;
}
.picList1-icon a:nth-of-type(2):hover div{
border-color:transparent transparent transparent rgb(0,190,6);
}
.focus-list-wrap{
margin-top:12px;
}
.content-box-con3{
float: left;
width: 435px;
height: 494px;
margin:-5px;
padding:5px;
}
.content-box-con3-img1{
width:435px;
height: 153px;
margin-bottom:14px;
}
.content-box-con3-img1 li{
float: left;
width:210px;
margin-right:5px;
}
.content-box-con3-img1 li:hover .content-a{
color: rgb(0,190,6);
}
.content-box1{
width:1335px;
height:412px;
margin-bottom:50px;
}
.content-boxl{
float: left;
widows: 1070px;
}
.content-box1-title{
position: relative;
width:100%;
height:28px;
margin-bottom:15px;
}
.box1-title{
background:url("../images/18.png") no-repeat;
background-position:-83px 0px;
background-size:1466%;
margin-right:10px;
}
.content-box1-title span:first-of-type{
position:absolute;
bottom:-5px;
color:#000;
font-size:29px;
margin-right:5px;
}
.content-box1-title span:first-of-type:hover{
color:rgb(0,190,6);
}
.content-box1-title span:nth-of-type(2){
position:absolute;
bottom:-2px;
left:107px;
color:#000;
}
.content-box1-title span:nth-of-type(3){
position:absolute;
bottom:-2px;
left:158px;
color:#000;
}
.content-box1-title span:nth-of-type(2):hover{
color:rgb(0,190,6);
}
.content-box1-title span:nth-of-type(3):hover{
color:rgb(0,190,6);
}
.content-box1-title span:nth-of-type(5):hover{
color:rgb(0,190,6);
}
.content-box1-title span:nth-of-type(7):hover{
color:rgb(0,190,6);
}
.content-box1-title span:nth-of-type(4){
position:absolute;
bottom:-2px;
left:252px;
color:rgb(0,190,6);
}
.content-box1-title span:nth-of-type(5){
position:absolute;
bottom:-2px;
left:267px;
color:#000;
}
.content-box1-title span:nth-of-type(6){
position:absolute;
bottom:-2px;
left:338px;
color:rgb(0,190,6);
}
.content-box1-title span:nth-of-type(7){
position:absolute;
bottom:-2px;
left:353px;
color:#000;
}
.content-box1-con1{
float: left;
width:425px;
height: 369px;
margin-right:5px;
}
.content-box1-banner{
position: relative;
width: 425px;
height: 310px;
overflow: hidden;
}
.content-box1-btnl{
position:absolute;
left:0;
top:50%;
width:34px;
height:42px;
margin-top:-21px;
background:url("../images/23.png") no-repeat;
background-position: -120px -19px;
}
.content-box1-btnl:hover{
background-position: -200px -19px;
}
.content-box1-btnr{
position:absolute;
right:0;
top:50%;
width:34px;
height:42px;
margin-top:-21px;
background:url("../images/23.png") no-repeat;
background-position: -160px -19px;
}
.content-box1-btnr:hover{
background-position: -240px -19px;
}
.content-box1-banner img{
display:block;
transition: 0.3s;
}
.content-box1-banner img:hover{
transform: scale(1.1);
}
.content-box1-banner:hover{
box-shadow: 0 3px 3px rgba(0,0,0,.5);
}
.content-box1-con1-s{
position: absolute;
right:3px;
bottom: 3px;
width: 60px;
height: 20px;
line-height: 20px;
background-color:rgba(0,0,0,.8);
border-radius:10px;
text-indent: 6px;
}
.content-box1-con1-s span{
color:#fff;
font-size:12px;
vertical-align: top;
}
.content-box1-text{
width: 405px;
height: 47px;
padding: 6px 10px;
background-color:rgb(248,248,248);
}
.content-box1-text a{
color:#000;
}
.content-box1-text p:nth-of-type(2){
color:rgb(153,153,153);
}
.content-box1-text p{
margin-bottom: 3px;
}
.content-box1-text a:hover{
color:rgb(0,190,6);
}
.content-box1-con2{
float: left;
height:369px;
width: 645px;;
}
.content-box1-con2-1 ul{
width:645px;
height:177px;
margin-bottom: 15px;
}
.content-box1-con2-1 li{
float: left;
width:210px;
height: 177px;
margin-right:5px;
}
.content-imgitem{
position: relative;
}
.content-imgitem a{
display:block;
}
.content-imgitem img{
display:block;
transition: 0.3s;
}
.content-divitem{
width: 210px;
height: 118px;
overflow: hidden;
}
.content-imgitem:hover .content-scaleitem{
display:block;
}
.content-imgitem a:hover{
color:rgb(0,190,6);
}
.content-imgitem img:hover{
transform: scale(1.1);
}
.content-divitem:hover{
box-shadow: 0 3px 3px rgba(0,0,0,.5);
}
.content-txtitem{
width: 190px;
height: 47px;
padding: 6px 10px;
background-color:rgb(248,248,248);
}
.content-txtitem a{
color:#000;
}
.content-txtitem p:nth-of-type(2){
font-size:15px;
color:rgb(153,153,153);
white-space: nowrap;
}
.content-txtitem p{
margin-bottom: 3px;
}
.content-scaleitem{
position: absolute;
top:-20px;
right:8px;
display: none;
width: 250px;
height: 256px;
}
.content-scaleitem1{
position: relative;
width: 250px;
height: 140px;
overflow: hidden;
}
.scaleitem1-item{
position: absolute;
right:8px;
bottom:8px;
width: 32px;
height: 32px;
background:url("../images/22.png") no-repeat;
background-position: 0 0;
}
.scaleitem1-item:hover{
background-position: -40px 0;
}
.content-scaleitem2{
position: relative;
width: 222px;
height: 101px;
z-index: 3;
padding:0 14px 10px 14px;
background-color:#fff;
}
#scale-p{
position: absolute;
left:5;
top:5px;
float: left;
color:#000;
font-size: 17px;
}
#scale-a{
position: absolute;
right:0;
top:5px;
float: left;
width:56px;
height: 20px;
line-height: 20px;
background-color:rgb(0,190,6);
border-radius:10px;
color: #fff;
font-size:14px;
text-indent: 13px;
}
#scale-a:hover{
background-color:rgb(0,200,6);
}
.scaleitem2-tip p{
color:rgb(153,153,153);
font-size: 12px;
white-space: nowrap;
margin-top:5px;
}
.scaleitem2-tip{
float: left;
margin-top:35px;
}
.content-box1-con3{
float: left;
width: 210px;
height: 412px;
}
.content-box1-con3-title{
position: relative;
width: 210px;
height: 28px;
margin-bottom: 15px;
}
.content-box1-con3-title span:first-of-type{
position:absolute;
bottom:-5px;
color:#000;
font-size:29px;
margin-right:5px;
}
.content-box1-con3-title span:nth-of-type(2){
position:absolute;
bottom:-2px;
left:127px;
color:#000;
}
.content-box1-con3-title span:hover{
color:rgb(0,190,6);
}
.content-box1-con3{
width: 210px;
height: 153px;
}
.tfboy:hover .content-a{
color: rgb(0,190,6);
}
.content-smallbox2{
width:190px;
height: 204px;
padding:6px 10px 6px 10px;
background-color:rgb(248,248,248);
}
.content-smallbox2 div{
width:190px;
height: 204px;
border-top:1px dotted rgba(153,153,153,.8);
}
.txtList1{
position: relative;
}
.txtList1 li::before{
position: absolute;
left:3px;
top: 14px;
z-index: 3;
content: "";
width: 0;
height: 0;
border-width:5px;
border-style:solid;
border-color:transparent transparent transparent rgb(0,190,6);
}
.txtList1 a{
position:absolute;
left:-12px;
font-size: 15px;
}