前端实战：只用CSS写出爱奇艺官网

其他 2018-12-27 03:06:29 阅读次数: 0

写在前面

经过两个月对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;
}

难点二  鼠标点击出现下拉菜单

鼠标点击出现下拉菜单一共两个步骤

  1. 下拉菜单必须不能比input盒子级别高，并且设置定位
  2. 利用: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：

<div class="nav-top">
                <div class="nav-top-image">
                    <div class="nav-top-image1">
                        <a href="">
                            <img src="images/1.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="nav-input">
                    <div class="nav-input-text">
                        <input class="nav-input-text1" type="text" placeholder="你和我的倾城时光">
                        <div class="nav-input-list">
                            <div class="nav-input-list1"><span>热门搜索</span></div>
                            <div class="nav-input-list2">
                                <ul>
                                    <li class="nav-input-li1"><a href=""><i><span>1</span></i><p>你和我的倾城时光</p></a></li>
                                    <li class="nav-input-li2"><a href=""><i><span>2</span></i><p>大江大河</p></a></li>
                                    <li class="nav-input-li3"><a href=""><i><span>3</span></i><p>海贼王</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>4</span></i><p>熊出没全集</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>5</span></i><p>奥特曼</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>6</span></i><p>幸福一家人</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>7</span></i><p>奇葩说</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>8</span></i><p>叶罗丽精灵梦第6季</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>9</span></i><p>延禧攻略</p></a></li>
                                    <li class="nav-input-li4"><a href=""><i><span>10</span></i><p>火王之破晓之战</p></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="nav-input-image">
                        <a href="">
                            <img src="images/2.png" alt="">
                        </a>
                    </div>
                    <div class="nav-input-search">
                        <a href="">
                            <div class="nav-input-search-image">
                                <img src="images/3.png" alt="">
                            </div>
                            <div class="nav-input-search-image2">
                                <img src="images/4.png" alt="">
                            </div>
                        </a>
                    </div>
                </div>
                <div class="nav-icon1">
                    <div class="nav-icon1-image1">
                       <a href=""><img src="images/5.png" alt=""></a> 
                    </div>
                    <div class="nav-icon1-box">
                        <ul>
                            <a href=""><li class="nav-icon1-li"><div><img src="images/11.png" alt=""></div><span>了解VIP会员专享特权</span></li></a> 
                            <a href=""><li class="nav-icon1-li"><div><img src="images/12.png" alt=""></div><span>做任务，领奖励</span></li></a>
                            <a href=""><li class="nav-icon1-li"><div><img src="images/13.png" alt=""></div><span>领取会员专属福利</span></li></a>
                        </ul>
                        <div class="nav-icon1-btn">
                            <a href="" >
                            <div>
                                <p>登录</p>
                            </div>
                            </a> 
                        </div> 
                    </div>
                    <div class="nav-icon1-triangle">
                    </div>
                </div>
                <div class="nav-icon2">
                    <div class="nav-icon2-image1">
                       <a href=""><img src="images/6.png" alt=""></a> 
                    </div>
                    <div class="nav-icon2-box">
                            <ul>
                                <a href=""><li class="nav-icon2-li"><div><img src="images/14.png" alt=""></div><span>上传视频</span></li></a> 
                                <a href=""><li class="nav-icon2-li"><div><img src="images/15.png" alt=""></div><span>制作视频</span></li></a>
                                <a href=""><li class="nav-icon2-li"><div><img src="images/16.png" alt=""></div><span>我的空间</span></li></a>
                                <a href=""><li class="nav-icon2-li"><div><img src="images/14.png" alt=""></div><span>上传视频</span></li></a> 
                                <a href=""><li class="nav-icon2-li"><div><img src="images/15.png" alt=""></div><span>制作视频</span></li></a>
                                <a href=""><li class="nav-icon2-li"><div><img src="images/16.png" alt=""></div><span>我的空间</span></li></a>
                            </ul>
                        </div>
                        <div class="nav-icon1-triangle">
                        </div>
                </div>
                <div class="nav-icon3">
                    <div class="nav-icon3-image1">
                       <a href=""><img src="images/7.png" alt=""></a> 
                    </div>
                    <div class="nav-icon3-box">
                            <ul>
                                <li class="nav-icon3-li"><div><img src="images/11.png" alt=""></div><span>新手跳广告，送VIP</span></li> 
                                <li class="nav-icon3-li"><div><img src="images/12.png" alt=""></div><span>5倍流畅度，不卡顿</span></li>
                                <li class="nav-icon3-li"><div><img src="images/13.png" alt=""></div><span>1080P免费畅享</span></li>
                                <li class="nav-icon3-li"><div><img src="images/13.png" alt=""></div><span>搜不到视频，送VIP</span></li>
                            </ul>
                            <div class="nav-icon3-btn">
                                <a href="" >
                                <div>
                                    <p>立即体验</p>
                                </div>
                                </a> 
                            </div> 
                        </div>
                    <div class="nav-icon3-triangle">
                    </div>
                </div>
                <div class="nav-icon4">
                    <div class="nav-icon4-image1">
                       <a href=""><img src="images/8.png" alt=""></a> 
                    </div>
                    <div class="nav-icon4-box">
                        <div class="nav-icon4-nav">
                            <div class="nav-icon4-span">
                                <a href=""><span>更新提醒</span></a>
                                <div class="nav-icon4-line"></div>
                            </div>
                            <div class="nav-icon4-span">
                                <a href=""><span>与我相关</span></a>
                                <div class="nav-icon4-line"></div>
                            </div>
                            <div class="nav-icon4-span">
                                <a href=""><span>系统通知</span></a>
                                <div class="nav-icon4-line"></div>
                            </div>
                        </div>
                        <div class="nav-icon4-img">
                            <img src="images/17.png" alt="">
                        </div>
                        <div class="nav-icon4-p"><p><a href="">登录</a>后才能查看完整的通知列表哦~</p></div>
                        <div class="nav-icon4-triangle">
                        </div>
                    </div>
                </div>
                <div class="nav-icon5">
                    <div class="nav-icon5-image1">
                       <a href=""><img src="images/9.png" alt=""></a> 
                    </div>
                    <div class="nav-icon5-box">
                            <div class="nav-icon5-nav">
                                <div class="nav-icon5-span">
                                    <a href=""><span>更新提醒</span></a>
                                    <div class="nav-icon5-line"></div>
                                </div>
                                <div class="nav-icon5-span">
                                    <a href=""><span>与我相关</span></a>
                                    <div class="nav-icon5-line"></div>
                                </div>
                                <div class="nav-icon5-span">
                                    <a href=""><span>系统通知</span></a>
                                    <div class="nav-icon5-line"></div>
                                </div>
                            </div>
                            <div class="nav-icon5-img">
                                <img src="images/17.png" alt="">
                            </div>
                            <div class="nav-icon5-p"><p><a href="">登录</a>后才能查看完整的通知列表哦~</p></div>
                            <div class="nav-icon5-triangle">
                            </div>
                    </div>                  
                </div>
                <div class="nav-icon6">
                    <div class="nav-icon6-image1">
                       <a href=""><img src="images/10.png" alt=""></a> 
                    </div>
                    <div class="nav-icon6-box">
                            <ul>
                                <li class="nav-icon6-li"><div><img src="images/11.png" alt=""></div><span>新手跳广告，送VIP</span></li> 
                                <li class="nav-icon6-li"><div><img src="images/12.png" alt=""></div><span>5倍流畅度，不卡顿</span></li>
                                <li class="nav-icon6-li"><div><img src="images/13.png" alt=""></div><span>1080P免费畅享</span></li>
                                <li class="nav-icon6-li"><div><img src="images/13.png" alt=""></div><span>搜不到视频，送VIP</span></li>
                            </ul>
                            <div class="nav-icon6-btn">
                                <a href="" >
                                <div>
                                    <p>立即体验</p>
                                </div>
                                </a> 
                            </div> 
                            <div class="nav-icon6-triangle">
                            </div>
                    </div>
                </div>
            </div>

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：

<div class="nav-body">
                <div class="nav-body-img">
                    <ul>
                        <li class="nav-body-banner"><a href=""></a></li>
                    </ul>
                </div>
                <div class="nav-body-list">
                    <ul>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                        <li><a href="">回顾：庆祝改革开放40周年大会</a></li>
                    </ul>
                </div>
                <div class="nav-body-bottom">
                    <div class="nav-body-box">
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">娱乐</a></li>
                                <li><a href="">资讯</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li class="item-w">
                                    <a href="">电影</a>
                                    <div class="item-w-m">
                                        <a href="">全部电影</a>
                                        <div class="item-w-m-i">
                                            <a href=""><img src="images/banner/5.jpg" alt="">
                                            </a>
                                            <a href="">无双</a>
                                        </div>
                                        <div class="item-w-m-i">
                                            <a href=""><img src="images/banner/5.jpg" alt="">
                                            </a>
                                            <a href="">无双</a>
                                        </div>
                                        <div class="item-w-m-i">
                                            <a href=""><img src="images/banner/5.jpg" alt="">
                                            </a>
                                            <a href="">无双</a>
                                        </div>
                                        <div class="item-w-m-i">
                                            <a href=""><img src="images/banner/5.jpg" alt="">
                                            </a>                                            
                                            <a href="">无双</a>
                                        </div>
                                        <div class="item-triangle"></div>
                                    </div>
                                </li>
                                <li><a href="">网络电影</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li class="item-w">
                                    <a href="">电视剧</a>
                                    <div class="item-w-m">
                                            <a href="">全部电影</a>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">无双</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">无双</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">无双</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>                                            
                                                <a href="">无双</a>
                                            </div>
                                            <div class="item-triangle"></div>
                                        </div>
                                </li>
                                <li><a href="">片花</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li class="item-w"><a href="">综艺</a>
                                    <div class="item-w-m">
                                            <a href="">全部电影</a>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">无双</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">无双</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>
                                                <a href="">无双</a>
                                            </div>
                                            <div class="item-w-m-i">
                                                <a href=""><img src="images/banner/5.jpg" alt="">
                                                </a>                                            
                                                <a href="">无双</a>
                                            </div>
                                            <div class="item-triangle"></div>
                                        </div>
                                </li>
                                <li><a href="">脱口秀</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-img">
                            <img src="images/banner/3.png" alt="">
                        </div>
                    </div>
                    <div class="nav-body-box">
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">动漫</a></li>
                                <li><a href="">游戏</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">搞笑</a></li>
                                <li><a href="">旅游</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">音乐</a></li>
                                <li><a href="">时尚</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">原创</a></li>
                                <li><a href="">拍客</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-img">
                            <img src="images/banner/3.png" alt="">
                        </div>
                    </div>
                    <div class="nav-body-box">
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">财经</a></li>
                                <li><a href="">科技</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">体育</a></li>
                                <li><a href="">教育</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">儿童</a></li>
                                <li><a href="">母婴</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">生活</a></li>
                                <li><a href="">健康</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">军事</a></li>
                                <li><a href="">汽车</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">公益</a></li>
                                <li><a href="">纪录片</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">文学</a></li>
                                <li><a href="">漫画</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-img">
                            <img src="images/banner/3.png" alt="">
                        </div>
                    </div>
                    <div class="nav-body-box">
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">热点</a></li>
                                <li><a href="">风云榜</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">全网影视</a></li>
                                <li><a href="">应用商店</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">奇秀直播</a></li>
                                <li><a href="">直播中心</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">商城</a></li>
                                <li><a href="">VR</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">大头</a></li>
                                <li><a href="">爱奇艺号</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-item">
                            <ul>
                                <li><a href="">泡泡广场</a></li>
                                <li><a href="">游戏中心</a></li>
                            </ul>
                        </div>
                        <div class="nav-body-box-img">
                            <img src="images/banner/3.png" alt="">
                        </div>
                    </div>
                    <div class="nav-body-box-rightimg">
                        <a href="">
                            <img src="images/banner/4.png" width=33px alt="">
                            <p>会员精选</p>
                        </a> 
                    </div>
                </div>
            </div>

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

<div class="content">
                <div class="content-box">
                    <div class="content-box-title">
                        <a href="">
                            <div class="content-box-title-img"></div>
                            <span>今日焦点</span>
                            <span>更多</span>
                        </a> 
                    </div>
                    <div class="content-box-con">
                        <div class="content-box-con1">
                            <div>
                                <div class="content-box-con1-top">
                                        <div><img src="images/19.png" alt=""></div>
                                        <a href="">2019春运火车票开抢 记好购票时间点</a>
                                </div>
                                <ul id="txtList0">
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">看美丽乡村 辽宁石庙子村</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">《明日，应用改变生活》</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">中国扶贫道路越走越宽</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">拾荒老人写33万字爱情小说</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">明年个税怎么算？税务总局公布居民个人预扣预缴方法</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <div class="content-box-con1-top">
                                        <div><img src="images/19.png" alt=""></div>
                                        <a href="">西藏日喀则市谢通门县发生5.8级地震</a>
                                </div>
                                <ul id="txtList0">
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">汽车“飞起”撞向隧道顶</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">我国拟对疫苗管理单独立法</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">郑州公交车肇事致13伤</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">为招揽生意男子用涂料P马路</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">男子高铁上吸毒被北京铁路警方刑拘 自称因感情受挫</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-box-con1-img">
                                <ul>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/1.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">老翁将乘坐"木桶"横渡大西洋</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/2.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">老人用树根独创"墨迹根书"</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>  
                        <div class="content-box-con2">
                            <div class="focus-pic-wrap">
                                <div class="picList1">
                                    <img src="images/pic/3.jpg" alt="">
                                    <div class="picList1-box">
                                        <div class="picList1-img">
                                            <div></div>
                                            <a href="">爱奇艺爱电影</a>
                                        </div>
                                        <div class="picList1-txt">
                                            <a href="">我和王凯没有"相杀"只有相爱</a>
                                        </div>
                                        <div class="picList1-icon">
                                            <a href=""><div class="picList1-icon1"></div></a> 
                                            <span>1/4</span>
                                            <a href=""><div class="picList1-icon2"></div></a> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="focus-list-wrap">
                                <ul id="txtList0">
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">汽车“飞起”撞向隧道顶</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">我国拟对疫苗管理单独立法</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">郑州公交车肇事致13伤</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">为招揽生意男子用涂料P马路</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">男子高铁上吸毒被北京铁路警方刑拘 自称因感情受挫</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">汽车“飞起”撞向隧道顶</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">我国拟对疫苗管理单独立法</a>
                                    </li>
                                    <li>
                                        <img src="images/20.png" alt=""> 
                                        <a href="">郑州公交车肇事致13伤</a>
                                        <img src="images/21.png" alt="">
                                        <a href="">为招揽生意男子用涂料P马路</a>
                                    </li>
                                </ul>
                            </div>
                        </div> 
                        <div class="content-box-con3">
                            <div class="content-box-con3-img1">
                                <ul>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/4.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">周冬雨喊冤"我也是双眼皮"</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/5.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">少女唱香蜜主题曲惊呆导师</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-box-con3-img1">
                                <ul>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/6.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">周深天籁之音</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/7.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">温暖冬日的浪漫圣诞曲</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-box-con3-img1">
                                <ul>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/8.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">演员：学霸排练间睡觉引侧目</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <div class="content-img0"><a href=""><img src="images/pic/9.jpg" alt=""></a></div> 
                                            <div class="content-smallbox">
                                                <a href="" class="content-a">奇悬疑剧场：原生之罪</a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-box1">
                    <div class="content-boxl">
                        <div class="content-box1-title">
                            <a href="">
                                <div class="content-box-title-img box1-title"></div>
                                <span>综艺</span>
                                <span>更多</span>
                                <span>上新了 故宫</span>
                                <span> / </span>
                                <span>声入人心</span>
                                <span> / </span>
                                <span>梦想的声音第3季</span>
                            </a> 
                        </div>
                        <div class="content-box1-con1">
                            <div class="content-box1-banner">
                                <img src="images/banner/6.jpg" alt="">
                                <a href=""><div class="content-box1-btnl"></div></a> 
                                <a href=""><div class="content-box1-btnr"></div></a>
                                <div class="content-box1-con1-s">
                                    <span>12-21期</span>
                                </div> 
                            </div>
                            <div class="content-box1-text">
                                <p><a href="">上新了 故宫</a></p>
                                <p>邓伦周一围揭秘淑芳斋主人 乾隆十公主玩具曝光</p>
                            </div>
                        </div>
                        <div class="content-box1-con2">
                            <div class="content-box1-con2-1">
                                <ul>
                                    <li class="content-imgitem">
                                        <a href="">
                                            <div class="content-divitem">
                                                <img src="images/pic/11.jpg" width=210px alt="">
                                            </div> 
                                            <div class="content-txtitem">
                                                <p><a href="">国家宝藏第2季</a></p>
                                                <p>最美琵琶女宋佳打脸虚荣同伴</p>
                                            </div>
                                            <div class="content-scaleitem">
                                                <a href="">
                                                    <div class="content-scaleitem1">
                                                        <img src="images/pic/13.jpg" width="250px" alt="">
                                                        <div class="scaleitem1-item"></div>
                                                    </div>
                                                    <div class="content-scaleitem2">
                                                        <p id="scale-p">国家宝藏第2季</p>
                                                        <a id="scale-a" href="">收藏</a>
                                                        <div class="scaleitem2-tip">
                                                            <p>类型：内地</p>
                                                            <p>嘉宾：宋佳/蒋雯丽/王劲松（演员）</p>
                                                            <p>亮点：宋佳演绎最美"琵琶女"</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="content-imgitem">
                                        <a href="">
                                            <div class="content-divitem">
                                                <img src="images/pic/11.jpg" width=210px alt="">
                                            </div> 
                                            <div class="content-txtitem">
                                                <p><a href="">国家宝藏第2季</a></p>
                                                <p>最美琵琶女宋佳打脸虚荣同伴</p>
                                            </div>
                                            <div class="content-scaleitem">
                                                <a href="">
                                                    <div class="content-scaleitem1">
                                                        <img src="images/pic/13.jpg" width="250px" alt="">
                                                        <div class="scaleitem1-item"></div>
                                                    </div>
                                                    <div class="content-scaleitem2">
                                                        <p id="scale-p">国家宝藏第2季</p>
                                                        <a id="scale-a" href="">收藏</a>
                                                        <div class="scaleitem2-tip">
                                                            <p>类型：内地</p>
                                                            <p>嘉宾：宋佳/蒋雯丽/王劲松（演员）</p>
                                                            <p>亮点：宋佳演绎最美"琵琶女"</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="content-imgitem">
                                        <a href="">
                                            <div class="content-divitem">
                                                <img src="images/pic/11.jpg" width=210px alt="">
                                            </div> 
                                            <div class="content-txtitem">
                                                <p><a href="">国家宝藏第2季</a></p>
                                                <p>最美琵琶女宋佳打脸虚荣同伴</p>
                                            </div>
                                            <div class="content-scaleitem">
                                                <a href="">
                                                    <div class="content-scaleitem1">
                                                        <img src="images/pic/13.jpg" width="250px" alt="">
                                                        <div class="scaleitem1-item"></div>
                                                    </div>
                                                    <div class="content-scaleitem2">
                                                        <p id="scale-p">国家宝藏第2季</p>
                                                        <a id="scale-a" href="">收藏</a>
                                                        <div class="scaleitem2-tip">
                                                            <p>类型：内地</p>
                                                            <p>嘉宾：宋佳/蒋雯丽/王劲松（演员）</p>
                                                            <p>亮点：宋佳演绎最美"琵琶女"</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <ul>
                                    <li class="content-imgitem">
                                        <a href="">
                                            <div class="content-divitem">
                                                <img src="images/pic/11.jpg" width=210px alt="">
                                            </div> 
                                            <div class="content-txtitem">
                                                <p><a href="">国家宝藏第2季</a></p>
                                                <p>最美琵琶女宋佳打脸虚荣同伴</p>
                                            </div>
                                            <div class="content-scaleitem">
                                                <a href="">
                                                    <div class="content-scaleitem1">
                                                        <img src="images/pic/13.jpg" width="250px" alt="">
                                                        <div class="scaleitem1-item"></div>
                                                    </div>
                                                    <div class="content-scaleitem2">
                                                        <p id="scale-p">国家宝藏第2季</p>
                                                        <a id="scale-a" href="">收藏</a>
                                                        <div class="scaleitem2-tip">
                                                            <p>类型：内地</p>
                                                            <p>嘉宾：宋佳/蒋雯丽/王劲松（演员）</p>
                                                            <p>亮点：宋佳演绎最美"琵琶女"</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="content-imgitem">
                                        <a href="">
                                            <div class="content-divitem">
                                                <img src="images/pic/11.jpg" width=210px alt="">
                                            </div> 
                                            <div class="content-txtitem">
                                                <p><a href="">国家宝藏第2季</a></p>
                                                <p>最美琵琶女宋佳打脸虚荣同伴</p>
                                            </div>
                                            <div class="content-scaleitem">
                                                <a href="">
                                                    <div class="content-scaleitem1">
                                                        <img src="images/pic/13.jpg" width="250px" alt="">
                                                        <div class="scaleitem1-item"></div>
                                                    </div>
                                                    <div class="content-scaleitem2">
                                                        <p id="scale-p">国家宝藏第2季</p>
                                                        <a id="scale-a" href="">收藏</a>
                                                        <div class="scaleitem2-tip">
                                                            <p>类型：内地</p>
                                                            <p>嘉宾：宋佳/蒋雯丽/王劲松（演员）</p>
                                                            <p>亮点：宋佳演绎最美"琵琶女"</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="content-imgitem">
                                        <a href="">
                                            <div class="content-divitem">
                                                <img src="images/pic/11.jpg" width=210px alt="">
                                            </div> 
                                            <div class="content-txtitem">
                                                <p><a href="">国家宝藏第2季</a></p>
                                                <p>最美琵琶女宋佳打脸虚荣同伴</p>
                                            </div>
                                            <div class="content-scaleitem">
                                                <a href="">
                                                    <div class="content-scaleitem1">
                                                        <img src="images/pic/13.jpg" width="250px" alt="">
                                                        <div class="scaleitem1-item"></div>
                                                    </div>
                                                    <div class="content-scaleitem2">
                                                        <p id="scale-p">国家宝藏第2季</p>
                                                        <a id="scale-a" href="">收藏</a>
                                                        <div class="scaleitem2-tip">
                                                            <p>类型：内地</p>
                                                            <p>嘉宾：宋佳/蒋雯丽/王劲松（演员）</p>
                                                            <p>亮点：宋佳演绎最美"琵琶女"</p>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="content-box1-con2-1"></div>
                        </div>
                    </div>                   
                    <div class="content-box1-con3">
                        <div class="content-box1-con3-title">
                            <a href="">
                                <span>精彩推荐</span>
                                <span>更多</span>
                            </a>
                        </div>
                        <div class="content-box1-con3">
                            <div class="content-img0"><a href=""><img src="images/pic/14.jpg" width="210px" alt=""></a></div> 
                            <div class="content-smallbox tfboy">
                                <a href="" class="content-a">掏粪男孩成人献礼</a>
                            </div>
                            <div class="content-smallbox2">
                                <div>
                                    <ul id="txtList0" class="txtList1">
                                        <li>
                                            <a href="">张杰歌唱中国少年强</a>
                                        </li>
                                        <li>
                                            <a href="">浙江跨年兄弟团热血合唱</a>
                                        </li>
                                        <li>
                                            <a href="">单霁翔谈故宫情怀</a>
                                        </li>
                                        <li>
                                            <a href="">林彦俊加盟小姐姐的花店</a>
                                        </li>
                                        <li>
                                            <a href="">杨幂刘恺威曾一见钟情</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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;
}

猜你喜欢

转载自blog.csdn.net/weixin_41732430/article/details/85268532
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022