项目准备
新建html和两个css文件，一个嵌套另一个用于模块化管理
index.css设置样式，public.css设置公用样式
头部
通栏
- 通栏左部
在header里面新建div盒container类，内置左右两部分
左边是和平精英logo（img），点击会用新窗口打开一个新的页面（超链接）
logo右面有一个小图片，鼠标悬浮在上面的时候他会放大显示，不掩盖小图片（设置层级）,并且有超链接
<div class="container">
<div class="left">
<a href="#" target="_blank"><img src="../imgs/logo.png" alt=""></a>
<span>
<img src="../imgs/img-01.jpg" alt="">
<a href="#" target="_blank"><img src="../imgs/img_02.jpg" alt=""></a>
</span>
</div>
通栏左边的大图左边对齐left左边说明是相对左边定位的,
绝对定位不占据空间所以可以覆盖其他元素，将大图设置相对定位
腾讯游戏logo不能被遮盖所以设置logo的层级数字要大于大图的
设置层级使其悬浮于上。display：none最初不展示
将span大图悬浮设置块级显示，
display: block;
/* 块级元素独占一行可以设置宽高 */
#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;
/* 块级元素独占一行可以设置宽高 */
}
- 通栏右部
一个ico图标，成长守护平台(a)，和一个腾讯游戏排行榜iframe
<div class="right">
<h3 class="text1"><a href="#" target="_blank">成长守护平台</a></h3>
<h3 class="text2">
<span>腾讯游戏排行榜</span>
<iframe src="https://game.gtimg.cn/images/js/title/title_game_rank.html?rd=0.5079157561030598" frameborder="0"></iframe>
</h3>
</div>
样式：
设置弹性盒布局
文字并排有间隙，取消加粗，拓展文字区域内边距插入精灵图
伪元素设置腾讯游戏排行榜，设置content：''和宽度高度，行内元素需要固定内容才可以设置宽高
雪碧图设置成伪元素的背景，左右布局相似，方向略有不同，箭头旋转方向使用transform
iframe设置原始状态不显示，设置足够宽高使滚动条消失，使其脱离文档流（设置绝对定位）
#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;
}
- 通栏整体
整体设置弹性盒模型，方便调整位置（官网使用的是浮动）
设置宽度，margin: 0 auto;/*内容水平居中 */
外边距上下为0，左右自适应
#top{
height: 40px; /* 白色部分通栏高度 */
background: #fff;
border-bottom: 1px solid #f5f5f5;
}
#top .container{
width: 980px;
margin: 0 auto;/*内容水平居中 */
display: flex;/* 弹性盒模型 */
justify-content: space-between; /* 两端对齐 */
}
导航
导航条
布局技巧
不能让左中右成为整体然后居中导航条的左中部分是整体居中的,右部分绝对定位脱离文档流放在中间的右边,相对于父级向右移动就好(所以login右部分的父级使用相对定位)/* nav1是导航条 */
<div id="nav">
<div class="nav1">
<div class="title">
<a href="#" target="_blank"><img src="../imgs/logo.png" alt=""></a>
<h1>和平精英<span>全球玩家的冒险竞技世界</span></h1>
</div>
<ul>
<li><a href=""target="_blank">版本专区</a></li>
<li><a href=""target="_blank">游戏资料</a></li>
<li><a href=""target="_blank">赛事专区</a></li>
<li><a href=""target="_blank">安全中心</a></li>
<li><a href=""target="_blank">自助工具</a></li>
<li><a href=""target="_blank">社区论坛</a></li>
<li><a href=""target="_blank">下载游戏</a></li>
<li>
<a href="https://gp.qq.com/web201908/search.html" >
<img src="../和平精英/imgs/top_search.png" >
</a>
</li>
</ul>
<div class="login">
<span></span>
<p>特种兵，请<span>登录</span></p>
</div>
</div>
</div>
导航条及其悬浮菜单的整体容器nav
nav1导航条部分有背景设置高度,nav1的内容一行展示,使用弹性盒模型
/* 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;
}
根据内容划分板块
- 左-标题部分
快捷操作div.title
图片放在a标签里;和平精英用权重最高的h1标签;小的字也是标题一部分但是显示不同样式所以在h1中嵌套span;新版本的图片就使用伪类；
<div class="title">
<a href="#" target="_blank"><img src="../imgs/logo.png" alt=""></a>
<h1>和平精英<span>全球玩家的冒险竞技世界</span></h1>
</div>
#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;
}
- 中-菜单部分
快捷操作 ul>li*7>a
最后一个搜索符号有实际功能所以不使用伪类实现直接在html通过a嵌套img实现
(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;
}
- 右-登录区域
图标文字弹性布局纵向排布
内容设置水平居中
#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;
}
导航下拉悬浮菜单
内容纵向分布，有的文字目录前面有N,H红色小图标，最后一列布局具有二维码交互功能(不用伪类) 这部分命名类为nav2
布局技巧
菜单中的菜单可以使用ul>li双重嵌套，即ul>li>ul>Li的嵌套（每一列放在一个li标签里面，每一列中的每一个又在一个li当中）
有红色标签的可以添加class类进行统一管理，H图标设置为hot类，N设置为new类
最后一列给每个li元素的共同父级添加class类contact
<div class="nav2">
<ul>
<li>
<ul>
<li class="new"><a href="#" target="_blank">最新版本</a></li>
<li class="new"><a href="#" target="_blank">最新赛季</a></li>
<li><a href="#" target="_blank">版本中心</a></li>
<li><a href="#" target="_blank">体验服</a></li>
<li class="new"><a href="#" target="_blank">绿洲启元</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#" target="_blank">新闻资讯</a></li>
<li><a href="#" target="_blank">攻略中心</a></li>
<li><a href="#" target="_blank">视频中心</a></li>
<li class="hot"><a href="#" target="_blank">武器库</a></li>
<li class="hot"><a href="#" target="_blank">大神灵敏度</a>
<li><a href="#" target="_blank">角色动画</a></li>
</ul>
</li>
<li>
<ul>
<li class="hot"><a href="#" target="_blank">赛事中心</a></li>
<li><a href="#" target="_blank">全民赛场</a></li>
<li class="hot"><a href="#" target="_blank">全国大赛</a></li>
<li ><a href="#" target="_blank">巅峰赛</a></li>
<li ><a href="#" target="_blank">授权赛</a></li>
<li ><a href="#" target="_blank">高校赛事联盟</a></li>
</ul>
</li>
<li>
<ul>
<li class="hot"><a href="#" target="_blank">安全反外挂站</a></li>
<li><a href="#" target="_blank">视频巡查</a></li>
<li><a href="#" target="_blank">成长守护平台</a></li>
<li><a href="#" target="_blank">腾讯游戏防沉迷</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#" target="_blank">CDK兑换</a></li>
<li><a href="#" target="_blank">客服专区</a></li>
<li class="hot"><a href="#" target="_blank">举报查询</a></li>
<li><a href="#" target="_blank">作者入驻</a></li>
</ul>
</li>
<li>
<ul class="contact">
<li>
<a href="javascript:;">官方公众号</a>
<span><img src="images/code1.png" alt=""></span>
</li>
<li>
<a href="javascript:;">微信用户社区</a>
<span><img src="images/code2.png" alt=""></span>
</li>
<li>
<a href="javascript:;">QQ用户社区</a>
<span><img src="images/code3.png" alt=""></span>
</li>
<li>
<a href="javascript:;">官方微博</a>
<span><img src="images/code4.png" alt=""></span>
</li>
</ul>
</li>
</ul>
</div>
样式效果要nav2遮盖nav1，需要给nav1，nav2设置层级，数字大的遮盖数字小的。
文字设置居中后位置呈现在logo的位置并且顶着最上面使用margin-top,看上去整体并不居中,使用margin-left无效(如果使用多个方向的margin,可以归并到一个margin中设置不同的数值)
文字整体左侧显示,margin-left无效可以考虑内边距padding-left,不过这里我们使用相对定位来调整它的位置.
#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;
}
文字菜单前的红色图标官网使用图片完成,我用伪类
记得给new类设置相对定位(由于一开始我忘记这个事所以导致红点绝对定位之后全部重叠在一点了.)
/* 红色圆形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;
}
contact部分
二维码交互可以使用css边框实现，文字点击并未跳转。
悬浮菜单用高度0和hover实现出现隐藏
#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;
}
登录弹窗
两种登录方式放在一个盒子里面,最上方登录用标题标签,关闭设置一个按钮
<div id="loginBox" class="dialog show">
<!-- id用来设置和别人不一样的地方 -->
<div class="wrap">
<h3>登录</h3>
<div class="btn">
<a href="#" target="_blank">QQ登录</a>
<a href="#" target="_blank">微信登录</a>
</div>
<button class="close"></button>
</div>
</div>
id用来设置和其他地方不一样的,登录弹窗是一个层级最大的遮罩层,不会随着页面滚动而发生位置变化,使用vw,vh实现全屏可视化.
通用样式
.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;
}
.dialog .close{
width: 25px;
height: 25px;
position: absolute;
top: 6px;
right: 6px;
background: url(../imgs/dia-login-close.png) no-repeat center;
}
单独样式
#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;
}
首页背景
首页背景是两张图片，上部只有一张图片，下部还有下载游戏，轮播图，新闻热点等内容，将这些内容分块布局，适龄提示（button），下载游戏，轮播图，新闻热点四部分放在一个盒子里面，右面三个放一个盒子，下面四张广告图一个模块。
背景图上半部分
背景图下半部分
适龄提示
设置一个按钮，同时设置文字，将其隐藏。
<button class="tip">适龄提示</button>
#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;
}
扫码下载游戏
扫码下载游戏是标题，使用语义化标签h3
安卓下载和苹果下载使用以图换字，两个a标签，需要给a标签设置宽高，首先将它设置为块级元素，用以图换字的方式隐藏文字
<div class="download">
<h3>扫码下载游戏</h3>
<a href="#" target="_blank">苹果下载</a>
<a href="#" target="_blank">安卓下载</a>
<img src="../和平精英/imgs/downqrcode.jpg" alt="">
</div>
#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;
}
轮播图
利用子绝父相给轮播的图片和轮播图指示器的方块定位
指示器span设置弹性盒，一行展示，第一个span设置为active类，设置成橙色，设置hover鼠标悬浮为橙色
html
<div class="carousel">
<ul class="carouselInner">
<li><a href="#"><img src="../和平精英/imgs/pic01.jpeg" alt=""></a></li>
<li><a href="#"><img src="../和平精英/imgs/pic02.jpeg" alt=""></a></li>
</ul>
<!-- 轮播图指示器是一个盒子 -->
<div class="carouselIndicators">
<span class="active"></span>
<span></span>
</div>
</div>
css公共样式
.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;
}
独有样式
#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;
}
新闻热点
选项卡最上边是ul>li*6放在一个tabs的div里面，每个选项都是一个li，最后一个加号是more,是一张图片。
下面的新闻第一行的和其他的样式不同但是html结构是一样的
新闻的左边有活动两个字，使用span标签。最右边是日期，使用i标签。
html
<div class="news">
<ul class="tabs">
<li class="active">最新</li>
<li>新闻</li>
<li>公告</li>
<li>活动</li>
<li>赛事</li>
<li class="more"><a href="#" target="_blank"></a></li>
</ul>
<ul class="tabContent active">
<li><a href="#" target="_blank">第十四届上海国际大众体育节来了</a></li>
<li><span>最新</span><a href="#" target="_blank">和平营地华晨宇视频剪辑创作活动获奖名单</a><i>10-11</i></li>
<li><span>最新</span><a href="#" target="_blank">《光速大逃脱》PEL惊英篇！</a><i>10-11</i></li>
<li><span>最新</span><a href="#" target="_blank">参与视频征集活动，赢万元福利金</a><i>10-10</i></li>
<li><span>最新</span><a href="#" target="_blank">《和平精英》航天光影大赏限时上线，点亮海岛夜空致敬中国航天！</a><i>9-30</i></li>
<li><span>最新</span><a href="#" target="_blank">【抽iPhone14 Pro Max】上B站搜“和平精英激励计划”，投稿赢20万</a><i>9-29</i></li>
</ul>
</div>
</div>
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;
}
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;
}
广告
轮播图的样式中 下面的圆点或者方块（span设置长方形或者圆形），形状不同，但是颜色相同
<div class="bottom">
<a href="#" target="_blank"><img src="images/img_01.png" alt=""></a>
<a href="#" target="_blank"><img src="images/img_02.png" alt=""></a>
<a href="#" target="_blank"><img src="images/img_03.png" alt=""></a>
<a href="#" target="_blank"><img src="images/img_04.png" alt=""></a>
</div>
#bg_bottom .bottom{
display: flex;
justify-content: space-between;
margin-top: 5px;
}
适龄弹窗
适龄弹窗内部结构，背景图片，标题(h3)，文字内容(scrollcContent>p)，标题和文字内容都在scrollcContent里面。关闭按钮(button)，滚动条(span)，所有内容放在scroll里面。
静态页面没有js无法实现打开关闭，所以要给弹窗整体设置初始状态不显示，如果给wrap设置初始状态不显示，那么灰色遮罩层仍会遮挡视野
<div id="yearBox" class="dialog">
<div class="wrap">
<h3>适龄提示</h3>
<div class="scroll">
<div class="scrollContent">
<h4>提示说明：</h4>
<p>1、本游戏是一款玩法复杂的射击类游戏，适用于年满16周岁及以上的用户，建议未成年人在家长监护下使用游戏产品。</p>
<p>2、本游戏背景为特种兵训练，画面风格写实、人物和场景丰富多样，有丰富的音效来烘托游戏氛围。游戏主要玩法为需要多人进行的团队竞技，玩法基于较复杂的思维判断和操作，对玩家的逻辑思维和团队协作能力有一定要求，鼓励玩家在训练中不断提升和挑战自我。游戏中有基于语音和文字的陌生人社交系统，但社交系统的管理遵循相关法律法规。
</p>
<p>3、本游戏中有用户实名认证系统，认证为未成年人的用户将接受以下管理：
游戏中部分玩法和道具需要付费。未满8周岁的用户不能付费；8周岁以上未满16周岁的未成年人用户，单次充值金额不得超过50元人民币，每月充值金额累计不得超过200元人民币；16周岁以上的未成年人用户，单次充值金额不得超过100元人民币，每月充值金额累计不得超过400元人民币。<br>
未成年人用户每日22点到次日8点不得使用，法定节假日每天不得使用超过3小时，其他时间每天不得使用超过1.5小时。</p>
<p>4、游戏在3D场景中的竞技和操作训练有助于锻炼玩家的手眼协调能力、空间感知能力和快速反应能力，基于团队的玩法可以提升玩家的沟通能力、团队协作能力和大局观，鼓励玩家互帮互助，维持良好的社群关系。
</p>
</div>
<div class="scrollBar"><span></span></div>
</div>
<button class="close"></button>
</div>
通用样式和登录弹窗一样
#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;
}
通用样式
/* 滚动条 */
.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;
}
section2
精英爆料头部通用板块
精英爆料，视频中心等部分都有共同的样式
首页两张图片下面的所有内容都是居中显示，每行都是两块内容，两块所占宽度一样，每个板块距离上面的距离相同
精英爆料分为左右两部分，
- 左部 选项卡
精英爆料是单独的标签，右面是选项卡 ，选项卡的下边框中间的橙色的点是插入伪元素做的
选项卡的右边是more，也是首页全篇唯一一个和其他more不同的
为了可以在写页面的时候方便观看可以先在样式上面给body{padding-bottom:1000px}之后再删除。
伪元素定位精英爆料前面的小图标，此处不做定位直接弹性盒
新模式玩法的内容是三张图片和轮播图指示器
<div id="section2" class="box">
<div class="left">
<!-- 精英爆料 -->
<header class="publicHead">
<h3>精英爆料</h3>
<ul class="tabs">
<li class="active">新玩法/模式</li>
<li>新武器/皮肤</li>
<li>新地图</li>
<li>新载具</li>
<li class="more"><a href="#" target="_blank">前往资料站></a></li>
</ul>
</header>
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;
}
index.css
精英爆料占据宽度790px
#section2 .left{
width: 790px;
}
新模式/玩法
轮播图部分的第一个选项卡的内容（新玩法模式内容）有轮播图公用样式overflow：hidden，但是其他的没有所以要给所有tabContent加上溢出隐藏，
<!-- 新玩法模式的内容 -->
<div class="tabContent carousel mode">
<ul class="carouselInner">
<img src="../和平精英/imgs/mode01.jpg" alt="">
<img src="../和平精英/imgs/mode02.jpg" alt="">
<img src="../和平精英/imgs/mode03.jpg" alt="">
</ul>
<div class="carouselIndicators">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
#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;
}
新武器/皮肤（难点）
布局剖析：
（静态页面先隐藏新模式玩法的内容顺便切换选项卡的active项646行）
要在index.css设置weapons部分的背景图
1.枪支文本介绍
文本分为三部分，标题（枪名），枪的类型和口径是p标签的两个span标签
介绍文字是一个p标签2.右侧枪支配件
有三个配件，使用三个li标签，每个配件的内容包括图片img和文字p
因为三个配件的排布不在一行，使用弹性盒的话可能比较复杂，所以使用inline-block3.下面枪支切换
变相轮播图
1>左边按钮 设置btn类名管理公共样式
2>中间div>ul不直接ul因为父级活动区域比较长，每个枪支都放在li表标签，span>p放图，p名称
3>右边箭头4.枪支单独放
一张大图
<div class="tabContent weapon">
<div class="text">
<h4>Kar98K</h4>
<p class="name">
<span>狙击枪</span>
<span>口径：7.62mm</span>
</p>
<p class="intro">性能优异的单发栓动狙击枪。单发伤害高，能一击摧毁二级头，缺点是仅适合远距离使用，十分依赖高倍镜，对枪法依赖很高，尽量命中头部才能发挥威力。</p>
</div>
<ul class="accessory">
<li>
<img src="../和平精英/imgs/8.png" alt="">
<P>八倍镜</P>
</li>
<li>
<img src="../和平精英/imgs/xiaoyinqi.png" alt="">
<P>消音器</P>
</li>
<li>
<img src="../和平精英/imgs/zidandai.png" alt="">
<P>子弹袋</P>
</li>
</ul>
<div class="weapon">
<img src="../和平精英/imgs/98k.png" alt="">
</div>
<div class="armMenu ">
<div class="btn pre disable"></div>
<div class="menu">
<ul>
<li>
<span><img src="../和平精英/imgs/98k.png" alt=""></span>
<p>Kar98K</p>
</li>
<li>
<span><img src="../和平精英/imgs/scar.png" alt=""></span>
<p>SCAR-L</p>
</li>
<li>
<span><img src="../和平精英/imgs/mi.png" alt=""></span>
<p>Mini14</p>
</li>
<li>
<span><img src="../和平精英/imgs/m4.png" alt=""></span>
<p>M416</p>
</li>
<li>
<span><img src="../和平精英/imgs/ak.png" alt=""></span>
<p>AKM</p>
</li>
<li>
<span><img src="../和平精英/imgs/Groza.png" alt=""></span>
<p>Groza</p>
</li>
<li>
<span><img src="../和平精英/imgs/S1897.png" alt=""></span>
<p>S1897</p>
</li>
<li>
<span><img src="../和平精英/imgs/UMP45.png" alt=""></span>
<p> UMP45</p>
</li>
</ul>
</div>
<div class="btn next"></div>
</div>
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; /* 取消小手 */
}
新地图
大图放在div里面，小图和文字放在ul标签里面
public.css
本文含有隐藏内容，请 开通VIP 后查看