04-守护共创效果图
(静态页面部分图)
![](https://i-blog.csdnimg.cn/direct/450cfb94b52c477586f2f0cb3ae8b673.png)
![](https://i-blog.csdnimg.cn/direct/a95d7e54a9244b70a9a6c2c49a892b9c.png)
![](https://i-blog.csdnimg.cn/direct/070ac5faffc2456fb91cf1d011dd76e8.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="04-守护共创.css">
<link rel="shortcut icon" href="../images/image/favicon .ico" type="image/x-icon">
<title>04-守护共创</title>
</head>
<body>
<div class="shou">
<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 teng-4">
<a href="04-守护共创.html">守护共创</a></li>
<li class="teng-3">
<a href="05-帮助.html">帮助</a></li>
</ul>
</div>
<div class="teng-5">登录</div>
</div>
<div class="chuang"></div>
<div class="ping">平台优势</div>
<div class="fang">
<ul class="fang-1">
<li class="fang-2">
<div class="fang-20"></div>
<div class="fang-21">1000万+</div>
<div class="fang-22">家庭用户</div>
<div class="fang-23">精准定位<br>8-15 岁孩子家庭</div>
</li>
<li class="fang-2">
<div class="fang-24"></div>
<div class="fang-21">1000万+</div>
<div class="fang-22">公众号粉丝</div>
<div class="fang-23">直达目标用户<br>与粉丝真实互动</div>
</li>
<li class="fang-2">
<div class="fang-25"></div>
<div class="fang-21">双平台、全覆盖</div>
<div class="fang-22">成长守护小程序</div>
<div class="fang-23">面对孩子游戏<br>提供多维度的管理方法</div>
</li>
</ul>
</div>
<div class="he">合作方式</div>
<div class="zuo">
<div class="zuo-1"></div>
<div class="zuo-2">个人合作</div>
<div class="zuo-3">如果你是教育类的专家或实践者,可以通过平台阐述你的理念,和家庭进行互动</div>
</div>
<div class="shi">
<div class="shi-1"></div>
<div class="zuo-2">平台合作</div>
<div class="zuo-3">如果你是教育类、阅读类、运动类产品,我们愿意共同探讨产品合作更多的可能性</div>
</div>
<div class="lian">联系我们</div>
<div class="xi">
<div class="xi-1"></div>
<div class="xi-2">邮箱地址</div>
<div class="xi-3">tx jiazhang@tencent.com</div>
<div class="xi-4"></div>
<div class="xi-5">官方客服</div>
<div class="xi-6">0755-86013799</div>
</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;
}
.shou{
width: 1473px;
height: 2500px;
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: 65px;
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;
}
.chuang{
width: 1473px;
height: 400px;
background: url(../images/image/20210726154753_65364.png) -215px 0;
}
.ping{
width: 128px;
height: 40px;
font-size: 32px;
margin: 30px auto;
cursor: default;
}
.fang{
width: 1300px;
height: 450px;
/* background-color: aquamarine; */
position: absolute;
left: 100px;
}
.fang-2{
width: 383px;
height: 450px;
background-color: rgb(255, 255, 255);
float: left;
margin-left: 40px;
box-shadow: 0 15px 59px 0 rgba(0, 0, 0, .05);
border-radius: 10px;
position: relative;
transition: transform 0.5s;
transform: translateY(0);
cursor: pointer;
}
.fang .fang-2:hover{
transform: translateY(-20px);
}
.fang-20{
width: 150px;
height: 150px;
background: url(../images/image/css_spr2.png) -332px -449px;
position: absolute;
top: 55px;
left: 120px;
}
.fang-21{
width: 200px;
height: 30px;
font-size: 28px;
color: #2dd8b0;
position: absolute;
top: 226px;
left: 96px;
text-align: center;
}
.fang-22{
width: 150px;
height: 30px;
font-size: 20px;
position: absolute;
top: 280px;
left: 115px;
text-align: center;
}
.fang-23{
width: 200px;
height: 60px;
font-size: 20px;
color: #989898;
text-align: center;
position: absolute;
bottom: 65px;
left: 90px;
}
.fang-24{
width: 150px;
height: 150px;
background: url(../images/image/css_spr2.png) -168px -449px;
position: absolute;
top: 55px;
left: 120px;
}
.fang-25{
width: 150px;
height: 150px;
background: url(../images/image/css_spr2.png) -10px -449px;
position: absolute;
top: 55px;
left: 120px;
}
.he{
width: 128px;
height: 40px;
font-size: 32px;
position: absolute;
top: 1000px;
left: 690px;
cursor: default;
}
.zuo{
width: 1240px;
height: 350px;
/* background-color: bisque; */
position: relative;
top: 580px;
left: 135px;
border-radius: 10px;
box-shadow: 0 15px 59px 0 rgba(0, 0, 0, .05);
cursor: default;
}
.zuo-1{
width: 235px;
height: 200px;
background: url(../images/image/css_spr2.png) 508px -228px;
position: absolute;
top: 70px;
left: 115px;
}
.zuo-2{
width: 200px;
height: 50px;
font-size: 32px;
position: absolute;
top: 88px;
left: 384px;
}
.zuo-3{
width: 660px;
height: 60px;
color: #989898;
font-size: 20px;
position: absolute;
top: 150px;
left: 384px;
line-height: 60px;
}
.shi{
width: 1240px;
height: 350px;
/* background-color: bisque; */
position: relative;
top: 605px;
left: 135px;
border-radius: 10px;
box-shadow: 0 15px 59px 0 rgba(0, 0, 0, .05);
cursor: default;
}
.shi-1{
width: 210px;
height: 200px;
background: url(../images/image/css_spr2.png) 231px -228px;
position: absolute;
top: 70px;
left: 115px;
}
.lian{
width: 128px;
height: 40px;
font-size: 32px;
position: absolute;
bottom: 620px;
left: 690px;
cursor: default;
}
.xi{
width: 1240px;
height: 200px;
/* background-color: bisque; */
position: relative;
bottom: -705px;
left: 135px;
border-radius: 10px;
box-shadow: 0 15px 59px 0 rgba(0, 0, 0, .05);
cursor: default;
}
.xi-1{
width: 85px;
height: 65px;
background: url(../images/image/css_spr2.png) 266px -490px;
position: absolute;
top: 60px;
left: 190px;
}
.xi-2{
width: 128px;
height: 40px;
font-size: 32px;
position: absolute;
top: 45px;
left: 300px;
}
.xi-3{
width: 300px;
height: 20px;
color: #989898;
font-size: 20px;
position: absolute;
bottom: 75px;
left: 300px;
cursor: pointer;
}
.xi-4{
width: 85px;
height: 80px;
background: url(../images/image/css_spr2.png) 122px -483px;
position: absolute;
top: 60px;
right: 440px;
}
.xi-5{
width: 128px;
height: 40px;
font-size: 32px;
position: absolute;
top: 45px;
right: 300px;
}
.xi-6{
width: 150px;
height: 20px;
color: #989898;
font-size: 20px;
position: absolute;
bottom: 75px;
right: 277px;
cursor: pointer;
}
.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;
}