05-帮助效果图
(静态页面部分图)
![](https://i-blog.csdnimg.cn/direct/eb09e6b70d2f4478b26944cf6eb0bdce.png)
![](https://i-blog.csdnimg.cn/direct/e38da7d55dd74ebfba66f052de1f5526.png)
![](https://i-blog.csdnimg.cn/direct/6aac3604060247e99310c51af2f1a6ec.png)
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="05-帮助.css">
<link rel="shortcut icon" href="../images/image/favicon .ico" type="image/x-icon">
<title>05-帮助</title>
</head>
<body>
<div class="bang">
<div class="teng">
<div class="teng-1"></div>
<div class="teng-2">
<ul>
<li class="teng-3">
<a href="01-成长平台首页.html">首页</a></li>
<li class="teng-3">
<a href="02-成长守护.html">成长守护</a></li>
<li class="teng-3">
<a href="03-星星守护.html">星星守护</a></li>
<li class="teng-3">
<a href="04-守护共创.html">守护共创</a></li>
<li class="teng-3 teng-4">
<a href="05-帮助.html">帮助</a></li>
</ul>
</div>
<div class="teng-5">登录</div>
</div>
<div class="zhu"></div>
<div class="cheng">
<div class="cheng-1">成长守护</div>
<span class="cheng-2">星星守护</span>
</div>
<div class="chang">
<span class="chang-1">常见问题</span>
<span class="chang-2">版本更新说明</span>
</div>
<div class="yi">
<ul>
<li><span class="yi-1">1、成长守护小程序有哪些功能?</span></li>
<li><span class="yi-1">2、平台目前已经接入了多少款腾讯游戏?</span></li>
<li><span class="yi-1">3、家长如何给孩子设置守护方案?</span></li>
<li><span class="yi-1">4、孩子身份信息是否存在信息泄漏的安全隐患?</span></li>
<li><span class="yi-1">5、“一键禁玩”及“时段设置”功能支持哪些腾讯游戏?</span></li>
<li><span class="yi-1">6、孩子不能加入我“创建的家庭”是什么原因?</span></li>
<li><span class="yi-1">7、我是家长,可以不让我的孩子看到我的游戏数据吗?</span></li>
<li><span class="yi-1">8、如果我在微信上完成创建家庭,可以查询家庭成员Q0游戏记录吗?</span></li>
<li><span class="yi-1">9、如何退出成长守护?</span></li>
<li><span class="yi-1">10、我是队长,退出成长守护以后,家庭会解散吗?</span></li>
<li><span class="yi-1">11、成长守护小程序是否可以绑定家庭成员多个游戏账号?</span></li>
<li><span class="yi-1">12、账号被恶意关联怎么办?</span></li>
<li><span class="yi-1">13、为什么玩游戏的过程中,直接被踢下线了?</span></li>
<li><span class="yi-1">14、网上说的花钱解除防沉迷是真的吗?</span></li>
</ul>
</div>
<div class="foot">
<div class="foot-1">
<ul>
<li class="foot-2"></li>
<li class="foot-3">用户反馈QQ群 : 49522414</li>
<li>
</li>
</ul>
<ul class="qq-1">
<li class="foot-5">全国官方客服</li>
<li class="foot-4">0755-860113799</li>
<li class="foot-6">服务时间 9 : 00-22 : 00</li>
</ul>
</div>
<div class="hou">COPYRIGHT ◎ 1998 -2019 TENCENT. ALL RIGHTS RESERVED腾讯公司 版权所有</div>
</div>
</div>
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
list-style: none;
}
.bang{
width: 1473px;
height: 2400px;
position: relative;
z-index: 3;
}
.teng{
width: 1473px;
height: 100px;
background: rgba(255, 255, 255, 0.505);
position: fixed;
z-index: 999;
}
.teng-1{
width: 250px;
height: 50px;
background: url(../images/image/logo-1.png) no-repeat;
position: fixed;
top: 25px;
left: 160px;
cursor: pointer;
}
a{
color: black;
text-decoration: none;
}
.teng-2{
width: 500px;
height: 30px;
text-align: center;
position: absolute;
top: 35px;
left: 454px;
}
.teng-2 .teng-3{
width: 100px;
height: 30px;
float: left;
}
.teng-3 a:hover{
color: #2caf7d;
}
.teng-2 .teng-4{
width: 36px;
border-bottom: 2px solid #03d5d6;
}
.teng-5{
width: 91px;
height: 34px;
border: 1px solid #333;
border-radius: 17px;
text-align: center;
line-height: 28px;
font-size: 16px;
color: #333;
cursor: pointer;
position: absolute;
top: 30px;
right: 125px;
}
.teng-5:hover{
color: #03d5d6;
border-color: #03d5d6;
}
.zhu{
width: 1473px;
height: 400px;
background: url(../images/image/pc-help-banner.png) -215px 0;
}
.cheng{
width: 1200px;
height: 50px;
background: rgba(255, 255, 255, 0.503);
position: absolute;
left: 140px;
top: 350px;
border-radius: 10px 10px 0 0;
}
.cheng-1{
width: 200px;
height: 50px;
background: white;
font-size: 25px;
color: #2caf7d;
text-align: center;
line-height: 50px;
border-radius: 10px 10px 0 0;
cursor: pointer;
}
.cheng-2{
width: 200px;
height: 50px;
font-size: 25px;
position: absolute;
top: 0px;
left: 200px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.chang{
width: 1200px;
height: 50px;
border-bottom: 1px solid rgba(0, 0, 0, 0.121);
position: absolute;
top: 450px;
left: 140px;
}
.chang-1{
font-size: 25px;
cursor: default;
}
.chang-2{
width: 170px;
height: 35px;
font-size: 22px;
color: white;
background: #1ed6bd;
border-radius: 20px;
float: right;
text-align: center;
line-height: 35px;
cursor: pointer;
}
.yi{
width: 1200px;
height: 1200px;
/* background-color: aqua; */
margin: 150px auto;
line-height: 88px;
}
.yi ul li{
background: url(../images/image/arr-spr.png) no-repeat 0px 22px;
background-size: 40px;
cursor: pointer;
margin-top: 10px;
}
.yi-1{
font-size: 20px;
margin: 70px;
}
.foot{
width: 1473px;
height: 400px;
background: url(../images/image/foot-bg.png) no-repeat -147px 0 ;
background-size: cover;
position: absolute;
bottom: 0;
z-index: 11;
}
.foot-1{
width: 1230px;
height: 120px;
border-bottom: 1px solid rgb(188, 184, 184);
position: absolute;
bottom: 100px;
left: 145px;
color: #b4b8ba;
line-height: 35px;
}
.foot-1 .foot-2{
background: url(../images/image/tencent.png) no-repeat;
width: 242px;
height: 40px;
}
.foot-3{
position: absolute;
bottom: 30px;
font-size: 20px;
}
.foot-1 .qq-1{
position: absolute;
right: 0;
bottom: 10px;
float: right;
}
.foot-4{
width: 202px;
font-size: 25px;
position: absolute;
right: 0px;
bottom: 38px;
}
.foot-5{
width: 72px;
position: absolute;
right: 0px;
bottom: 75px;
font-size: 12px;
}
.foot-6{
width: 127px;
position: absolute;
right: 0px;
bottom: 5px;
font-size: 12px;
}
.hou{
font-size: 12px;
position: absolute;
bottom: 65px;
left: 500px;
color: #b4b8ba;
}