W.T.的博客

Every day to be a little better

前端-CSS学习笔记16-王者荣耀实战3

发表于 更新于 分类于
本文字数： 7.8k 阅读时长 ≈ 7 分钟
实现王者荣耀首页 https://pvp.qq.com/ 页脚foot，固定定位down-flow部分

1. div.foot

1
2
3
4
5
6
7
8
9
10
11
12
<div class="foot">
  <div class="wrapper_04"> 
    <div class="icons">
      <a href="#" class="tencent_logo"></a>
      <a href="#" class="beauty_logo"></a>
    </div>
    <div class="info">
      <div class="tips">...</div>
      <div class="links">...</div>
    </div>
  </div>
</div>

  • div.foot是和div.wrapper同一级的
  • div.foot内部是div.wrapper_04元素，宽度为1200px，水平居中
  • div.wrapper_04元素由div.icons，div.info组成
    • div.icons元素flex布局，使两个a元素水平排布
    • div.info元素有div.tips，div.links元素，也是水平排布
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.foot {
  height: 362px;
  margin-top: 80px;
  background: url(../img/foot/bg_footer.jpg) no-repeat center 0;
  font: 12px/20px "微软雅黑","宋体";
}
.foot .icons {
  display: flex;
  height: 66px;
  padding-bottom: 10px;
  border-bottom: 2px solid #d4d4d4;
  margin-bottom: 12px;
}
.foot .info {
  display: flex;
  justify-content: space-between;
}

1.1. div.tips

1
2
3
4
5
6
<div class="tips">
  <p>
    <em>抵制不良游戏</em><em>拒绝盗版游戏</em><em>注意自我保护</em><em>谨防受骗上当</em><em>适度游戏益脑</em><em>沉迷游戏伤身</em><em>合理安排时间</em><em>享受健康生活</em>
  </p>
  <p class="intro">《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p>
</div>

  • p元素中的em元素之间不加换行符是为了防止换行符带来的文字展示换行
1
2
3
4
5
6
7
8
9
10
11
.foot .tips {
  width: 508px;
}
.foot .tips em {
  margin-right: 12px;
  color: #6d6d6d;
}
.foot .intro {
  margin-top: 6px;
  color: #666;
}

1.2. div.info

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <div class="links">
    <div class="link-map clearfix">
      <a href="#">腾讯互动娱乐</a>
      <span class="sprit">|</span>
      ...
   </div>
   <div class="copyright">
      <p class="en"></p>
      <a href="#" class="zh"></a>
      <a href="#" class="rule"></a>
    </div>
    <p></p>
   <div class="public clearfix">
      <a href="#"><img src="./img/foot/gswj.png">...</a>
      <span class="sprit">|</span>
      ...
    </div>
    <div class="private clearfix">
      <a href="#"><img src="./img/foot/icplogo.png">... </a>
      <span class="sprit">|</span>
      ...
   </div>
   <p>...</p>
</div>

  • div.link-map，div.public，div.private都要加清浮动，因为内部a，span元素都左浮动
    • a，span元素之间有换行符，正常显示的话，除了span元素自身的左右外边距，a与span还是会有一点的距离，通过浮动可以消除这种现象
    • 内部元素都浮动了，整个div.link-map元素就失去了宽度和高度，所以需要伪元素给div.link-map元素添加一个元素设置clear:both来清除浮动
  • div.public，div.private元素中有img图片，默认与文字基线对齐，改为中间对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.foot .links {
  width: 650px;
  color: #646467;
}
.foot .link-map {
  line-height: 20px;
}
.foot a {
  float: left; 
  color: #646467;
}
.foot .sprit {
  float: left;
  margin: 0 2px;
  color: #494949;
}
.foot .copyright {
  display: flex;
}
.foot .copyright .en {
  font-size: 10px;
  margin-right: 15px;
}
.foot .copyright .zh {
  margin-right: 10px;
}
.foot img {
  width: 15px;
  height: 15px;
  margin-right: 3px;
  vertical-align: middle;
}

2. div.down-flow

1
2
3
4
5
<div class="down-flow">
   <a href="#" class="close">x</a>
   <div class="girl">...</div>
  <ul class="list">...</ul>
 </div>

  • 固定定位在整个视口右下角
  • 设置上内边距为145px，是为了放div.girl元素，145px也是div.girl的高度
1
2
3
4
5
6
7
8
9
.down-flow {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 254px;
  padding-top: 145px;
  background: url(../img/down-flow/bg.png) top left;
  z-index: 10;
}

2.1. div.close

1
<a href="#" class="close">x</a>

  • div.close元素相对于div.down-flow元素绝对定位
  • 功能是为了使整个div.down-flow元素不可见 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.down-flow .close {
  position: absolute;
  right: 45px;
  top: 45px;
  width: 25px;
  height: 25px;
  line-height: 23px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.6);
  font-size: 19px;
  text-align: center;
  color: #fff;
}

2.2. div.girl

1
2
3
4
<div class="girl">
  <p>扫一扫，立刻</p>
  <p class="second">下载游戏~</p>
</div>

  • div.girl元素相对于div.down-flow元素绝对定位
  • 内部文字p相对于div.girl元素绝对定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.down-flow .girl {
  position: absolute;
  left: 24px;
  top: 0;
  width: 165px;
  height: 145px;
  background: url(../img/down-flow/girl.png) no-repeat top center;
}
.down-flow .girl p {
  position: absolute;
  top: 38px;
  left: 13px;
  line-height: 18px;
  font-weight: 700;
  color: #62401b;
}
.down-flow .girl .second {
  top: 58px;
}

2.3. ul.list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul class="list">
 <li class="code">
   <img src="./img/down-flow/wzry_qrcode.jpg" alt="">
 </li>
 <li class="item camp">
   <div class="box">...</div>
 </li>
 <li class="item weibo">
   <div class="box">...</div>
 </li>
 <li class="item wechat">
   <div class="box">...</div>
 </li>
 <li class="item video">
   <div class="box">... </div>
 </li>
 <li class="item survey">
   <a href="#">
     官网体验调研
     <div class="mask"></div>
   </a>
 </li>
</ul>

  • ul.list中li元素的背景图来自于同一张精灵图
  • 第一个li元素，高度不同，内部有img图片，水平居中
  • 最后一个li元素，有文字和另一层遮罩div.mask
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.down-flow .list {
  width: 117px;
  margin: 0 auto;
}
.down-flow .item {
  position: relative;
  height: 38px;
  margin-top: 1px;
  background: url(../img/sprite/down-sprite.png) no-repeat;
}

.down-flow .code {
  height: 132px;
  padding-top: 2px;
  border-radius: 2px;
  background-position: -243px 0;
}
.down-flow .code img {
  display: block;
  width: 107px;
  height: 107px;
  margin: 0 auto;
}
.down-flow .camp {
  background-position: -243px -134px;
}
.down-flow .camp:hover {
  background-position-y: -172px;
}
.down-flow .weibo {
  background-position: -122px -120px;
}
.down-flow .weibo:hover {
  background-position-y: -240px;
}
.down-flow .wechat {
  background-position: -122px -160px;
}
.down-flow .wechat:hover {
  background-position-y: -200px;
}
.down-flow .video {
  background-position: -122px 0;
}
.down-flow .video:hover {
  background-position-y: -42px;
}
.down-flow .survey {
  background-position: -122px -81px;
  overflow: hidden;
}
.down-flow .survey a {
  position: relative;
  display: block;
  line-height: 38px;
  text-align: center;
  color: #eee;
}

2.4. div.mask

  • div.mask元素是300x50的盒子，相对于div.item.survey绝对定位
  • 设置无穷播放从左上角移动到右下角
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.down-flow .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 50px;
  background-color: rgba(255,255,255,0.8);
  transform: rotate(-45deg);
  animation: lightmove 1.6s ease-in infinite ;
  filter: blur(32px);
}
@keyframes lightmove {
  0% {
    left: -150px;
    top: -120px;
  }
  100% {
    left: 150px;
    top: 120px;
  }
}

2.5. div.box

1
2
3
4
<div class="box">
  <img src="./img/down-flow/yd_qrcode.jpg" alt="">
  <p>扫码<span>下载王者营地</span><br>每天<span>领取福利好礼</span></p>
</div>

  • div.mask元素相对于自身的父元素li.item对定位
  • 默认不可见，只有鼠标悬停在li.item上时，对应的div.mask才显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.down-flow .item:hover .box {
  display: block;
}
.down-flow .item .box {
  position: absolute;
  top: -66px;
  left: -116px;
  display: none;
  width: 115px;
  height: 144px;
  padding-top: 7px;
  background: url(../img/sprite/down-sprite.png) no-repeat 0 -416px;
}
.down-flow .box img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 6px;
}
.down-flow .box p {
  width: 108px;
  height: 34px;
  margin: 0 auto;
  line-height: 17px;
  color: #dcdcdc;
  font-size: 12px;
  text-align: center;
  overflow: hidden;
}
.down-flow .box p span {
  color: #cd974b;
}
本文结束  感谢您的阅读