1
2
3
4
5
6
7
8

#top .left{
    position: relative;
}
#top .logo{
    margin: 0 20px;
    position: relative;
    z-index: 4;
}
#top .left span a{
    position: absolute;
    /* 绝对定位本身不占据空间，所以可以覆盖其他框 */
    left: 0;
    top: 0;
    z-index: 3;
    /* 数字大的会遮盖数字小的，所以logo会遮住大图 */

    padding: 0 3px 3px; /* 上边 | 左边右边 | 下边 */
    border-bottom: 1px solid #eee;
    background: #fff;

    display: none;  /* 最初不展示 */
}
#top .left span:hover a{
    display: block;
    /* 块级元素独占一行可以设置宽高 */
}
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

            

                
成长守护平台
                

                    腾讯游戏排行榜
                    
                
            
1
2
3
4
5
6
7

 #top .right{
    position: relative;
    display: flex;
 }
 #top .right h3{
    color: #464646;
    font-size: 14px;
    line-height: 40px;
    /* 行高和父级top高度相同 */
    /* 如果行高的值与容器的高度相等，那么文字垂直居中*/
    font-weight: normal;/* 取消加粗 */

    position: relative;/* icon需要绝对定位，所以父级相对定位 */
    
 }
 #top .right h3 a{
    color: #464646;  
    /* 颜色正常显示黑色 */
 }
 #top .right h3 a:hover{
    color: #ff4e00;
    /* 鼠标浮在上面的时候显示红色 */
 }
#top h3.text1{
     margin-right: 20px;/*外边距设置两短语之间的距离 */

    /* 成长守护平台占据了h3标签的宽度，如果插入icon需要空间内边距拓展 */
    padding-left: 30px;
}
 #top h3.text1::after{ /*after和before都可以，伪元素设置图标*/
    content: '';
    /* 行内元素需要固定内容才可以设置宽高 */
    width: 30px;
    height: 30px;
    background: url(../imgs/title_sprite.png) -30px 0;/* 这两个数字是x轴y轴距离*/
    /* 此时雪碧图无显示，因为content行内元素，宽高是撑不起的，需要固定定位 */
    position: absolute;
    left: 0;
    top: 5px;
    
}
#top h3.text2{
    padding-right: 30px;/*内边距拓展右边空间放置雪碧图 */

   /* 成长守护平台占据了h3标签的宽度，如果插入icon需要空间内边距拓展 */
   cursor: pointer; /*鼠标悬停变成手*/
}
#top h3.text2::after{ /*after和before都可以，伪元素设置图标*/
   content: '';
   /* 行内元素需要固定内容才可以设置宽高 */
   width: 30px;
   height: 30px;
   background: url(../imgs/title_sprite.png);
   /* 此时雪碧图无显示，因为content行内元素，宽高是撑不起的，需要固定定位 */
   position: absolute;
   right: 3px;
   top: 5px;

    opacity: .1;/*设置透明度 */
    transform: rotate(90deg);/*箭头旋转向下*/
   
}
#top .right iframe{
    display: none;
    /* 原始状态不显示 */
    width: 708px;
    height: 582px;
    /* 设置足够宽高则滚动条消失，但是占据文档流空间，挤了其他的元素 */

    position: absolute;
    /* 绝对定位不占据文档流了 */
    right: 0;
    top: 40px;
 }

 /* 鼠标经过显示 */
#top h3.text2:hover iframe{
   display: block;
}
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

#top{
     height: 40px; /* 白色部分通栏高度 */
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
}
1
2
3
4
5

#top .container{
    width: 980px;
    margin: 0  auto;/*内容水平居中 */

    display: flex;/* 弹性盒模型 */
    justify-content: space-between; /* 两端对齐 */
}

1
2
3
4
5
6
7
8

        

            

                
                
和平精英全球玩家的冒险竞技世界
            
            

                
版本专区
                
游戏资料
                
赛事专区
                
安全中心
                
自助工具
                
社区论坛
                
下载游戏
                

                    
                        
                    
                
            
            

                
                
特种兵，请登录
            
        
    
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

/* nav1是导航条 */
#nav{
    height: 134px;
    background: url(../imgs/bg-nav.png) center no-repeat;    
}
#nav .nav1{
    /* login部分绝对定位脱离文档流父级使用相对定位 */
    position: relative;
    /* 固定宽度 */
    width: 1200px;
    /* 居中 */
    margin: 0 auto;
    /* 内容一行展示使用弹性盒模型 */
    display: flex;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 

                
                
和平精英全球玩家的冒险竞技世界
            

1
2
3
4
5

#nav .nav1 .title{
   /* 图片文字一行展示使用弹性盒模型 */
   display: flex;
   /* 距离右侧边距40px */
   margin-right: 40px;
}
#nav .nav1 .title a{
   margin: 6px 20px 0 0;
}
/* 减少嵌套层数小幅度优化性能 */
#nav .nav1 h1{
font-size: 24px;
color: #ffb400;
margin-top: 28px;
/* 新版本图片使用伪类定位,父级需要相对定位 */
position: relative;
}
#nav .nav1 h1 span{
   font-size: 14px;
   color: #fff;
   /* span行内元素,变成块级元素让它独占一行 */
   display: block;
   /* 取消加粗 */
   font-weight: normal;
   margin-top: 2px;
}
/* 通过伪类实现新版本图标 */
#nav .nav1 h1::after{
   content: '';
   width: 69px;
   height: 19px;
   /* 绝对定位脱离文档流 */
   position: absolute;
}


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

(html已经在上面展示这里不再重复)
#nav .nav1 ul{
   display: flex;
}
#nav .nav1 li a{
   /* 每个目录不是单纯文字他的区域是一块,其中包括文字,可以通过浏览器控制台查看 */
   display: block;
   width: 102px;
   /* 如果行高的值与容器的高度相等，那么文字垂直居中。 */
   height: 102px;
   line-height: 102px;

   font-size: 16px;
   color: #fff;
   /* 文字水平居中 */
   text-align: center;
}
#nav .nav1 li a:hover{
   color:#ffb400;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#nav .nav1 .login{
   width: 126px;
   height: 100px;
   /* nav1相对定位login的定位依托于nav1,
   同时绝对定位脱离文档流不占据空间title小字就不换行了 */
   position: absolute;
   top:0;
   right: -120px;

   /* 文字和icon弹性盒 */
   display: flex;
   /* 子元素纵向排布 */
   flex-direction: column;
   /* 水平垂直居中 */
   justify-content: center;
   align-items: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

       

            

                

                    

                        
最新版本
                        
最新赛季
                        
版本中心
                        
体验服
                        
绿洲启元
                    
                
                

                    

                        
新闻资讯
                        
攻略中心
                        
视频中心
                        
武器库
                        
大神灵敏度
                        
角色动画
                    
                
                

                    

                        
赛事中心
                        
全民赛场
                        
全国大赛
                        
巅峰赛
                        
授权赛
                        
高校赛事联盟
                    
                
                

                    

                        
安全反外挂站
                        
视频巡查
                        
成长守护平台
                        
腾讯游戏防沉迷
                    
                
                

                    

                        
CDK兑换
                        
客服专区
                        
举报查询
                        
作者入驻
                    
                
                

                    

                        

                            官方公众号
                            
                        
                        

                            微信用户社区
                            
                        
                        

                            QQ用户社区
                            
                        
                        

                            官方微博
                            
                        
                    
                
            
        
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
59
60
61
62
63
64
65
66
67
68
69

#nav .nav2{
   /* 不设置宽度脱离文档流之后内容撑不开宽度就没有黑色背景 */
   width: 100%;
   height: 400px;
   background: rgba(0, 0, 0, .5);
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;

    /* 设置悬浮菜单初始不显示 */
   height: 0;
   overflow: hidden;
   /* 悬浮菜单平滑出现 */
   transition: height .3s ease;
}
/* 选中悬浮菜单的所有列 */
/* 选择第一层ul的子元素 */
#nav .nav2 > ul{
   width: 1100px;
   margin: 115px auto 0;
   position: relative;
   left: 389px;

   display: flex;
}
#nav .nav2 li li{
   width: 106px;
   height: 40px;
   line-height: 40px;
   text-align: center;
}
#nav .nav2 a{
   color: #fff;
}
#nav .nav2 a:hover{
   color: #ffb400;
}

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

/* 红色圆形icon使用伪类 */
#nav .nav2 .new::before, .hot::before{
   content: 'N';
   width: 18px;
   height: 18px;
   text-align: center;
   line-height: 18px;
   font-size: 12px;
   /* 字体白色 */
   color: #fff;
   /* 背景红 */
   background: #f31419;
   /* 图标变圆 */
   border-radius: 50%;

   position: absolute;
   left: -1px;
   top: 12px;
}
/* 再来一个H覆盖覆盖前面的N */
#nav .nav2 .hot::before{
   content: 'H';
   left: -1px;
   top: 11px;
}
/* 样式写到这里所有的红色标签全部重叠在第一个身上了 */
#nav .nav2 .new, .hot{
   position: relative;
}
/* 由于菜单字数不同导致位置与文字的关系不太和谐 ,单独调整*/
/* 第二列第四个,第五个 */
#nav .nav2 ul > li:nth-child(2) li:nth-child(4)::before{
   left: 8px;
}
#nav .nav2 ul > li:nth-child(2) li:nth-child(5)::before{
   left: -8px;
}
/* 第四列第一个 */
#nav .nav2 ul > li:nth-child(4) li:first-child::before{
   left: -13px;
}

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

#nav .contact span{
   width: 132px;
   padding: 6px;
   background: #fff;
   /* 图片不是和文字不是重叠,图片在标签左边 */
   position: absolute;
   /* 箭头和文字的位置 */
   left: -158px;
   /* 原始状态不展示二维码 */
   display: none;
}
/* 父级设置相对位置 否则所有的二维码重叠在第一个的位置*/
#nav .contact li{
   position: relative;
}
#nav .contact img{
   /* 让图片和父级一样大 */
   width: 100%;
}
/* 伪元素制作箭头 */
#nav .contact span::after{
   content: '';
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 20px solid #fff;
   /*此时箭头是一个梯形*/
   position: absolute;
   right: -19px;
}
/* 调整图片位置和三角形指向 */
#nav .contact li:nth-child(1) span{
   top: -15px;
}
#nav .contact li:nth-child(1) span::after{
   top: 26px;
}
#nav .contact li:nth-child(2) span{
   top: -40px;
}
#nav .contact li:nth-child(2) span::after{
   top: 50px;
}
#nav .contact li:nth-child(3) span{
   top: -48px;
}
#nav .contact li:nth-child(3) span::after{
   top: 58px;
}
#nav .contact li:nth-child(4) span{
   top: -45px;
}
#nav .contact li:nth-child(4) span::after{
   top: 55px;
}

#nav .contact li:hover span{
   display: block;
}
/* 整个nav2初始状态不显示,不是dispaly:none;改变高度
设置nav2的高度为0,overflow:hidden */
/* 悬浮菜单出现设置为nav的hover */
#nav:hover .nav2{
   height: 400px;

}
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
59
60
61
62
63
64
65
66
67

        
        

            
登录
            

                QQ登录
                微信登录
            
            
        
    
1
2
3
4
5
6
7
8
9
10
11

.dialog{
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    
    /* 固定定位 */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;

    /* display: none; */
}
/* 下面是一个类,中间没有空格 */
.dialog.show{
    display: flex;
    /* 水平垂直居中 */
    justify-content: center;
    align-items: center;
}
.dialog .wrap{
    position: relative;
}
.dialog h3{
    font-size: 24px;
    line-height: 42px;
    text-align: center;
    color: #fffefe;
}
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

.dialog .close{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 6px;
    right: 6px;
    background: url(../imgs/dia-login-close.png) no-repeat center;
}

1
2
3
4
5
6
7
8
9

#loginBox .wrap{
   width: 634px;
   height: 327px;
   background: url(../imgs/dia-login-bg.png) no-repeat center;
}
#loginBox .btn{
   display: flex;
   justify-content: center;
   margin-top: 50px;
}
#loginBox .btn a{
   width: 130px;
   height: 164px;
   font-size: 0;
   margin: 0 40px;
}
#loginBox .btn a:nth-child(1){
   background: url(../imgs/dia-login-qq.png) no-repeat center;
}
#loginBox .btn a:nth-child(2){
   background: url(../imgs/dia-login-wx.png) no-repeat center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

                适龄提示
1

#bg_bottom .tip{
   width: 119px;
   height: 154px;
   background: url(../imgs/year-btn.png) no-repeat;

   text-indent: -9999px;
   overflow: hidden;

   position: absolute;
   left: -135px;
   top: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12

                        
扫码下载游戏
                        苹果下载
                        安卓下载
                        
                    
1
2
3
4
5
6

#bg_bottom .top{
   display: flex;
   height: 320px;
}
#bg_bottom .download{
   width: 180px;
   background: url(../imgs/section1_ecod.png) no-repeat center;
   text-align: center;
}
#bg_bottom .download h3{
   font-size: 18px;
   line-height: 36px;
   color: #ffb007;
   /* 取消加粗 */
   font-weight: normal;
}
#bg_bottom .download a{
   /* 块级元素才可以设置宽高 */
   display: block;
   height: 54px;
   margin-bottom: 5px;
/* 以图换字之后a标签的字消失，鼠标经过图片仍然是箭头 */
   text-indent: -9999px;
   /* 防止超出 */
   overflow: hidden;
}
#bg_bottom .download img{
   /* 图片设置宽度大小的当 */
   width: 160px;
}

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

                        

                            

                            

                        
                        
                        

                            
                            
                        
                    
1
2
3
4
5
6
7
8
9
10
11

.carousel{
    /* 按钮指示器的父级相对定位 */
    position: relative;
    /* 图片排成一排才可以轮播所以需要溢出隐藏 */
    overflow: hidden;
}
.carouselInner{
    position: absolute;
    display: flex;/*一行显示 */
    left: 0;
}
.carouselIndicators{
    position: absolute;
    display: flex;
}
.carouselIndicators span{
    cursor: pointer;
    background-color: #fff;
}
.carouselIndicators span:hover,.carouselIndicators span.active{
    background: #feb012;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#bg_bottom .carousel{
   width: 590px;
   position: relative;
}
#bg_bottom .carouselInner{
    /* 一张图片和父级一样大，取父级的百分比 */
   width: 200%;
}
#bg_bottom .carouselIndicators{
   right: 17px;
   bottom: 15px;
}
#bg_bottom .carouselIndicators span{
   width: 20px;
   height: 8px;
   margin-right: 7px;
}
#bg_bottom .carouselIndicators span.active{
   width: 44px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

                    

                        

                            
最新
                            
新闻
                            
公告
                            
活动
                            
赛事
                            

                        
                        

                            
第十四届上海国际大众体育节来了
                        
                            
最新和平营地华晨宇视频剪辑创作活动获奖名单10-11
                     
                            
最新《光速大逃脱》PEL惊英篇！10-11
                        
                            
最新参与视频征集活动，赢万元福利金10-10
                      
                            
最新《和平精英》航天光影大赏限时上线，点亮海岛夜空致敬中国航天！9-30
                       
                            
最新【抽iPhone14 Pro Max】上B站搜“和平精英激励计划”，投稿赢20万9-29
                        
                    
                

• 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

css（index）

首先设置整个新闻板块news背景宽度和白色背景,
定义所有选项两端对齐一行展示（设置成弹性盒会并排显示）
设置选项卡上方选项下边框为白色（这样的话可以设置选中的边框颜色为橙色），如果给active单独加橙色下边框的话，会改变这个选项的尺寸。第一行特殊样式用选择器设置样式不特别设置类名、

#bg_bottom .news{
   width: 430px;
   background: #fff;
}
#bg_bottom .tabs{
   height: 48px;
   line-height: 48px;
   /* 选项最左有距离 */
   padding-left: 15px;
   /* 两端对齐自动计算选项之间的间距 */
   justify-content: space-between;
   /* 一行展示 */
   display: flex;
}
#bg_bottom .tabs li{
   font-size: 16px;
   color: #000;
   text-align: center;
   /* active状态下面有一个边框 */
   /* 给avtive加边框尺寸会发生改变 */
   border-bottom: 3px solid #fff;
   margin: 0 17px;
   cursor: pointer;

}
#bg_bottom .tabs li.active{
   color: #ffb007;
   border-color: #ffb007;
   font-weight: bold;
}
#bg_bottom .tabs li:hover{
   /* 设置选项卡选项鼠标悬浮在上显示为橙色 */
   color: #ffb007;
}
/* 选项卡 */
#bg_bottom .tabContent li{
   font-size: 14px;
   color: #000;
   line-height: 35px;
   padding-left: 35px;
   /* 设置宽度，需要变成非行内元素，变成inlineblock会有问题所以使用弹性盒 */
   display: flex;
}
#bg_bottom .tabContent li span{
   color: #656565;
   margin-right: 8px;
}
#bg_bottom .tabContent li a{
   width: 290px;
   color: #000;

   white-space: nowrap;/* 段落中的文本不进行换行 */
   overflow: hidden;
   /* 内容会被修剪，并且其余内容是不可见的。 */
   text-overflow:ellipsis ;
   /* text-overflow 属性规定当文本溢出包含元素时发生的事情。
   ellipsis	显示省略符号来代表被修剪的文本。 */
}
/*新闻热点鼠标悬浮在上方的时候显示橙色  */
#bg_bottom .tabContent li a:hover{
   color: #ffa100;
}
#bg_bottom .tabContent li i{
   color: #24262d;
   font-style: normal;
   /* 原来是倾斜的，去倾斜 */
}

#bg_bottom .tabContent li:first-child{
   /* 最新两个字的样式 */
	background: #f7f7f7;
   /* 撑开高度 */
	line-height: 60px;
	margin-bottom: 10px;
	padding: 0 35px;
	font-weight: bold;
}
#bg_bottom .tabContent li:first-child a{
   /* 第一行特殊格式 */
	/* width: 100%; */
	color: #ffa100;
	font-size: 16px;
}
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

css（public样式）

#bg_bottom .tabContent li{
   font-size: 14px;
   color: #000;
   line-height: 35px;
   padding-left: 35px;
   /* 设置宽度，需要变成非行内元素，变成inlineblock会有问题所以使用弹性盒 */
   display: flex;
}
#bg_bottom .tabContent li span{
   color: #656565;
   margin-right: 8px;
}
#bg_bottom .tabContent li a{
   width: 290px;
   color: #000;

   white-space: nowrap;/* 段落中的文本不进行换行 */
   overflow: hidden;
   /* 内容会被修剪，并且其余内容是不可见的。 */
   text-overflow:ellipsis ;
   /* text-overflow 属性规定当文本溢出包含元素时发生的事情。
   ellipsis	显示省略符号来代表被修剪的文本。 */
}
/*新闻热点鼠标悬浮在上方的时候显示橙色  */
#bg_bottom .tabContent li a:hover{
   color: #ffa100;
}
#bg_bottom .tabContent li i{
   color: #24262d;
   font-style: normal;
   /* 原来是倾斜的，去倾斜 */
}

#bg_bottom .tabContent li:first-child{
   /* 最新两个字的样式 */
	background: #f7f7f7;
   /* 撑开高度 */
	line-height: 60px;
	margin-bottom: 10px;
	padding: 0 35px;
	font-weight: bold;
}
#bg_bottom .tabContent li:first-child a{
   /* 第一行特殊格式 */
	/* width: 100%; */
	color: #ffa100;
	font-size: 16px;
}

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

广告

轮播图的样式中 下面的圆点或者方块（span设置长方形或者圆形），形状不同，但是颜色相同

			

				
				
				
				
			

1
2
3
4
5
6
7

#bg_bottom .bottom{
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
}
1
2
3
4
5

适龄弹窗

适龄弹窗内部结构，背景图片，标题(h3)，文字内容(scrollcContent>p)，标题和文字内容都在scrollcContent里面。关闭按钮(button)，滚动条(span)，所有内容放在scroll里面。
静态页面没有js无法实现打开关闭，所以要给弹窗整体设置初始状态不显示，如果给wrap设置初始状态不显示，那么灰色遮罩层仍会遮挡视野

		

			
适龄提示
			

				

					
提示说明：
					
1、本游戏是一款玩法复杂的射击类游戏，适用于年满16周岁及以上的用户，建议未成年人在家长监护下使用游戏产品。
					
2、本游戏背景为特种兵训练，画面风格写实、人物和场景丰富多样，有丰富的音效来烘托游戏氛围。游戏主要玩法为需要多人进行的团队竞技，玩法基于较复杂的思维判断和操作，对玩家的逻辑思维和团队协作能力有一定要求，鼓励玩家在训练中不断提升和挑战自我。游戏中有基于语音和文字的陌生人社交系统，但社交系统的管理遵循相关法律法规。
					
					
3、本游戏中有用户实名认证系统，认证为未成年人的用户将接受以下管理：
						游戏中部分玩法和道具需要付费。未满8周岁的用户不能付费；8周岁以上未满16周岁的未成年人用户，单次充值金额不得超过50元人民币，每月充值金额累计不得超过200元人民币；16周岁以上的未成年人用户，单次充值金额不得超过100元人民币，每月充值金额累计不得超过400元人民币。

						未成年人用户每日22点到次日8点不得使用，法定节假日每天不得使用超过3小时，其他时间每天不得使用超过1.5小时。
					
4、游戏在3D场景中的竞技和操作训练有助于锻炼玩家的手眼协调能力、空间感知能力和快速反应能力，基于团队的玩法可以提升玩家的沟通能力、团队协作能力和大局观，鼓励玩家互帮互助，维持良好的社群关系。
					
				
				

			
			
		
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

通用样式和登录弹窗一样

#yearBox{
/* 初始不显示 */
   display: none;
}
#yearBox .wrap{
	width: 674px;
	height: 613px;
	background: url(../images/year-hint.png) no-repeat;
}
#yearBox .scroll{
	width: 610px;
	height: 470px;
	margin: 50px auto 0;
}
#yearBox .scrollContent{
	width: 584px;
	font-size: 20px;
	color: #535353;
	line-height: 33px;
}
#yearBox .scrollContent p{
	margin-bottom: 40px;
}
#yearBox .scrollContent h4{
	font-size: 22px;
	color: #dc7c00;
	font-weight: normal;
}       
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

通用样式

/* 滚动条 */
.scroll{
	position: relative;
	overflow: hidden;
}
.scrollContent{
	position: absolute;
	left: 0;
	top: 0;
}
.scrollBar{
	width: 6px;
	height: 100%;
	background: rgba(200,200,200,.7);

	position: absolute;
	top: 0;
	right: 0;

	border-radius: 8px;
}
.scrollBar span{
    /* 行内元素不能设置宽高，所以将span设置成block */
	display: block;
	width: 100%;
	height: 60px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .5);

	position: absolute;
	top: 0;
}
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

section2

精英爆料头部通用板块

精英爆料，视频中心等部分都有共同的样式
首页两张图片下面的所有内容都是居中显示，每行都是两块内容，两块所占宽度一样，每个板块距离上面的距离相同
精英爆料分为左右两部分，

• 左部 选项卡
  精英爆料是单独的标签，右面是选项卡 ，选项卡的下边框中间的橙色的点是插入伪元素做的
  选项卡的右边是more，也是首页全篇唯一一个和其他more不同的
  为了可以在写页面的时候方便观看可以先在样式上面给body{padding-bottom:1000px}之后再删除。
  伪元素定位精英爆料前面的小图标，此处不做定位直接弹性盒
  新模式玩法的内容是三张图片和轮播图指示器

   

        

            
            

                
精英爆料
                

                    
新玩法/模式
					
新武器/皮肤
					
新地图
					
新载具
					
前往资料站>
				
            
1
2
3
4
5
6
7
8
9
10
11
12
13

public.css

.box{
	width: 1200px;
	margin: 40px auto 0;
    /* 弹性盒，left和right内容要在一排展示 */
	display: flex;
	justify-content: space-between;
}
/* 头部通用样式 */
/* publicHead */
.publicHead{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.publicHead h3{
	height: 30px;
	font-size: 24px;
	color: #24262d;
    /* 伪元素定位精英爆料前面的小图标，此处不做定位直接弹性盒   */
	display: flex;
	align-items: center;
}
.publicHead h3::before{
    /* 父级是弹性盒就不需要定位就可以设置宽高了 */
	content: '';
	width: 26px;
	height: 26px;
	margin-right: 10px;
	background: url(../imgs/sprites.png);
}
.publicHead ul{
	height: 30px;
	display: flex;
	border-bottom: 1px solid #dedede;
}
.publicHead li{
	font-size: 16px;
	color: #000;
    /* 上内边距0，左右内边距30，下内边距3 */
	padding: 0 30px 3px;
    /* 选项卡选项的下边框特殊样式需要定位，所以父级相对定位 */
	position: relative;
	cursor: pointer;
}
.publicHead li:last-child{
	padding-right: 0;
}
.publicHead li.more{
    /* 前往资料站放不开换行了，不需要弹性盒 */
	display: block;
}
.publicHead li.more a{
    /* 去掉背景 */
	background: none;
	color: #000;
    /*加上黑色下划线 */
	border-bottom: 1px solid #000;
}
/* 除了最后一个选项卡其他的都设置鼠标悬浮样式 */
.publicHead li.active, .publicHead li:not(:last-child):hover{
	color: #efa611;
	font-weight: bold;
	border-bottom: 2px solid #efa611;
}
/*  */
/* li标签除了第一个与最后一个其余的都有hover状态 */
/* 第一个鼠标悬浮会变细，所以 :not(.active) */
.publicHead li:not(:last-child):not(.active):hover{
	font-weight: normal;
}
.publicHead li.active::after, .publicHead li:not(:last-child):hover::after{
	content: '';
	width: 10px;
	height: 6px;
    /* 下边框中间的点是伪元素插入 */
	background: url(../imgs/sprites.png) -195px -30px;
    /* 设置定位否则无显示 */
	 position: absolute;
	top: 26px;
    /* 左右居中位置 */
	left: 50%;
	margin-left: -5px; 
}


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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

index.css
精英爆料占据宽度790px

#section2 .left{
	width: 790px;
}
1
2
3

新模式/玩法

轮播图部分的第一个选项卡的内容（新玩法模式内容）有轮播图公用样式overflow：hidden，但是其他的没有所以要给所有tabContent加上溢出隐藏，

            

                

                    
                    
                    
                
                

                    
                    
                    
                
            
1
2
3
4
5
6
7
8
9
10
11
12
13

#section2 .left .tabContent{
   height: 420px; /* 轮播图公用样式有overflow：hidden */
   /* 轮播选项卡有overflow：hidden，但是其他选项卡也需要 */
   overflow: hidden;
   /* 子集元素绝对定位 */
   position: relative;
}
#section2 .mode .carouselIndicators{
   /* 居中显示 */
   width: 100%;
   justify-content: center;
   /* 变成圆形 */
   border-radius: 50%;
  
   margin: 0 5px;
/* 解决轮播图指示器的小圆点出现在图片上方 */
   top: 400px;
   position: absolute;
}
#section2 .mode .carouselIndicators span{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin: 0 5px;
}
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

新武器/皮肤（难点）

布局剖析：
（静态页面先隐藏新模式玩法的内容顺便切换选项卡的active项646行）
要在index.css设置weapons部分的背景图

• 1.枪支文本介绍
  文本分为三部分，标题（枪名），枪的类型和口径是p标签的两个span标签
  介绍文字是一个p标签

• 2.右侧枪支配件
  有三个配件，使用三个li标签，每个配件的内容包括图片img和文字p
  因为三个配件的排布不在一行，使用弹性盒的话可能比较复杂，所以使用inline-block

• 3.下面枪支切换
  变相轮播图
  1>左边按钮 设置btn类名管理公共样式
  2>中间div>ul不直接ul因为父级活动区域比较长，每个枪支都放在li表标签，span>p放图，p名称
  3>右边箭头

• 4.枪支单独放
  一张大图

            

                

                    
Kar98K
                    

                        狙击枪
                        口径：7.62mm
                    
                    
性能优异的单发栓动狙击枪。单发伤害高，能一击摧毁二级头，缺点是仅适合远距离使用，十分依赖高倍镜，对枪法依赖很高，尽量命中头部才能发挥威力。
                
                

                    

                        
                        
八倍镜
                    
                    

                        
                        
消音器
                    
                    

                         
                         
子弹袋
                    
                
                

                    
                
                

                    

                    

                        

                            

                                
                                
Kar98K
                            
                            

                                
                                
SCAR-L
                            
                            

                                
                                
Mini14
                            
                            

                                
                                
M416
                            
                            

                                
                                
AKM
                            
                            

                                
                                
Groza
                            
                            

                                
                                
S1897
                            
                            

                                
                                
 UMP45
                            
                        
                    
                    

                
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
59
60
61
62
63
64
65
66

index.css

/* 隐藏上一个选项卡内容 */
#section2 .mode{
   display: none;
}
/* 样式正文 */
#section2 .weapons{
   background: url(../imgs/sec2_box.png) no-repeat center;
}
#section2 .weapons .text{
   width: 610px;  /*文本宽度610px */
   display: flex;
   justify-content: space-between;
   color: #fff;
   margin: 19px 0 0 16px;
}
#section2 .weapons .text h4{
   width: 108px;
   line-height: 36px;
   font-size: 20px;
   text-align: center;
}
#section2 .weapons .name span{
   display: block; /* 块级元素实现换行 */

}
#section2 .weapons .intro{
	width: 350px;
	font-size: 14px;
}
#section2  .accessory{
   width: 146px; /*太小的话会排成一列 */
   position: absolute;
   right: 10px;
   top: 15px;
   text-align: right;
}
#section2 .accessory li{
   display: inline-block;
   font-size: 14px;
   margin: 0 5px 5px;
}
#section2  .accessory img{
   width: 54px;
   height: 54px;
   background: rgba(0, 0, 0, .2);
   border: 1px solid rgba(255, 255, 255, .3);
   padding: 2px;
}
#section2 .accessory p{
   color: #fff;
   margin-top: 5px;
   text-align: center;
}
#section2 .weapon{
   width: 475px;
   height: auto;
   position: absolute;
   top: 110px;
   left: 110px;
}
#section2 .armMenu{
   width: 516px;
   height: 80px;

   position: absolute;
   left: 0;
   right: 0;
   bottom: 15px;
   margin: 0 auto;
}
#section2 .menu{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
   /* 滑动菜单的子元素是绝对定位，父级相对定位 */
}
#section2 .menu ul{
   position: absolute;
   display: flex;
   /* 滑动菜单部分设置相对定位和弹性盒 */
}
#section2 .menu li{
   padding: 0 6px;
   /* 滑动选项之间的间距6px */
}
#section2 .menu span{
   width: 72px;
   height: 52px;

   display: flex; /*内容把高度撑开 */
   /* 水平垂直居中 */
   justify-content: center;
   align-items: center;

   border: 1px solid #666562;
}
#section2 .menu span img{
   width: 90%;
}
#section2 .menu p{
   font-size: 15px;
   text-align: center;
   color: #eaebeb;
   margin-top: 5px;
}
/* 设置首个显示框及其字体橙色样式 */
#section2 .menu .active span{
   border-color: #fec146;
}
#section2  .menu .active p{
   color: #fec146;
}
/* 设置箭头公共样式 */
#section2  .armMenu .btn{
   width: 25px;
   height: 40px;
   background:url(../imgs/sprites.png)  no-repeat;
   
   position: absolute;
   top: 5px;
   cursor: pointer;
}
/* 两个箭头各自的样式 */
#section2 .armMenu .pre{
   left: -40px;
   background-position: -170px -170px;
}
#section2 .armMenu .next{
	right: -40px;
	background-position: -140px -170px;
}
#section2 .armMenu .disable{
   opacity: .35;    /* 设置透明度使其看上去不能左移动  */
   cursor: default;  /* 取消小手 */
}
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

新地图

大图放在div里面，小图和文字放在ul标签里面
注意
地图的首页选项图需要先设置透明边框，如果后期设置active边框的话会改变尺寸影响布局，提前设置透明边框，active的图片改变边框颜色即可

                

                    
                    
                    
                
                

                    

                        
                        
火箭发射塔
                    
                    

                        
                        
反重力装置
                    
                    

                        
                        
航天信息站
                    
                
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

index.css

/* 隐藏上一个选项卡内容 */
#section2 .weapons{
   display: none;
}

/* #section2  .newMap div img{
   display: none;
} */
#section2.newMap  div img.active{
   display: block;
}
#section2 .newMap ul{
   width: 100%;
   position: absolute;
   bottom: 10px;
   display: flex;
   justify-content: center;
}
#section2 .newMap li{
   text-align: center;
   margin: 0 8px;
   cursor: pointer;
}
#section2 .newMap li img{
   width: 98px;
   height: 53px;
   /* 设置透明边框 */
   border: 1px solid transparent;
}
#section2 .newMap li p{
   line-height: 30px;
   font-size: 16px;
   color: #fff;
}
#section2 .newMap li.active img{
   border-color: #efa611;
}
#section2 .newMap li.active p{
   color: #efa611;
}
#section2 .vehicle ul{
   display: flex;
   position: absolute;
   left: 0;
}

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

新载具

此处直接粘贴代码不再复述，内容布局和新模式玩法几近相同。
一点碎碎念：
精英爆料每一选项显示与隐藏都要手动完成，设置选项卡类active，在css公共样式设置active，最后修改html中选项卡active完成选项卡选项的切换。
但是我每次写下一个选项卡都是手动隐藏上一个选项卡
找到上一个选项卡类设置display：none；
解决办法是设置所有tabcontent，display：none，然后设置active块级元素display：block

#section2 .vehicle ul{
   display: flex;
   position: absolute;
   left: 0;
}
#section2 .vehicle .carouselIndicators {
    /* 居中显示 */
    width: 100%;
    justify-content: center;
    /* 变成圆形 */
    border-radius: 50%;
   
    margin: 0 5px;
 /* 解决轮播图指示器的小圆点出现在图片上方 */
    top: 400px;
    position: absolute;
} 
#section2 .vehicle .carouselIndicators span{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	margin: 0 5px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

活动中心

布局分析
头部标题活动中心，下面有两个选项卡，两个选项卡可以放在一对ul里面
下面内容逐层分析，年月，周，天形成的日历，左右一对箭头，单独div
下面滚动区域的内容称为奖励内容
奖励内容由三部分组成，幸运传递，活动时间和活动奖励，活动奖励下面是一张图片图片下面有文字。
日期数字左右的箭头使用定位
过程记录
如果星期使用justify-content:space-evenly
下面的时间的数字使用margin-left加上left，会微瑕

html部分

            

                
活动中心
                

                    
活动日历
                    
福利资讯
                
            
            

                
2022年 10月
                

					
一
					
二
					
三
					
四
					
五
					
六
					
日
                
                

                    

					

						
24
						
25
						
26
						
27
						
28
						
29
						
30
                        

					
                    

                        

                            

                                
幸运传递
                                
活动时间：10月14日-10月23日
                                
活动奖励：
                                

                                    

                                        
                                            
                                        
                                        双倍上分
                                    
                                
                            
                        
                    
                
            
        
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

• 活动日历样式分析
  1.使用伪元素设置活动中心左边的图标
  2.使用background-position调整雪碧图相对容器向左平移30px
  3.活动中心下面两个选项卡要另起一行，可以将选项卡和活动中心放在一个div容器里面，设置父容器纵向排布 flex-direction: column;
  4.两个选项卡的文字没有伸展开换行了，使用左右内填充使其有空间伸展开
  5.第一个选项卡文字橙色样式使用 active的class类控制
  6.日历部分最上方的年月设置字号,年月下面设置底边框或者用伪元素
  7.年月以及星期 的内容设置字号也不显示，就算不设置样式也会有一个默认样式显示，这里的原因是因为，所有的tabcontent设置了display：none;
  8.日期的数字和上面的星期有相同的样式，如果星期可以使用justify-content:space-evenly
  下面的时间的数字使用margin-left加上left，会微瑕
  所以单独设置每个week的li的宽高和左右边距
  9.日期数字中使用一个：not（）选中除了26其余所有数字
  10.如果出现意外之外的布局情况可以看一下html布局结构是否出现嵌套问题

活动中心的样式

/* 活动中心 */
#section2 .right{
   width: 370px;
}

#section2 .right h3::before{
   /* 调整背景雪碧图的位置显示正确的小图标 */
   /* 图片相对容器左移30px，上下不动 */
   background-position: -30px 0;
}
#section2 .right .publicHead{
   /* 子元素竖着排列 */
   flex-direction: column;
   margin-bottom: 10px;
}
#section2 .right .publicHead ul{
	width: 170px; 
	margin-top: 15px;/*选项卡部分距离标题部分的距离 */
	justify-content: space-between;
}
#section2 .right .publicHead li{
   padding: 0 4px 3px;
   color: #767676;
}
#section2 .right .publicHead li.active{
   color: #efa611;
}
/* tabcontent公用样式设置了display：none */
#section2 .calendar{
   display: block;
}
#section2  .calendar .date{
   margin-top: 13px;
   font-size: 20px;
   padding-bottom: 2px;
   border-bottom: 1px solid #d9d9d9;
   font-weight: bold;
}
#section2 .calendar .week{
   width: 322px;
   margin: 9px auto 0;
   display: flex;
   /* justify-content: space-evenly; */
   color: #767676;
}
/* 如果这里使用注释的样式，下面的数字使用左边距和left */
/* 会微瑕 */
/* 所以单独设置每个week的li的宽高和左右边距 */
/* 因为数字和星期的li样式有相同点，所以一起写 */
#section2 .calendar .week li,#section2 .calendar .day li{
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: #767676;
   /*星期之间，数字之间的间距 */
   margin-left: 13px;
}
#section2 .calendar .day{
   width: 322px;
   margin: 0 auto;
   position: relative;
   /* 因为左右有箭头父级相对定位 */
}
#section2 .calendar .day ul{
   display: flex; /*给日期设置弹性盒，此时数字一行排列 */
}
#section2 .calendar .day li{
   position: relative;
	cursor: pointer;
}
/* 选中日期的样式 */
#section2 .calendar .day li.active{
   color: #feb012;
   border: 1px solid #feb012;
   border-radius: 50%;
   font-weight: bold;
}
/* 日期左右箭头 */
#section2 .calendar .day .btn{
   width: 9px;
   height: 17px;
   position: absolute;
   top: 7px;
   background: url(../imgs/next.png);
   cursor: pointer;
}
#section2 .calendar .day .pre{
   left: -24px;
   transform: scale(-1);
}
#section2 .calendar .day .next{
   right: -24px;
}
/* 数字下面的橙色点使用伪元素 */
#section2  .calendar .day ul  :not(.active)::after{
   content: '';
   width: 6px;
   height: 6px;
   background: #fcc257;

   position: absolute;
   bottom: -3px;
   left: 50%;
   margin-left: -3px;
   border-radius: 50%;
}
#section2 .scroll{
   height: 277px;
   margin-top: 13px;
}
#section2 .scrollContent{
   width: 357px;
   
}
#section2 .award{
   background: #fff;
   margin-bottom: 15px;
   position: relative;
  
   height: 277px;
}
#section2 .award h4{
   color: #dea42f;
   font-size: 24px;
   /* 取消加粗 */
   font-weight: normal;
   padding: 11px 0 5px 16px;
}
#section2 .award p{
   font-size: 16px;
   padding-left: 36px;
   position: relative;
}
/* 活动时间活动奖励之前的有、橙色点 */
#section2 .award p::before{
   content: '';
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #f77345;

   position: absolute;
   left: 18px;
   top: 50%;
   transform: translateY(-50%);
}
#section2 .award p span{
   color: #f79b80;
}
#section2 .award ul{
   margin-top: 5px;
   padding-left: 37px;
   display: flex;

}
#section2 .award li{
   margin: 0 16px 20px 0; 
}
/* 活动奖励图片 */
#section2 .award li span:nth-child(1){
   display: flex;
   justify-content: center;
   align-items: center;

   width: 58px;
   height: 58px;
   background: #d9d9d9;
   border:1px solid #fcc257;
   
}
#section .award li img{
   width: 80%;
}
/* 活动奖励文字 */
#section2  .award li span:nth-child(2){
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;

   width: 58px;
   font-size: 12px;
}
#section2 .award .zb{
   width: 94px;
   height: 101px;
   position: absolute;
   right: 0;
   top: 0;
   background: url(../imgs/zb-bg.png);
}
#section2 .award .zb span{
   font-size: 25px;
   color: #fff;
   position: absolute;
   top: 9px;
   right: 6px;
   transform:rotate(45deg);
}

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

• 福利资讯样式分析

福利资讯的样式

/* 福利资讯 */

/* 隐藏calendar */
/*.calendar{  这样写的话选择器权重地，样式未生效
   display: none;
}*/
#section2 .calendar{
    display: none;/*权重相同覆盖前者 */
}
/* 或者去上面代码找到calendar去取消display:block;
公有样式tabContent是display:none的 */
#section2 .info{
   background: #fff;
   height: 378px;
   margin-top: 17px;
   padding: 0 17px;
}
#section2 .info h4{
   font-size: 20px;
   color: #dea42f;
   font-weight: normal;
   padding: 17px 0 10px;
   border-bottom: 1px solid #d9d9d9;
}
#section2 .info ul{
   margin: 10px auto 20px;
}
#section2 .info li{
   display: flex;
   justify-content: space-between;
   line-height: 36px;
   margin-bottom: 5px;
   border-bottom: 1px solid #f5f5f5;
}
#section2 .info li a{
   width: 257px;
   color: #3a3a3a;

   white-space: nowrap;/*合并空格文字不换行 */
   overflow: hidden;/*溢出隐藏 */
   text-overflow: ellipsis;/*省略号显示被截断的文字*/
}
/* 每行活动日期的特殊样式 */
#section2 .info li span{
   color: #989898;
}
/* 翻页按钮 */
#section2 .info .btn{
   text-align: center;
}
#section2 .info  .btn button{
   width: 76px;
   height: 28px;
   font-size: 14px;
   color: #fff;
   background: #feb012;
   margin: 0 17px;
}
/* 此处的button无实际功能，需要添加js完成功能 */
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
59

视频中心

官方视频

视频中心的宽度和精英爆料的宽度是一样的
所以先设置这部分整体的宽高

    

        

            
视频中心
            

                
官方视频
                
人气主播
                
进阶教学
                
赛事专栏
                

            
        
        

            

                
                
                超体对抗，激情开战
            
            

                
                《和平精英》太空之旅版本，来一场宇宙级的冒险！
            
            

                
                【超级空投中场秀】华晨宇：《飞行指挥家》
            
            

                
                【超级空投中场秀】华晨宇：《名场面》
            
            

                
                【超级空投中场秀】宋茜：《屋顶着火》
            
            

                
                【超级空投中场秀】希林娜依·高：《精英不凡》
            
            
        
    
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

css

/* 视频中心 */
#section3 .movie{
   width: 790px;
   height: 432px;
}
#section3 .movie .publicHead h3::before{
   background-position: -60px 0;
}
#section3 .movie .publicHead li{
   padding: 0 40px 3px;
}
#section3 .movie .publicHead li.more{
   padding: 0 0 3px 30px;
}
#section3 .movie .tabContent.active{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap; /* 多行显示 */
}
#section3 .movie .tabContent li{
   width: 249px;
   margin-bottom: 7px;
}
#section3 .movie .tabContent li a{
   display: block;
   overflow: hidden;
}
/* 所有图片设置高度和相对定位 */
#section3 .movie .tabContent li a:nth-child(1){
   height: 135px;
   /* 视频中心左边图标伪元素父级相对定位 */
   position: relative;
}
#section3 .movie .tabContent li img{
   width: 100%;
}
#section3 .movie  .tabContent li a:nth-child(2), 
#section4 ul.tabContent li a:nth-child(2){
   font-size: 16px;
   margin: 4px 10px;
   color: #3b3b3b;

   	/* 多行省略号 */
	display: -webkit-box;	/* 设置成webkit的弹性盒模型 */
	-webkit-line-clamp: 2;	/* 设置文本显示的行数 */
	-webkit-box-orient: vertical;	/* 设置盒子里子元素的排列方式，竖着排 */
}
/* 伪元素,视频中心左边的图标 */
#section3 .movie .tabContent li a:nth-child(1)::after{
   content: '';
   width: 58px;
   height: 58px;
   /* 位置/尺寸 */
   background: url(../imgs/cont-spr.png) -145px -5px / 208px  126px;

   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -29px;
   margin-left: -29px;

   transform: scale(5);    /*放大五倍 */
   opacity: 0; /* 完全透明 */
   transition:  .3s;/* 过渡时间0.3s */
}
/* 鼠标指向当前视频时，背景白色高亮 */
#section3 .movie .tabContent li:hover{
   background: #fff;
}
/* 鼠标指向当前视频，文字橙色 */
#section3 .movie .tabContent li:hover a:nth-child(2){
   color: #efa611;
}

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

热门排行

内容区域前三条的最左边图标有不同的样式，使用伪元素制作，伪元素的背景是一张精灵图，前三个的颜色不同于其他的颜色，通过修改精灵图的背景位置就可以了

• 知识点
  计数器

counter-increment: order;	/* 递增变量 */
content: counter(order);	/* 取计数器的值 */
1
2

html布局

    
    

        

            
热门排行
            

                
日
                
周
                
月
            
        
        

            

                
                

                    G港上城区运营思路和打法建议
                    
和平精英2874
                
            
            
几种常见的主副武器组合2010
            
滑稽吃鸡186：四排遇情侣，竟被强行塞狗粮，我太难了！1150
            
SS20赛季即将来临，提前了解你会重置成什么段位！891
            
四排里你是团宠吗？让你看看什么叫真正的团宠！808
            
SS20赛季手册，两个套装外观！710
        
        查看更多
    
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

css样式index.css

/* 热门排行 */
#section3 .rank header{
   display: flex;
   justify-content: space-between;/* 两端对齐 */
   margin-bottom: 20px;
}
#setion3 .rank h3{
   height: 30px;
   font-size: 24px;
   color: #24262d;
   /* align-items：设置了 flex 容器的对齐方式。 */
   display: flex;
   align-items: center;
}
#section3 .rank h3::before{
   content:'';
   width: 26px;
   height: 26px;
   margin-right: 10px;
   background: url(../imgs/sprites.png) no-repeat -90px 0;
}
/* 日、周、月的格式 */
#section3 .rank ul{
   display: flex;
   font-size: 20px;
   color: #000;
}
#section3 .rank ul li{
   margin: 0 5px;
   cursor: pointer;
}
/* 鼠标悬浮状态和当前显示状态的样式 */
#section3 .rank ul li:hover,#section3 .rank ul li.active{
   color: #fcc257;
   font-weight: bold;
}
/* 内容 */
#section3 .rank img{
   width: 90px;
   height: 55px;
}
#section3 .rank ol{
   /* 创建计数器，变量名为order */
   counter-reset: order;
}
#section3 .rank ol li{
   height: 53px;
   display: flex;
   justify-content: space-between;/*？ 让后面的观看数字右端对齐 */
   align-items: center;/* 弹性容器垂直居中 */
   border-bottom: 1px solid #d2d2d2;
}   
#section3 .rank ol li:last-child{
   /* 最后一行没有下划线 */
   border: none;
}
/* 每行前排使用伪元素+计数器+精灵图制作 */
#section3 .rank  ol li::before{
   counter-increment: order;	/* 递增变量 */
	content: counter(order);	/* 取计数器的值 */

   width: 18px;
   height: 18px;
   margin-right: 5px;
   background: url(../imgs/sprites.png) no-repeat -120px -30px;

   text-align: center;
   line-height: 18px;
   font-size: 14px;
   color: #fff;
}
/* 前三个伪元素的样式 */
#section3 .rank ol li.first::before{
   background-position: -45px -30px;
}
#section3 .rank ol li:nth-child(2)::before{
   background-position: -70px -30px;
}
#section3  .rank ol li:nth-child(3)::before{
   background-position: -95px -30px;
}
#section3 .rank ol li a{
   color: #000;
}
#section3 .rank ol li a:hover{
   color: #dea42f;
}
#section3 .rank ol li.first{
   padding-bottom: 10px;
}
/* 排行第一条的文字格式 */
#section3 .rank ol li.first div{
   width: 240px;
   height: 56px;
   margin-left: 14px;
/* 弹性盒+纵向排列+两端对齐 */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
#section3 .rank ol li.first div a{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
#section3 .rank ol li.first div p{
   display: flex;
   justify-content: space-between;
   text-overflow: ellipsis;
}
/* 第一条内容的‘和平精英’的样式 */
#section3 .rank ol li.first div p span:nth-child(1){
   font-size: 14px;
   position: relative;
   padding-left: 20px;
}
/* 和平精英前面的小图标使用为元素 */
#section3 .rank ol li.first div p span:nth-child(1)::before{
   content: '';
   position: absolute;
   width: 14px;
   height: 15px;
   background: url(../imgs/sprites2.png) no-repeat -200px -95px;
   left: 0;
}
#section3 .rank ol li.first div p span:nth-child(2){
   font-size: 16px;
}
#section3 .rank ol li > span{
   flex: 1 1 auto;
}
#section3 .rank ol li > span a{
   display: block;
   width: 270px;
   font-size: 16px;

   white-space:nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
#section3 .rank li i{
   color: #c9c9c9;
   font-size: 16px;
   font-style: normal;
}
#section3 .rank button{
   width: 100%;
   line-height: 42px;
   background: #ddd;
   color: #4b4b4b;
   font-size: 18px;
}
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

攻略中心

样式图：

布局分析
首先是攻略中心的标题栏header
图片和文字都是超链接，所以图片和文字使用a标签，图片是a标签嵌套img
阅读量和日期同行显示样式也很相似，使用span标签，一起放入p标签方便管理

    
    

        

            
攻略中心
            

                
最新攻略
                
攻楼技巧
                
游戏设置
                

            
        
        

            

                
                超体对抗模式震撼来袭，八大职业自由选择！
                

                    阅读量  5988
                    10-09
                
            
            

                
                超强力射手步枪MK20-H正式上线！
                

                    阅读量  5626
                    09-21
                
            
            

                
                全新载具山地自行车、G48旅行车正式上线！
                

                    阅读量  5078
                    09-21
                
            
            

                
                来一场宇宙级的冒险！《和平精英》太空之旅版本和超体对抗模式9月21日发布
                

                    阅读量  2528
                    09-21
                
            
        
        
        

        

    
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

css样式分析
设置标题和内容的父级，设置宽度和高度，设置底部内填充
一如既往，攻略中心左边的图标使用伪元素背景精灵图，调整精灵图的背景位置。
通过设置内边距的属性值来调整选项卡文字之间的距离和标题和标题底部的距离。
修改more的右外边距为0

/* 攻略中心 */ 
#section4 .left{
   width: 435px;
   height: 410px;
   padding-bottom: 20px;
}
/* 设置攻略中心的伪元素 */
#section4 .left .publicHead h3::before{
   background-position: -120px 0;
}
#section4 .left .publicHead li{
   padding: 0 10px 3px;
}
#section4  .left .publicHead li.more{
   padding-right: 0;
}
/* 当前选项卡的内容布局样式 */
/* 注意选择器的写法 */
#section4  ul.tabContent.active{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
/* 每个选项卡的样式 */
#section4 ul.tabContent li{
   width: 212px;
   margin-bottom: 10px;
}
/* 图片显示样式 */
#section4 ul.tabContent li img{
   width: 212px;
   height: 126px;
}
/* 图片下面文字的样式 */
#section4 ul.tabContent li a:nth-child(2){
   padding: 10px 15px 0;
   overflow: hidden;
   margin: 0;
}
/*鼠标悬浮文字的颜色和样式 */
#section4 ul.tabContent li:hover{
   background: #fff;
}
#sdection4 ul.tabContentli:hover a{
   color: #fcc257;
}
/* 阅读量和日期的样式 */
#section4 ul.tabContent li p{
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
   color: #a9a9a9;
   font-size: 14px;
}
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

精品栏目

    
    

        

            
精品栏目
            

                
官方漫画
                
燃烧吧大局观
                
盒子有话说
                
快来扶我
                

            
        
        

            

                
                《和平精英：描边战神》-115 狂沙（二）
                

                    阅读量176
                    10-28
                
            
            

                
                《和平精英：描边战神》-114 狂沙（一）
                

                    阅读量176
                    10-21
                
            
            

                
                《和平精英：描边战神》-113 预选赛开打！
                

                    阅读量176
                    10-14
                
            
            

                
                《和平精英：描边战神》-112 仿生人日常
                

                    阅读量176
                    10-08
                
            
            

                
                《和平精英：描边战神》-111 冲分
                

                    阅读量176
                    09-30
                
            
            

                
                《和平精英：描边战神》-110 自己人
                

                    阅读量176
                    09-23
                
            
        
        

        

        

    
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
59
60
61
62
63
64
65
66

css

/* 精品栏目 */
#section4 .right{
   width: 725px;
}
#sectipn4 .right .publicHead h3::before{
   background-position: -150px 0;
}
#section4 .right .publicHead li{
   padding: 0 28px 3px;
}
#section4 .right .publicHead li.more{
   padding-right: 0;
}
/* 每个单独选项卡的内容设置背景白色 */
#section4 .right ul.tabContent li{
   background: #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

和平人气主播

布局技巧

• 整体概略
  因为和平人气主播的通栏背景是白色的，不能设置宽度，设置div，再设置宽度设置背景
  因为设置box弹性盒之后，标题，选项卡，内容会再一行展示，设置display：block可以避免这种情况
• 头部

头部没有选项卡，只有一个more，仍然使用ul>Li>a，取消border

• 人物图片
  如果是两行无法通过弹性盒实现任意一个照片地方换行，需要设置两个ul，分别代表一行
  html

    
    

        

            

                
和平人气主播
                

                    

                
            
            

                
                
不求人
                
花老湿
                
难言言x
                
若若
                
鲨鱼
                
王小歪
            
        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

css
这里的一个与众不同的地方就是：hover与伪元素的同时使用

/* section5和平人气主播 */
#section5{
	background: #fff;
	height: 327px;
   /* width: 100%; */
}
#section5 .box{
	display: block;
	margin: 15px auto;
}
#section5 .publicHead{
	padding-top: 30px;
}
#section5 .publicHead ul{
	border: none;
}

/* 伪元素调整雪碧图 */
#section5 .publicHead h3::before{
   background-position: 86px 0;
}

#section5 .publicHead ul{
   /* 所有的头部选项卡下边有一条线这里不需要 */
	border: none;
}

#section5 .photo{
	display: flex;
	justify-content: space-between;
	padding-bottom: 24px;
}
#section5 .photo li{
	font-size: 18px;
	text-align: center;
   /* 伪元素的父级使用相对定位 */
	position: relative;
}
#section5 .photo li a{
	color: #000;
}
#section5 .photo li img{
	width: 140px;
   display: block;	/*文字和图片独占一行 */
	 margin-bottom: 20px; /*和文本的间距*/
	border-radius: 50%;
}
#section5 .photo li:hover::after{
	content: '';
	position: absolute;
	width: 120px;
	height: 120px;
	background: url(../imgs/sprites.png) no-repeat  0 -55px;
	left: 10px;
	top: 10px;
   /* 鼠标放在伪元素上没有小手状 */
	cursor: pointer;
}
#section5 .photo li:hover a{
	color: #efa611;
}

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
59
60
61
62

游戏特色

这部分是一个经典的轮播图制作
轮播图部分分为轮播图片 和左右箭头
一起放在一个div里，箭头也使用div

 
    

        
游戏特色
        

            

            

                

                

                

                

                

                

                

            
            

        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

css样式
轮播图
1.溢出隐藏图片父级，最好保证图片一样大，至于图片不一样尺寸怎么处理待研究
2.轮播图是横向轮播所以设置图片的父级display：flex
3.设置层级让箭头显示

/* section6游戏特色 */
/* 经典轮播图 */
#section6{
   padding: 50px 0 140px;
   width: 1200px;
   margin: 40px auto 0;
   justify-content: space-between;
}
#section6 h3{
   height: 30px;
   font-size: 24px;
   color: #24262d;
   display: flex;/* 因为要添加伪元素 */
   align-items: center;    /* 居中对齐弹性盒的各项 
 元素： */
}
/* 伪元素设置图标 */
#section6 h3::before{
   content: '';
   width: 26px;
   height: 26px;
   margin-right: 10px;
   background: url(../imgs/cont-spr.png) no-repeat -139px -66px;
}
#section6 .carousel{
   width: 100%;
   height: 620px;
   margin-top: 30px;
   position: relative;
}
#section6 .carouselInner{
   width: 100%;
   height: 620px;
   /* position: absolute; */
   overflow: hidden;
   z-index: 1;
}

/* 轮播图箭头 */
#section6 .btn{
	width: 60px;
	height: 80px;
	background: url(../imgs/sprites.png) no-repeat;
   position: absolute;
   top: 50%;
	cursor: pointer;
   z-index: 2;
}
#section6 .prev{
	background-position: -70px -180px;
   left: 0;
}
#section6 .next{
	background-position: 0 -180px;
   right: 0;
}


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

footer

iconfont字体图标
可以在阿里的iconfont中搜索加入购物车下载压缩包解压，index.html里面有具体是使用说明
1.引入字体文件到文件根目录下（修改src路径）
2.定义样式
3.html使用

*首先在pubilc样式中引入字体图标*


/* 字体图标 */
@font-face {
	font-family: 'iconfont';
	src: url('../font/iconfont.ttf') format('truetype');
}
.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

整体内容分为两行
第一个ul里面有三个li
每个图标的区域内容是，图标，文字，和二维码

    
    

        

			

				
				
官方公众号
				

					
				
			
			

				
				
官方微博
				

					
				
			
			

				
				
微信用户社区
				

					
				
			
		
		

			

				
				
虎牙
和平精英专区
				

					
				
			
			

				
				
斗鱼
和平精英专区
				

					
				
			
			

				
				
快手
和平精英专区
				

					
				
			
			

				
				
bilibili
和平精英专区
				

					
				
			
			

				
				
腾讯微视
和平精英专区
				

					
				
			
			

				
				
企鹅电竞
和平精英专区
				

					
				
			
		
	

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
59
60
61
62
63
64
65
66
67
68
69
70
71

index.css

    
    

        

			

				
				
官方公众号
				

					
				
			
			

				
				
官方微博
				

					
				
			
			

				
				
微信用户社区
				

					
				
			
		
		

            

				
				
bilibili
和平精英专区
				

					
				
			

			

				
				
斗鱼
和平精英专区
				

					
				
			
            

				
				
虎牙
和平精英专区
				

					
				
			
			

				
				
快手
和平精英专区
				

					
				
			
			

				
				
企鹅电竞
和平精英专区
				

					
				
			
            

				
				
视频号
和平精英专区
				

					
				
			
		
	


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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

footer2

布局指南
根据内容分左右两部分
左边上边是两个logo，之后是八句游戏经典话
logo是图片 a>img

    

        

            

                

                    
                    
                
                

                    
抵制不良游戏
                    
拒绝盗版游戏
                    
注意自我保护
                    
谨防受骗上当
                    
适度游戏益脑
                    
沉迷游戏伤身
                    
合理安排时间
                    
享受健康生活
                
            
            

                

                    腾讯互动娱乐 | 服务条款 | 隐私保护指引 | 儿童隐私保护指引 |
                    腾讯游戏招聘 | 腾讯游戏客服 | 游戏列表 | 广告服务及商务合作
                
                
腾讯公司版权所有
                
COPYRIGHT © 1998 - 2020 TENCENT. ALL RIGHTS RESERVED.
                

                    
                        
                        工商网监电子标识
                     |
                    粤网文[2017]6138-1456号 | （总）网出证（粤）字第057号
                
                

                    国新出审[2019]1394号 | ISBN 978-7-498-06474-5 | 全国文化市场统一举报电话：12318
                
            
        
    
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

侧边导航

侧边导航分为左侧按钮，下载游戏的二维码
下面三部分是相同的，前两个鼠标悬浮会展开二维码，最后一个悬浮没有二维码

	
	

		
		
		

			官方公众号
			

				
			
		
		

			和平营地
			

				
			
		
		

			微博
			

		
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

css

1.设置侧边导航的位置为fix不随窗口的移动而改变位置。
2.设置高于 游戏特色 轮播图的层级，防止上下滑动窗口的时候被挡住一部分。
3.橙色的字是背景图片，以图换字。 4
4.给div添加过渡效果
5.通过鼠标通过以图换字的区域时候出现二维码，就是给span添加hover，然后显示div的图片内容
6.鼠标划到首页上面的时候侧边导航消失，需要通过js给侧边导航的id类添加disNone，就可以实现样式隐藏
7.第二种方法隐藏侧边导航就是通过js添加hidden类，通过transform将侧边导航向右移动，同时显示一个展开贴着浏览器右边的展开button

/* 侧边导航 */
#sideNav{
	width: 200px;
	background: url(../imgs/slide-munu2.png) no-repeat center top;

	position: fixed;/* 固定定位： 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：*/
	top: 35%;
	right: 0;
	padding-top: 180px;
   z-index: 4;  /* 保证不被游戏轮播图遮挡 */
}
.toggleBtn{
	width: 26px;
	height: 82px;
	background: url(../imgs/sq.png) no-repeat center;
/* 绝对定位才会显示出来 */
	position: absolute;
	left: 9px;
	top: 171px;
	cursor: pointer;
}
/* 展示的二维码 */
.downCode{
	width: 120px;
	height: 120px;
   /* 没有边距就脱离了父级框 */
	margin: 3px 0 40px 51px;
}
.codeWrap img{
	width: 120px;
	height: 120px;
	margin: 10px 0 0 9px;
}
/* 图片容器 */
.codeWrap div{
	width: 137px;
	height: 169px;
	margin: 0 0 3px 42px;
	height: 0;
	overflow: hidden; /* 溢出隐藏 */
	transition: .2s;  /* 完成过渡效果需要0.2s */
}
.gzh div{
	background: url(../imgs/slide-munu-gzh.png) no-repeat 0 0;
}
.hpyd div{
	background: url(../imgs/slide-munu-hpyd.png) no-repeat 0 0;
}
/* 以图换字 */
.codeWrap span{
	display: block;
	width: 136px;
	height: 41px;
	margin: 0 0 3px 43px;
	text-indent: -9999px;/*  文字离开视图之内*/
	overflow: hidden;  /*溢出隐藏  */
	cursor: pointer;
}
/* 设置背景图片 */
.gzh span{
	background: url(../imgs/gzh-btn.png) no-repeat center/cover;
}
.hpyd span{
	background: url(../imgs/hpyd-btn.png) no-repeat center/cover;
}
.wb span{
	background: url(../imgs/wb-btn.png) no-repeat center/cover;
}

.codeWrap span:hover + div{	/* + 是找到元素后面紧跟着的兄弟元素 */
	height: 169px;
}
/* 侧边导航隐藏的第一种方法，通过js给侧边导航的id添加class=“disNone” */
.disNone{
	display: none;
}
/* 侧边导航消失的第二种方法 */
/* 通过向右平移移动到看不到的地方 */
.hidden{
	transform: translateX(200px);
}
/* 注意一定要有.hidden  只有这样js给侧边导航的id添加class类的时候它才会生效 */
.hidden .toggleBtn{
  left: -26px;	/*收起的btn会贴在右边浏览器边缘 */
	background: url(../imgs/zk.png) no-repeat center;
}
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

最后我们可以把当初设置底部填充取消了
/* body{
padding-bottom: 1000px;
} */

作者的话

本文通篇没有使用浮动，因为浮动脱离文档流会比较难以控制。
所有的作品都是理论和实践相结合完成的，加油，明天会比今天更强一点。