前端实战：只用CSS写出爱奇艺官网
2024-06-21 08:28:28
写在前面
经过两个月对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：
<div class="nav-top"><div class="nav-top-image"><div class="nav-top-image1"><a href=""><img src="data: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="data:images/2.png" alt=""></a></div><div class="nav-input-search"><a href=""><div class="nav-input-search-image"><img src="data:images/3.png" alt=""></div><div class="nav-input-search-image2"><img src="data:images/4.png" alt=""></div></a></div></div><div class="nav-icon1"><div class="nav-icon1-image1"><a href=""><img src="data:images/5.png" alt=""></a> </div><div class="nav-icon1-box"><ul><a href=""><li class="nav-icon1-li"><div><img src="data:images/11.png" alt=""></div><span>了解VIP会员专享特权</span></li></a> <a href=""><li class="nav-icon1-li"><div><img src="data:images/12.png" alt=""></div><span>做任务，领奖励</span></li></a><a href=""><li class="nav-icon1-li"><div><img src="data: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="data:images/6.png" alt=""></a> </div><div class="nav-icon2-box"><ul><a href=""><li class="nav-icon2-li"><div><img src="data:images/14.png" alt=""></div><span>上传视频</span></li></a> <a href=""><li class="nav-icon2-li"><div><img src="data:images/15.png" alt=""></div><span>制作视频</span></li></a><a href=""><li class="nav-icon2-li"><div><img src="data:images/16.png" alt=""></div><span>我的空间</span></li></a><a href=""><li class="nav-icon2-li"><div><img src="data:images/14.png" alt=""></div><span>上传视频</span></li></a> <a href=""><li class="nav-icon2-li"><div><img src="data:images/15.png" alt=""></div><span>制作视频</span></li></a><a href=""><li class="nav-icon2-li"><div><img src="data: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="data:images/7.png" alt=""></a> </div><div class="nav-icon3-box"><ul><li class="nav-icon3-li"><div><img src="data:images/11.png" alt=""></div><span>新手跳广告，送VIP</span></li> <li class="nav-icon3-li"><div><img src="data:images/12.png" alt=""></div><span>5倍流畅度，不卡顿</span></li><li class="nav-icon3-li"><div><img src="data:images/13.png" alt=""></div><span>1080P免费畅享</span></li><li class="nav-icon3-li"><div><img src="data: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="data: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="data: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="data: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="data: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="data:images/10.png" alt=""></a> </div><div class="nav-icon6-box"><ul><li class="nav-icon6-li"><div><img src="data:images/11.png" alt=""></div><span>新手跳广告，送VIP</span></li> <li class="nav-icon6-li"><div><img src="data:images/12.png" alt=""></div><span>5倍流畅度，不卡顿</span></li><li class="nav-icon6-li"><div><img src="data:images/13.png" alt=""></div><span>1080P免费畅享</span></li><li class="nav-icon6-li"><div><img src="data: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="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data: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="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data: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="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data:images/banner/5.jpg" alt=""></a><a href="">无双</a></div><div class="item-w-m-i"><a href=""><img src="data: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="data: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="data: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="data: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="data:images/banner/3.png" alt=""></div></div><div class="nav-body-box-rightimg"><a href=""><img src="data: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="data:images/19.png" alt=""></div><a href="">2019春运火车票开抢 记好购票时间点</a></div><ul id="txtList0"><li><img src="data:images/20.png" alt=""> <a href="">看美丽乡村 辽宁石庙子村</a><img src="data:images/21.png" alt=""><a href="">《明日，应用改变生活》</a></li><li><img src="data:images/20.png" alt=""> <a href="">中国扶贫道路越走越宽</a><img src="data:images/21.png" alt=""><a href="">拾荒老人写33万字爱情小说</a></li><li><img src="data:images/20.png" alt=""> <a href="">明年个税怎么算？税务总局公布居民个人预扣预缴方法</a></li></ul></div><div><div class="content-box-con1-top"><div><img src="data:images/19.png" alt=""></div><a href="">西藏日喀则市谢通门县发生5.8级地震</a></div><ul id="txtList0"><li><img src="data:images/20.png" alt=""> <a href="">汽车“飞起”撞向隧道顶</a><img src="data:images/21.png" alt=""><a href="">我国拟对疫苗管理单独立法</a></li><li><img src="data:images/20.png" alt=""> <a href="">郑州公交车肇事致13伤</a><img src="data:images/21.png" alt=""><a href="">为招揽生意男子用涂料P马路</a></li><li><img src="data: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="data: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="data: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="data: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="data:images/20.png" alt=""> <a href="">汽车“飞起”撞向隧道顶</a><img src="data:images/21.png" alt=""><a href="">我国拟对疫苗管理单独立法</a></li><li><img src="data:images/20.png" alt=""> <a href="">郑州公交车肇事致13伤</a><img src="data:images/21.png" alt=""><a href="">为招揽生意男子用涂料P马路</a></li><li><img src="data:images/20.png" alt=""> <a href="">男子高铁上吸毒被北京铁路警方刑拘 自称因感情受挫</a></li><li><img src="data:images/20.png" alt=""> <a href="">汽车“飞起”撞向隧道顶</a><img src="data:images/21.png" alt=""><a href="">我国拟对疫苗管理单独立法</a></li><li><img src="data:images/20.png" alt=""> <a href="">郑州公交车肇事致13伤</a><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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;
}
前端实战：只用CSS写出爱奇艺官网相关推荐
- 开发效率提升50%以上，爱奇艺官网主站的Nuxt实践
01 背景 让每一个用户获取到稳定.及时的页面体验,是前端工程师们一直以来努力的方向. 作为一个拥有丰富内容资源的视频网站,爱奇艺官网主站需要频繁进行节目上线或者下线.各种活动配置等操作调整,对于页面 ...
- HTML学生个人网站作业设计：电影网站设计——仿爱奇艺官网影视网站(1页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
- 爱奇艺携手网心科技构建下一代混合CDN，入选IDC中国边缘云最佳实践
近日,国际权威分析机构IDC正式发布<中国边缘云最佳实践,2022>(以下简称<报告>),爱奇艺携手网心科技"构建下一代混合分发传输网络(CDN),为互联网视频打造极 ...
- 195元爱奇艺会员只卖5元 揭秘背后黑色产业链
来源:法治周末 记者 马树娟 近两百元的视频网站年度会员资格,只需要区区数元就可以买到:而价值十余元的月度会员资格,甚至只需几分钱-- 此前,湖北用户刘栋(化名)从未意识到:这些以超低价出售视频网站会 ...
- 互联网晚报 | 1/12 星期四 | 微信回应切断抖音外链；爱奇艺App限制投屏；iPhone 16 Pro或取消灵动岛摄像头...
微信回应切断抖音外链:坚决打击给用户造成诱导.骚扰的外链 1月10日晚间,第一财经独家报道抖音链接目前在微信内既无法直接打开.也无法复制完成跳转,甚至要通过图片OCR识别进行文字提取的情况.但微信内 ...
- 经验分享：爱奇艺关闭自动续费会员的功能
分享一个和技术开发无关的经验,但是对爱奇艺会员续费不熟悉的话,这个经验还是很有作用的,尤其是自动续费这个功能,爱奇艺做的很好,很隐蔽,不刻意找的话基本找不到怎么取消自动续费会员的功能.那么,下面就来介 ...
- 你关心的问题都在这！爱奇艺用户留存预测挑战赛Baseline上线
近日,爱奇艺宣布联合数据挖掘顶级会议--网络搜索和数据挖掘国际会议WSDM 2022(ACM International Conference onWeb Search and Data Mining ...
- 爱奇艺又涨价？注定想追剧就要成为SSSSVIP
爱奇艺还要涨价?我第一个不服 1 个月 19.8 元的会员,你觉得贵吗? 这其实是一个伪命题,毕竟每个人的需求都不同. 但是,爱奇艺的老板觉得,19.8元/月还是太便宜了. 最近的一次电话采访中,爱奇 ...
- 怎么取消苹果订阅自动续费_首开79，到期自动续费扣178元! 如何取消爱奇艺自动续费？...
很多朋友通过了爱奇艺新用户99元一年的活动开通了爱奇艺黄金会员,目前爱奇艺官网在大力推广自动续费服务,自动续费首次开通比较优惠,但是到期后下次扣分价格就不怎么划算了,比如新用户首次开通最低79元一年( ...
最新文章
- [Ruby]转载: 关于ruby中 %Q, %q, %W, %w, %x, %r, %s 的用法
- idea swagger生成接口文档_spring boot集成Swagger-UI接口文档
- Http协议(2)—客户端的识别与cookie机制
- mysql实验步骤_MySQL双方配置实验步骤
- logback.xml日志配置文件，springboot
- sublime text3 eslint 安装教程
- IE8自动提交form的问题
- 【Verilog HDL】2. 4选1数据选择器
- win10无法装载重装系统iso文件_Win10系统如何装载和弹出ISO镜像文件？
- 【帝国CMS】灵动标签调用标题图片没有图片时显示默认图片
- 适合学生党的蓝牙耳机品牌有哪些？性价比高的无线耳机推荐
- c语言自动安装打印机驱动,安装自定义的即插即用打印机驱动程序
- 如何在iOS 6 时代的App Store中推广
- 文旅部、国家发改委等十部门：推广旅游电子合同使用
- 密码锁（春季每日一题 29）
- 表达式语言-0421-v1.0张雅慧
- C#中var关键字 //作者：courageously
- 虾皮运营之入职第一周
- [Unity] Unity中实现羽化功能的shader
- 英语学习--且行且珍惜
热门文章
- ics文件添加到系统日历
- void*之阴沟里翻船
- Windows Identity Foundation 说明
- 《Activiti 深入BPM工作流》---如何创建默认的activiti的25张表?
- flowable工作流 流程变量_业务流程 BPM、工作流引擎、Flowable、Activiti
- 大家能推荐个好用的日程、任务、待办管理app吗?
- 凭期权定价捧得诺奖的斯科尔斯败走麦城，理论好对于交易有帮助吗？
- rnss和rdss的应用_北斗RNSS/RDSS多模手持终端设计与实现
- 27岁转行java是不是太晚了
- CVPR2021跟踪算法TransT的配置（Transformer Tracking）