目录
一、头部导航栏
二、隐藏下拉框导航栏
1、 效果展示编辑
2、HTML部分代码
3、 CSS部分代码
三、设置a标签实现的一个跳转
四、轮播图及诸葛四图区域
1、效果展示
2、HTML部分代码
3、CSS部分代码
五、内容中心区域
1、效果展示
2、HTML部分代码
3、CSS部分代码
六、小妲己区域
1、效果展示
2、HTML部分代码
3、CSS部分代码
七、底部区域
1、效果展示
2、HTML部分代码
3、CSS部分代码
八、关于源码
分享一下之前写的王者荣耀的官网页面
一、头部导航栏
我就按照截图一次和大家说一下，首先是顶部的导航栏部分，这一部分在我之前的博客中详细的说过，这里就不细说了
二、隐藏下拉框导航栏
下面这一部分是隐藏的导航栏区域，主要就是hover上面导航栏区域，出现这样一个隐藏的下拉框导航栏，隐藏的导航栏里面的布局也是通过ul，li去实现的 ，主要注意格式的设置即可
1、 效果展示
2、HTML部分代码
<div class="second-nav"><ul><li><a href="">版本介绍</a><a href="">游戏介绍</a><a href="">英雄资料</a><a href="">爆料站</a><a href="">世界观体验站</a><a href="">游戏壁纸</a></li><li><a href="">攻略中心</a><a href="">开放素材库</a><a href="">内容共创平台</a></li><li><a href="">KPL</a><a href="">世界冠军杯</a><a href="">挑战者杯</a><a href="">全国大赛</a><a href="">女子公开赛</a><a href="">K甲联赛</a><a href="">高校联赛</a><a href="">全民赛</a><a href="">赛事数据</a></li><li><a href="">荣耀传承</a><a href="">王者文化站</a><a href="">万千世界</a><a href="">星光殿堂</a><a href="">IP共创计划</a><a href="">商户特权</a><a href="">龙翼王者卡</a></li><li><a href="">创意互动营</a><a href="">王者营地</a><a href="">微信圈子</a><a href="">官方微博</a><a href="">微信公众号</a><a href="">手Q订阅号</a></li><li><a href="">腾讯游戏防沉迷</a><a href="">成长守护平台</a><a href="">对局环境情报站</a><a href="">客服专区</a><a href="">礼包兑换</a><a href="">自动服务</a></li><li><a href="">王者荣耀世界</a><a href="">代号破晓</a><a href="">代号启程</a></li></ul></div>3、 CSS部分代码
/* 二级隐藏下拉框导航栏 */
.second-nav{position: absolute;top: 83px;left: 0;width: 100%;background: #000;background: rgba(0,0,0,0.7);z-index: 3;transition: all .3s ease; /* ease快启动慢停止 */overflow: hidden;height: 0; /* height: 285px; */box-sizing: border-box;
}.second-nav>ul{width: 890px;height: 240px;margin: 0 auto;overflow: hidden;padding-top: 15px;padding-bottom: 30px;padding: 15px 0 30px 114px;
}.second-nav>ul>li{float: left;display: inline;width: 110px;padding: 2px 2.5px 0;text-align: center;}.second-nav>ul>li>a{height: 30px;line-height: 30px;display: block;padding: 0;font-size: 14px;color: #c9c9dd;
}
/* 隐藏导航栏里的a标签hover时要出现的效果 */
.second-nav>ul>li>a:hover{color:rgb(243,194,88) ;text-decoration: underline;
}/* hover时出现隐藏二级导航条 */
header:hover >.second-nav{height: 285px;
}三、设置a标签实现的一个跳转
<!-- 点击背景图马克跳转地址 -->
<a class="ad" href="https://pvp.qq.com/coming/v2/skins/0714-shzxmkbl.shtml"></a> .ad{display: block;height: 450px;width: 1300px;}
四、轮播图及诸葛四图区域
轮播图的话我是用的swiper插件去实现的，具体的用法大家可以去swiper官网了解一下，右边的下载游戏等五个图是利用精灵图位置移动实现的，具体的精灵图可以在官网找到，下面的诸葛亮等四个图需要注意的一点是hover图片的时候，图片会放大，这里也是用到了transform:scale()
1、效果展示
2、HTML部分代码
<div class="news"><div class="left"><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/main.img/lunbo1.jpeg"></div><div class="swiper-slide"><img src="img/main.img/lunbo2.jpeg"></div><div class="swiper-slide"><img src="img/main.img/lunbo3.jpeg"></div><div class="swiper-slide"><img src="img/main.img/lunbo4.jpeg"></div><div class="swiper-slide"><img src="img/main.img/lunbo5.jpeg"></div></div><div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。--><div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。--></div><div class="title"><a data-id="0" class="active" href="">英雄羁绊短片</a><a data-id="1" href="">夏季赛周最佳</a><a data-id="2" href="">王者炸麦了</a><a data-id="3" href="">荣耀大话王</a><a data-id="4" href="">热门打法</a></div></div><div class="center"><!-- 菜单区域 --><div class="menu"><div data-id="0" class="active">热门</div><div data-id="1">新闻</div><div data-id="2">公告</div><div data-id="3">活动</div><div data-id="4">赛事</div><a href="">···</a></div><!-- 菜单下的列表信息 --><div class="all-list"><div class="news-list"><div class="headline"><a>王者荣耀夏日直播节福利</a></div><div class="list"><span class="text-icon icon-hot">公告</span><a href="">7月21日全服不停机更新公告</a><span class="date">07/20</span></div><div class="list"><span class="text-icon icon-notice">热门</span><a href="">大神带你直击英雄调整关键点！</a><span class="date">07/20</span></div><div class="list"><span class="text-icon icon-notice">热门</span><a href="">B站“征服者杯”主播对抗赛火热来袭！</a><span class="date">07/15</span></div><div class="list"><span class="text-icon icon-notice">热门</span><a href="">大神带你直击英雄调整关键点！</a><span class="date">07/15</span></div><div class="list"><span class="text-icon icon-notice">热门</span><a href="">互动小任务第15期-元歌皮肤设计大赛总决选语音奖励方案票选开启</a><span class="date">07/15</span></div><div class="list"><span class="text-icon icon-notice">热门</span><a href="">大神带你直击英雄调整关键点！</a><span class="date">07/14</span></div><div class="list"><span class="text-icon icon-notice">热门</span><a href="">互动小任务第15期-元歌皮肤设计大赛总决选语音奖励方案票选开启</a><span class="date">07/14</span></div></div></div></div><div class="right"><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a></div><!-- 诸葛亮等四张图片 --><div class="w2 content4"><ul><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li></ul></div></div>3、CSS部分代码
main{margin: 0 auto;width: 1200px;}.news>.left{position: relative;float: left; width: 604px;height: 342px;background-color: lightblue;}.news>.left>.images{position: absolute;
width: 3050px;}.news>.left>.images>a>img{height: 298px;width: 604px;float: left;
}
/*swiper css*/
.swiper{height: 298px;width: 604px;
}
.swiper{/* --swiper-theme-color: #ff6600;设置Swiper风格 */--swiper-navigation-color: rgba(30, 30, 30, 0.3);/* 单独设置按钮颜色 */--swiper-navigation-size: 30px;/* 设置按钮大小 */ overflow: hidden;
}
.swiper-wrapper img{height: 298px;width: 604px;
}/* 轮播文字区域 */
.title{position: absolute;height: 44px;background-color: #000;width: 100%;bottom: 0px;/* display: flex; */
}
.title>a{display: inline-block;width: 19%;height:44px ;color: #b1b2be;line-height: 44px;text-align: center;font-size: 14px;
}
/* .title>.active{background-color: rgba(255, 255, 255, 0.15);color: #f3c258;
} */
.title>a:hover{background-color: rgba(255, 255, 255, 0.15);color: #f3c258;
}/* center区域 */
.center{float: left;width: 360px;height: 342px;background-color: rgba(30, 30, 30, 0.85);overflow: hidden;
}
/* 菜单区域 */
.center>.menu{color: #b8b9c5;border-bottom: 1px solid #000;padding: 0 20px;box-sizing: border-box;width: 325px;height: 49px;margin-left:17px ;/*让黑色border线向右移动居中 */
}
.center>.menu>div{float: left;text-align: center;line-height: 49px;border-bottom: 3px solid transparent;font-size: 14px;height: 35px;width: 48px;cursor: pointer;padding-bottom: 10px;/*让黄色border线下移 */
}
.center>.menu>div:hover{color: #f3c258;border-bottom: 3px solid #f3c258;
}.center>.menu>a {/* color: #f3c258; */display: inline-block;color: #b8b9c5;text-decoration: none;width: 45px;height: 35px;text-align: center;line-height: 30px;margin-top: 10px;/*把省略号下移 */
}/* .qwer{background-color: aqua;position: absolute;
}
.all-list{width: 100%;
} */
/* 菜单下的列表信息 */
.center>.all-list{ width: 100%;}
.headline{width:307px ;height:38px ;
}
.center>.all-list>.news-list{width: 360px;padding: 0 20px;box-sizing: border-box;
}
.center>.all-list>.news-list>a{text-decoration: none;color: #f3c258;
}
.center>.all-list>.news-list>.headline{display: block;height: 36px;font-size: 18px;background-color: #555;line-height: 36px;padding-left: 15px;margin: 13px 0 13px 0;color: #f3c258;
}
.all-list>.news-list>.list{font-size: 13px;padding: 2px 0;}
.all-list>.news-list>.list>.text-icon{height: 16px;line-height: 16px;margin-top: 4px;padding: 0 3px;font-size: 12px;margin-right: 5px;border-radius: 3px;vertical-align: middle;
}.all-list>.news-list>.list>.icon-hot {float: left;color: orange;border: 1px solid orange;
}.all-list>.news-list>.list>.icon-notice {float: left;color: red;border: 1px solid red;
} .all-list>.news-list>.list>a {display: inline-block;height: 25px;line-height: 25px;width: 240px;overflow: hidden;/* 单行省略号 */word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;color: #b8b9c5;/* background-color: palevioletred; */
}
.all-list>.news-list>.list>.date {float: right;height: 20px;line-height: 20px;text-align: right;color: #f3c258;
}
/* right区域 */
.right{position: relative;float: left;width: 236px;height: 342px;/* background-color: blue; */
}
.right>a{display: block;background-image: url(../img/main.img/sprite.png);width: 100%;
}
.right>a:nth-child(1){height: 128px;background-position:-1px -219px;
}
.right>a:nth-child(2){height: 107px;background-position: -1px -350px;
}
.right>a:nth-child(3){height: 107px;background-position: -1px -461px;
}
.right>a:nth-child(4){background-image: url(../img/main.img/shiling.png);position: absolute;width: 53px;height: 68px;right: -58px;top: 0;
}
.right>a:nth-child(5){background-image: url(../img/main.img/fanchenmi.png);position: absolute;width: 75px;height: 67px;right: -79px;top: 73px;
}.content4 {height: 134px;margin: 28px 0 34px 0;float: left;/* overflow: hidden; *//* padding-bottom: 30px; */
}.content4 ul li {float: left;overflow: hidden;margin-right: 12px;width: 291px;height: 134px;
}.content4 ul li a {display: inline-block;width: 291px;height: 134px;transition: all 0.4s;
}.content4 ul li a:hover {transform: scale(1.1) /* scale缩放属性 */
}.content4 ul li:nth-of-type(1) a {background: url(../img/main.img/zg.jpg);
}.content4 ul li:nth-of-type(2) a {background: url(../img/main.img/lb.png);
}.content4 ul li:nth-of-type(3) a {background: url(../img/main.img/jc.jpg);
}.content4 ul li:last-of-type a {background: url(../img/main.img/ss.jpg);
}.content4 ul li:last-of-type {margin-right: 0;
}
五、内容中心区域
这一部分的话，需要注意的点就是在hover图中的每张图片的时候，会出现一个黑色透明阴影部分，这个效果的实现需要定位一个和图片同样大小的黑色区域，只不过图片将其覆盖住了，我们在hover图片的时候，给图片设置一个透明，就可以实现我们所要的效果。
1、效果展示
2、HTML部分代码
<!-- 内容中心区域 --><div class="w2"><!-- 3.内容中心 --><div class="cen"><div class="cenLeft"><i class="i1"></i><h4>内容中心<i class="i2"></i><span>更多</span></h4><!-- 精品栏目 --><ul class="cenLeftTop"><li>精品栏目</li><li>赛事精品</li><li>英雄攻略</li></ul><!-- 最新 --><ul class="cenLeftCen"><li>最新</li><li class="mk">马菠萝奇闻录</li><li>狄仁杰封神榜</li></ul><!-- 内容中心的视频 --><ul class="cenLeftBot"><li><div class="zhezhao"><div class="zhezhao1"></div></div><div class="ship"><img src="img/main.img/nrzx.jpg" alt=""><div><span>7840</span><h4>2022-06-20</h4></div></div><span>【马菠萝奇闻录】第49期:急!宫本学会了，阿通哪里领?!</span></li><li><div class="zhezhao"><div class="zhezhao1"></div></div><div class="ship"><img src="img/main.img/nrzx2.jpg" alt=""><div><span>7840</span><h4>2022-06-20</h4></div></div><span>【狄仁杰封神榜】第91期冷枪难躲冷箭难防快来调查子弹的真相</span></li><li><div class="zhezhao"><div class="zhezhao1"></div></div><div class="ship"><img src="img/main.img/nrzx3.jpg" alt=""><div><span>7840</span><h4>2022-06-20</h4></div></div><span>【狄仁杰封神榜】第90期锁定透视守护峡谷草丛!</span></li><li><div class="zhezhao"><div class="zhezhao1"></div></div><div class="ship"><img src="img/main.img/nrzx4.jpg" alt=""><div><span>7840</span><h4>2022-06-20</h4></div></div><span>【马菠萝奇闻录】第48期:职业和国服选手都在用的超神设置</span></li><li><div class="zhezhao"><div class="zhezhao1"></div></div><div class="ship"><img src="img/main.img/nrzx5.png" alt=""><div><span>7840</span><h4>2022-06-20</h4></div></div><span>【马菠萝奇闻录】第47期:我也不想出形昭啊，可他是老六误!</span></li><li><div class="zhezhao"><div class="zhezhao1"></div></div><div class="ship"><img src="img/main.img/nrzx6.png" alt=""><div><span>7840</span><h4>2022-06-20</h4></div></div><span>【狄仁杰封神榜】第89期锁定透视守护峡谷草丛!</span></li><li><div class="zhezhao"><div class="zhezhao1"></div></div><div class="ship"><img src="img/main.img/nrzx7.jpg" alt=""><div><span>7840</span><h4>2022-06-20</h4></div></div><span>【狄仁杰封神榜】第88期无视野锁定峡谷“爱你”科技版</span></li><li><div class="zhezhao"><div class="zhezhao1"></div></div><div class="ship"><img src="img/main.img/nrzx8.jpg" alt=""><div><span>7840</span><h4>2022-06-20</h4></div></div><span>【马菠萝奇闻录】第45期:英雄持性放大，他们原来还有不—样的</span></li></ul></div><div class="cenRight"><i class="i3"></i><h4>英雄/皮肤<i class="i4"></i><span>更多</span></h4><ul class="hero"><li>最新英雄</li><li>最新皮肤</li><li>周免英雄</li></ul><div class="heroImg"><img src="img/main.img/gy.webp" alt=""><h4>新英雄：戈娅</h4><span>上线时间：2022.06.23</span></div><div class="heroImg2"><div class="yy yy1"><span>桑启</span></div><img src="img/main.img/sq.webp" alt=""><div class="yy yy2"><span>霏</span></div><img src="img/main.img/fei.webp" alt=""><div class="yy yy3"><span>金蝉</span></div><img src="img/main.img/tangs.webp" alt=""><div class="yy yy4"><span>云樱</span></div><img src="img/main.img/yuny.webp" alt=""></div></div></div></div>3、CSS部分代码
.cen{width: 1215px;overflow: hidden;
}.cenLeft {position: relative;height: 510px;width: 872px;float: left;
}
/* 内容前的小符号 */
.cenLeft>.i1{position: absolute;top: 12px;left:820px;width: 18px;height:18px;background: url(../img/main.img/sprite.png) -250px 3px;/* background-color: pink; */
}
/* 更多前的小符号 */
.cenLeft .i2{position: absolute;top: 3px;left:0px;width: 30px;height: 30px;background: url(../img/main.img/sprite.png) 0px -100px;/* background-color: pink; */
}
.cenLeft h4 {font-size: 22px;height: 45px;line-height: 45px;margin-left: 26px;
}.cenLeft h4 span {float: right;color: #999;font-size: 14px;
}/* 精品栏目 */
.cenLeftTop {width: 100%;overflow: hidden; /*这里可以解决li浮动后带来的ul高度塌陷问题，清除浮动 */
}.cenLeftTop li {float: left;width: 290px;height: 35px;background-color: #f5f5f5;line-height: 35px;text-align: center;font-size: 14px;color: #999;cursor: pointer;
}
.cenLeftTop>li+li{border-left: 1px solid #ccc;
}/* .cenLeftTop>li:first-child {border-bottom: 3px solid #f3c258;color: #333333;
} */
.cenLeftTop>li:hover{border-bottom: 3px solid #f3c258;color: #333333;height: 32px;
}
/* 最新 */
.cenLeftCen {height: 43px;/* position: relative; */
}.cenLeftCen li {float: left;border: 1px solid #e5e5e5;padding: 3px 12px;border-radius: 10px;color: #333;font-size: 14px;margin-right: 10px;margin-top: 10px;background-color: #f5f5f5;cursor: pointer;
}.cenLeftCen>li:hover{background-color: #f3c258;color: #fff;
}
/* ? */
/* .cenLeftBot1{position: absolute;left: 0;top:40px;display: none;
}
.mk:hover+.cenLeftBot1{display: block;
}
.cenLeftBot1>li{margin: 0;padding: 0;background: none;border: none;
} */
/* 底部视频 */.cenLeftBot>li {float: left;width: 209px;height: 175px;cursor: pointer;margin: 0 12px 30px 0;position: relative;
}.cenLeftBot>li:nth-of-type(4n) {margin: 0 0 30px 0;
}/* .cenLeftBot li:hover {background-color: #fff;
} */.cenLeftBot li .ship {width: 209px;height: 125px;position: relative;transition: all 0.3s;
}/* .cenLeftBot li img:hover .ship {background: url(./img/index.png) no-repeat;background-position: -192px -64px;
} *//* 可以理解为图片下层的颜色，hover时透明度发生改变，不设置其的话，hover时透明度变化是白色的 */
.zhezhao {position: absolute;width: 209px;height: 125px;background-color: rgba(0, 0, 0, 1);}
/* 图片上的播放按钮 */
.zhezhao1 {position: absolute;top: 40px;left: 85px;width: 45px;height: 45px;background: url(../img/main.img/sprite.png) -192px -64px;/* background-color: pink; *//* background-position: -192px -64px; */
}
/* hover到图片透明度变化 */
.cenLeftBot li .ship:hover {opacity: 0.3;
}.cenLeftBot li .ship>img {width: 100%;height: 100%;
}
/* 包日期和播放量的盒子 */
.cenLeftBot li .ship>div {position: absolute;bottom: 0;left: 0;width: 188px;height: 22px;padding: 0 10px;color: #fff;font-size: 12px;line-height: 22px;background-color: rgba(0, 0, 0, 0.6);
}
/* 播放量 */
.cenLeftBot li .ship>div>span {display: block;float: left;background: url(../img/main.img/sprite.png) -256px -59px no-repeat;/* background-position: -256px -59px; */padding-left: 15px;
}
/* 日期 */
.cenLeftBot li .ship>div>h4 {line-height: 22px;height: 22px;float: right;font-weight: 400;font-size: 12px;
}
/* 多少期的文字介绍 */
.cenLeftBot>li>span {display: block;font-weight: 400;font-size: 14px;width: 212px;height: 40px;padding-top: 10px;/* line-height: 40px; */
}/* 英雄、皮肤右侧部分 */
.cenRight {position: relative;width: 295px;height: 528px;float: right;
} .cenRight .i3{position: absolute;top: 12px;left:0px;width: 30px;height:30px;background: url(../img/main.img/sprite.png) 0px -146px;/* background-color: pink; */
}.cenRight .i4{position: absolute;top:12px;left:245px;width: 18px;height:18px;background: url(../img/main.img/sprite.png) -250px 3px;/* background-color: pink; */
}
.cenRight h4 {font-size: 22px;height: 45px;line-height: 45px;margin-left: 25px;
}.cenRight h4 span {float: right;color: #999;font-size: 14px;
}.hero {width: 101%;overflow: hidden;margin-bottom: 20px;
}.hero li {float: left;width: 98px;height: 32px;background-color: #f5f5f5;line-height: 35px;text-align: center;font-size: 14px;color: #999;cursor: pointer;
}.hero>li+li {border-left: 1px solid #ccc;
}/* .hero>li:first-child {border-bottom: 3px solid #f3c258;color: #333333;
} */
.hero>li:hover{border-bottom: 3px solid #f3c258;color: #333333;height: 29px;
}.heroImg {width: 293px;height: 215px;border: 1px solid #ccc;border-radius: 2px;
} */.heroImg img {display: block;/* float: left; */width: 294px;margin: -1px 0 0 -1px;
} .heroImg h4 {font-size: 18px;height: 27px;line-height: 27px;margin: 8px 0 0 10px;}.heroImg span {font-size: 12px;color: #999;margin-left: 10px;
}.heroImg2 {margin-top: 10px;
}.heroImg2 img {position: relative;z-index: 66;float: left;margin-right: 7px;/* background-color: rgba(0, 0, 0, 1); */
}.heroImg2 img:last-child {margin-right: 0;
}.yy>span{position: absolute;top:40%;left:30% ;display: inline-block;color: #f3c258;text-align: center;font-size: 14px;}/* 黑色是被图片盖住了，所以hover时给图片加一个透明度，就能实现图中所示效果 */
.yy {position: absolute;width: 68px;height: 173px;background-color: rgba(0, 0, 0, 1);
}
.yy2{left:75px ;
}
.yy2>span{left: 40%;
}
.yy3{left:150px ;
}
.yy4{left:225px ;
}.heroImg2 .yy+img:hover {opacity: 0.2;cursor: pointer;transition: opacity 0.5s;
}
六、小妲己区域
这里主要用到的知识点就是固定定位和精灵图的使用，css部分主要就是定位及精灵图的使用，还有伪元素hover的使用。还是挺需要耐心的，要注意的是在鼠标移入王者营地及下面同类型三张小图时，精灵图的位置要发生变化，王者营地的图要变成另一张金色的而且左方会出现一个框，框里放有二维码及文字
1、效果展示
2、HTML部分代码
<div class="rfix"><div class="huli"><span>扫一扫，立刻下载游戏~</span></div><div class="r_zong"><div class="ma"><img src="img/daji.img/wzry.jpg" alt=""></div><div class="yd"><div class="move_in"><img src="img/daji.img/ma.jpg" alt=""><p>扫码<span>关注官方微博</span><br>获取<span>一手爆料及福利</span></p></div></div><div class="wb"><div class="move_in"><img src="img/daji.img/wzry.jpg" alt=""><p>扫码<span>关注官方微博</span><br>获取<span>一手爆料及福利</span></p></div></div><div class="wx"><div class="move_in"><img src="img/daji.img/wzry.jpg" alt=""><p>扫码<span>关注官方微博</span><br>获取<span>一手爆料及福利</span></p></div></div><div class="sp"><div class="move_in"><img src="img/daji.img/wzry.jpg" alt=""><p>扫码<span>关注官方微博</span><br>获取<span>一手爆料及福利</span></p></div></div></div>
</div>3、CSS部分代码
/* 妲己右边fixed */
.rfix {position: fixed;width: 254px;height: 494px;/* background-color: skyblue; */top: 0;right: 0;z-index: 1;
}.rfix .huli {position: absolute;top: 187px;left: 25px;z-index: 2;width: 165px;height: 145px;background: url(../img/daji.img/huli.png);cursor: pointer;
}.rfix .huli span {display: block;position: absolute;top: 37px;left: 12px;width: 88px;height: 36px;font-size: 14px;text-indent: 2px;font-weight: bold;line-height: 18px;color: #62401b;overflow: hidden;
}.rfix .r_zong {width: 117px;height: 233px;position: absolute;top: 332px;left: 86px;
}.rfix .ma {width: 111px;height: 123px;background: url(../img/daji.img/r_all精灵图.png) no-repeat -242px -2px;padding: 3px;
}.rfix .ma img {display: block;width: 111px;height: 110px;
}.yd,
.wb,
.wx,
.sp {width: 117px;height: 38px;cursor: pointer;margin-top: 1px;position: relative;
}.rfix .yd {background: url(../img/daji.img/r_all精灵图.png) -242px -134px;
}.rfix .yd:hover {background: url(../img/daji.img/r_all精灵图.png) -242px -172px;
}
.rfix .wb {background: url(../img/daji.img/r_all精灵图.png) -122px -120px;
}.rfix .wb:hover {background: url(../img/daji.img/r_all精灵图.png) -122px -240px;
}.rfix .yd:hover .move_in,
.rfix .wb:hover .move_in,
.rfix .wx:hover .move_in,
.rfix .sp:hover .move_in {display: block;
}.rfix .wx {background: url(../img/daji.img/r_all精灵图.png) -122px -160px;
}.rfix .wx:hover {background: url(../img/daji.img/r_all精灵图.png) -122px -200px;
}.rfix .sp {background: url(../img/daji.img/r_all精灵图.png) -122px 0;
}.rfix .sp:hover {background: url(../img/daji.img/r_all精灵图.png) -122px -42px;
}.move_in {position: absolute;width: 115px;height: 147px;background: url(../img/daji.img/r_all精灵图.png) no-repeat 0 -416px;/* background-color: pink; */padding-top: 7px;top: -66px;left: -116px;border: 1px solid #d9ad50;border-radius: 5px;display: none;
}.move_in img {margin:0 0 6px 7px;/* display: block; */width: 101px;height: 100px;}.move_in p {width: 100%;height: 34px;line-height: 17px;color: #dcdcdc;font-size: 12px;text-align: center;margin: 0 auto;overflow: hidden;
}.move_in p span {color: #d9ad50;
}
七、底部区域
这一部分的话主要就是一些字体样式的设置以图片的引用
1、效果展示
2、HTML部分代码
<!-- 底部区域 --><footer><div class="w2"><div class="f-T"><div class="footTop"></div></div><div class="footBottom"><div class="footLeft"><p style="font-size: 13px;margin-top: 10px;">抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身</p><p style="font-size: 13px;margin-top: 0px;">合理安排时间 享受健康生活</p><p style="font-size: 13px;margin-top: 10px;">《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p></div><div class="footRight"><p>腾讯互动娱乐timi腾讯互动娱乐|服务条款|隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|广告服务及商务合作</p><p style="margin-top: 10px;">COPYRIGHT © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED. 腾讯公司版权所有 网络游戏行业防沉迷自律公约<br>工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号<br>文网游备字[2016]M-CSG 0059 号文网游备字[2016]M-CSG 0059 号|新广出审[2017] 6712号|ISBN 978-7-7979-8408-9</p><p style="margin-top: 10px;">全国文化市场统一举报电话：12318</p></div></div></div></footer>3、CSS部分代码
footer {width: 100%;height: 362px;background: url(../img/footer.img/bg_footer.jpg);color: #666;
}
footer>.w2{margin: 0 auto;width: 1200px;
}footer .f-T {height: 80px;padding-top: 90px;border-bottom: 1px solid #ccc;
}footer .f-T>.footTop {height: 64px;background: url(../img/footer.img/spr.png) no-repeat ;cursor: pointer;
}.footLeft {width: 508px;height: 86px;float: left;
}footer .footRight {margin-top: 10px;float: right;width: 650px;height: 106px;font-size: 12px;
}八、关于源码
有需要源码的朋友，私信
