静态网页制作：成守护平台-守护共创页面

星河路漫漫

已于 2024-08-25 10:09:43 修改

阅读量448

点赞数 17

文章标签：前端

于 2024-08-25 10:08:53 首次发布

本文链接：https://blog.csdn.net/m0_71805303/article/details/141524476

版权

页面效果展示：

全部html源码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/create.css">
    <link rel="stylesheet" href="../css/common.css">
</head>

<body>
    <!-- 头部模块 -->
    <div class="create">
        <!-- 导航栏模块 -->
        <div class="cl">
            <div class="head-top w-1200">
                <div class="logo">
                    <img src="../image/logo-1.png" alt="">
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="../index.html">首页</a></li>
                        <li><a href="./gurd.html">成长守护</a></li>
                        <li><a href="./star.html">星星守护</a></li>
                        <li><a href="./create.html">守护共创</a></li>
                        <li><a href="./help.html">帮助</a></li>
                    </ul>
                </div>
                <div class="login">
                    登录
                </div>
            </div>
        </div>
    </div>

    <!-- 主体模块 -->
    <div class="create-main">
        <h3 class="w-1200">平台优势</h3>
        <div class="good w-1200">
            <ul>
                <li>
                    <span><img src="../image/create01.png" alt=""></span>
                    <h2>1000万+</h2>
                    <h4>家庭用户</h4>
                    <p>精准定位</p>
                    <p>8-15岁孩子家庭</p>
                </li>
                <li>
                    <span><img src="../image/create02.png" alt=""></span>
                    <h2>1000万+</h2>
                    <h4>公众号粉丝</h4>
                    <p>直达目标用户</p>
                    <p>与粉丝真实互动</p>
                </li>
                <li>
                    <span><img src="../image/create03.png" alt=""></span>
                    <h2>双平台，全覆盖</h2>
                    <h4>成长守护小程序</h4>
                    <p>面对孩子游戏</p>
                    <p>提供多维度的管理方法</p>
                </li>
            </ul>
        </div>
        <div class="main w-1200">
            <h3>合作方式</h3>
            <div class="create-content">
                <div class="left">
                    <img src="https://jiazhang.qq.com/static/img/PC/svg/create/single.svg" alt="">
                </div>
                <div class="right">
                    <h4>个人合作</h4>
                    <p>
                        如果你是教育类的专家或实践者，可以通过平台闸述你的理念，和家庭进行互动
                    </p>
                </div>
            </div>
            <div class="create-content">
                <div class="left">
                    <img src="https://jiazhang.qq.com/static/img/PC/svg/create/advantage-of-platform4.svg" alt="">
                </div>
                <div class="right">
                    <h4>平台合作</h4>
                    <p>
                        如果你是教育类、阅读类、运动类产品，我们愿意共同探讨产品合作更多的可能性
                    </p>
                </div>
            </div>
            <h3>联系我们</h3>
            <div class="create-content our">
                <div class="right">
                    <img src="https://jiazhang.qq.com/static/img/PC/svg/create/email.svg" alt="">
                    <div class="adress">
                        <h4>邮箱地址</h4>
                        <p>2632824235@qq.com</p>
                    </div>
                </div>
                <div class="right">
                    <img src="https://jiazhang.qq.com/static/img/PC/svg/create/email.svg" alt="">
                    <div class="adress">
                        <h4>官方客服</h4>
                        <p>0755-86013799</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部模块 -->
    <footer>
        <div class="content w-1200">
            <div class="box-left">
                <div class="box-top">
                    <img src="../image/tencent.png" alt="">
                </div>
                <div class="box-bottom">
                    用户反馈QQ群：495224114
                </div>
            </div>
            <div class="box-right">
                <p>全国官方客服</p>
                <p style="font-size: 30px;">0755-86013799</p>
                <p>服务时间9:00-22:00</p>
            </div>


        </div>
        <div class="copy w-1200">
            <div class="xian"></div>
            <p>COPYRIGHT &copy; 1998-2021 TENCENT. ALL RIGHTS RESERVED 腾讯公司 版权所有</p>
        </div>

    </footer>
</body>

</html>

全部css源码展示：

/* css样式文件 */
.create {
    height: 400px;
    background: url(../image/create-banner.png)no-repeat -105px 0px;
}

body {
    background-color: fdfdfd;
}

.create-main h3 {
    font-weight: normal;
    text-align: center;
    font-size: 30px;
    padding: 20px 0px;
}

.good {
    overflow: hidden;
    padding-top: 20px;
}

.good li {
    float: left;
    width: 350px;
    height: 430px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 30px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.09);
    margin: 15px 25px;
    transition: all 0.5s;
    cursor: pointer;

}

.good li:hover {
    transform: translateY(-20px);
}

.good li span {
    display: inline-block;
    width: 200px;
    height: 180px;
}

.good li h2 {
    font-weight: normal;
    font-size: 30px;
    color: aquamarine;
}

.good li h4 {
    font-weight: normal;
    font-size: 20px;
    margin: 10px 0px 20px 0px;

}

.good li p {
    color: #888;
}

.good li span img {
    width: 141px;
    margin: 30px;
}

.create-content {
    height: 300px;
    box-sizing: border-box;
    padding: 50px 0px 0px 115px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.09);
    margin: 30px 0px;

}

.create-content .left {
    float: left;
    width: 240px;
    height: 200px;
}

.create-content .right {
    float: left;
    width: 675px;
    height: 140px;
    margin: 50px 70px 0px;
}

.create-content .right h4 {
    font-weight: normal;
    font-size: 25px;
    margin: 15px 0px;
}

.create-content .right p {
    color: #888;
    font-size: 20px;
}

.our {
    height: 200px;
    display: flex;
    padding: 0px 0px 0px 125px;
}

.our img {
    width: 80px;
}

.our .left {
    display: flex;
}

.our .right {
    display: flex;
    align-items: center;
}

.our .right .adress {
    padding: 0px 0px 20px 20px;
}

公共样式的CSS源码（即头部及底部的样式文件）：

/*公共样式common文件*/
* {
    padding: 0;
    margin: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

.w-1200 {
    width: 1200px;
    margin: 0 auto;
}

/* 导航栏样式 */
.cl {
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.562);
    position: fixed;
    z-index: 999;
}

.head-top {
    height: 80px;
    text-align: center;

}

.logo,
.nav,
.login {
    float: left;
}

.logo {
    margin-top: 16px;
    margin-right: 20px;
}

.nav li {
    float: left;
    margin: 30px;
}

.nav li a:hover {
    padding-bottom: 5px;
    color: #35b283;
    border-bottom: 2px solid #03d5d6;
}

.login {
    border: 1px solid #333;
    color: #333;
    padding: 5px 25px;
    border-radius: 25px;
    margin: 25px 0px 0px 215px;
}

.login:hover {
    color: #35b283;
    border: 1px solid #35b283;
    cursor: pointer;
}

/* 底部样式 */
footer {
    height: 399px;
    background: url(../image/foot-bg.png)no-repeat;
}

footer .content {
    height: 350px;
}

.content .box-left,
.content .box-right {
    width: 400px;
    height: 160px;
    margin-top: 180px;
}

.content .box-left {
    float: left;
}

.content .box-right {
    float: right;
}

.box-top {
    margin: 30px 0px;
}

.box-bottom {
    font-size: 22px;
    color: #b1b5b7;
}

.box-right {
    box-sizing: border-box;
}

.box-right p {
    text-align: right;
    color: #b1b5b7;
    margin: 15px 0px;
}

.xian {
    height: 1px;
    background-color: #b1b5b7;
}

.copy p {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #b1b5b7;
}