静态网页制作：成长守护平台-星星守护页面

星河路漫漫

已于 2024-08-01 21:02:14 修改

阅读量167

点赞数 1

文章标签： javascript 开发语言

于 2024-08-01 21:01:37 首次发布

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

版权

页面展示：

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/star.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <!-- 头部模块 -->
    <div class="star">
        <!-- 导航栏模块 -->
        <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 class="av w-1200">
            <div class="av-box">
                <button></button>
            </div>
        </div>
    </div>

    <!-- 主体模块 -->
    <div class="main">
        <div class="w-1200">
            <div class="star-content cont-one">
                <div class="star-head head-one">
                    <h3>老师端</h3>
                    <p>查询学生游戏动态，班级报告自动推送</p>
                </div>
                <div class="star-body">
                    <ul>
                        <li>
                            <span><img src="./image/start_teacher1.png" alt=""></span>
                            <h5>更懂学生</h5>
                            <p>了解学生的游戏动态，
                                沟通更有效。</p>
                        </li>
                        <li>
                            <span><img src="./image/start_teacher2.png" alt=""></span>
                            <h5>提升学习成绩</h5>
                            <p>掌握学生游戏行为，管理有方法，针对性提升成绩。</p>
                        </li>
                        <li>
                            <span><img src="./image/start_teacher3.png" alt=""></span>
                            <h5>简单不费事</h5>
                            <p>信息自动推送给老师，一分钟掌控全局。</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="star-content cont-two">
                <div class="star-head head-two">
                    <h3>学生端</h3>
                    <p>查询自己的游戏数据，自我游戏管理</p>
                </div>
                <div class="star-body">
                    <ul>
                        <li>
                            <span style="margin: 50px 72px 0px;"><img
                                    src="https://jiazhang.qq.com/static/img/PC/svg/start/student1.svg" alt=""
                                    style="width: 62px;"></span>
                            <h5>认清你的真面目</h5>
                            <p>了解学生的游戏动态，
                                沟通更有效。</p>
                        </li>
                        <li>
                            <span style="margin: 50px 72px 0px;"><img
                                    src="https://jiazhang.qq.com/static/img/PC/svg/start/student2.svg" alt=""
                                    style="width: 62px;"></span>
                            <h5>你的时间你做主</h5>
                            <p>了解学生的游戏动态，
                                沟通更有效。</p>
                        </li>
                        <li>
                            <span style="margin: 50px 72px 0px;"><img
                                    src="https://jiazhang.qq.com/static/img/PC/svg/start/student3.svg" alt=""
                                    style="width: 62px;"></span>
                            <h5>有战友，不孤单</h5>
                            <p>了解学生的游戏动态，
                                沟通更有效。</p>
                        </li>
                    </ul>
                </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代码展示：

body {
    height: 2000px;
}

.star {
    height: 520px;
    background: url(../image/star-banner01.png) no-repeat -300px 0px;
    overflow: hidden;
}

.av-box {
    width: 590px;
    height: 430px;
    margin-top: 100px;
    background: url(../image/star01.png) no-repeat;
}

.av-box button {
    position: relative;
    top: 163px;
    left: 274px;
    width: 200px;
    height: 200px;
    background: url(../image/video-btn-bg-1.png) no-repeat -21px -30px;
    border: 0;
}

/* 主体模块 */
.main {
    height: 1200px;
    background: url(../image/star-bg11.jpg) no-repeat 0px 332px;
}

.star-content {
    position: relative;
    width: 700px;
    height: 400px;
    margin: 100px 0px 240px 460px;
    box-sizing: border-box;
}

.cont-two {
    margin: 100px 460px 150px 0px;
}

.cont-one::after,
.cont-two::before {
    content: "";
    position: absolute;
    top: -50px;
    width: 565px;
    height: 565px;

}

.star-content::after {
    left: -495px;
    background: url(../image/teacher-phone.png)no-repeat;
}

.cont-two::before {
    right: -540px;
    background: url(../image/child-phone.png)no-repeat;
}

.star-head {
    text-align: right;
    width: 500px;
    height: 100px;
}

.star-head h3 {

    font-size: 40px;
    font-weight: normal;
}

.head-two {
    text-align: left;
    margin-left: 150px;
}

.star-head p {

    font-size: 18px;

}

.head-one::before,
.head-two::after {
    content: "";
    position: absolute;
    top: -40px;
    width: 200px;
    height: 140px;
}

.head-one::before {
    right: 50px;
    background: url(../image/parent-main.png) no-repeat -100px -64px;
}

.head-two::after {
    left: 10px;
    background: url(../image/parent-main.png) no-repeat -880px -386px;


}

.star-body li {
    float: left;
    width: 200px;
    height: 280px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    margin: 20px 15px;
    transition: all 0.3s linear;
    cursor: pointer;
}

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

.star-body li span {
    display: inline-block;
    width: 100px;
    height: 68px;
    margin: 50px 48px 0px;
}

.star-body li span img {
    width: 110px;
}

.star-body li h5 {
    font-weight: normal;
    font-size: 20px;
    text-align: center;
    margin: 20px 0px;
}

.star-body li p {
    padding: 0px 28px;
    color: #888;
}