网页案例：腾讯成长守护 03-星星守护（小白）

于 2024-07-28 09:00:00 发布
阅读量256 收藏
点赞数 11
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78949452/article/details/140652041
版权

03-星星守护效果图

(静态页面部分图)

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="03-星星守护.css">
    <link rel="shortcut icon" href="../images/image/favicon .ico" type="image/x-icon">
    <title>03-星星守护</title>
</head>
<body>
    <div class="xing">
        <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 teng-4">
                        <a href="03-星星守护.html">星星守护</a></li>
                    <li class="teng-3">
                        <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="tup">
            <div class="tup-1">
                <div class="tup-2"></div>
            </div>
        </div>
        <div class="qw">
            <div class="qw-1"></div>
            <div class="qw-3">
                <div class="qw-03">老师端</div>
                <div class="qw-003">查询学生游戏动态，班级报告自动推送</div>
            </div>
            <div class="qw-4"></div>
            <div class="qw-5">
                <ul class="qw-05">
                    <li class="qw-005">
                        <div class="qw-0051"></div>
                        <div class="qw-0052">更懂学生</div>
                        <div class="qw-0053">了解学生的游戏动态,沟通更有效。</div>
                    </li>
                    <li class="qw-0005">
                        <div class="qw-0054"></div>
                        <div class="qw-0055">提升学习成绩</div>
                        <div class="qw-0056">掌握学生游戏行为，管理有方法，针对性提升成绩。</div>
                    </li>
                    <li class="qw-00005">
                        <div class="qw-0057"></div>
                        <div class="qw-0058">简单不费事</div>
                        <div class="qw-0059">信息自动推送给老师，一分钟掌控全局。</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="as">
            <div class="as-1"></div>
            <div class="as-3">
                <div class="as-03">学生端</div>
                <div class="as-003">查询自己的游戏数据，自我游戏管理</div>
            </div>
            <div class="as-4"></div>
            <div class="as-5">
                <ul class="as-05">
                    <li class="as-005">
                        <div class="as-0051"></div>
                        <div class="as-0052">认清你的真面目</div>
                        <div class="as-0053">了解自己的游戏行为数据让时间看得见。</div>
                    </li>
                    <li class="as-0005">
                        <div class="as-0054"></div>
                        <div class="as-0055">你的时间你做主</div>
                        <div class="as-0056">自我管理游戏时间，享受更多课余乐趣。</div>
                    </li>
                    <li class="as-00005">
                        <div class="as-0057"></div>
                        <div class="as-0058">有战友，不孤单</div>
                        <div class="as-0059">加入班级，接受老师帮助和同学们一起进步。</div>
                    </li>
                </ul>
            </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;
}

.xing{
    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;
    /* background-color: aqua; */
    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;
}

.tup{
    width: 1473px;
    height: 520px;
    background: url(../images/image/20210726154635_42904.png) no-repeat -215px 0;
    background-size: cover;
}

.tup-1{
    width: 735px;
    height: 487px;
    background: url(../images/image/pc-star-video-cover.png) no-repeat;
    position: absolute;
    top: 70px;
    left: 100px;
}

.tup-2{
    width: 235px;
    height: 235px;
    background: url(../images/image/video-btn-bg-1.png) no-repeat;
    position: absolute;
    top: 125px;
    left: 255px;
    transition: transform 3s;
    cursor: pointer;
}

.tup-2:hover{
    transform: translate(20px);
}

.qw{
    width: 1200px;
    height: 628px;
    /* background-color: bisque; */
    position: absolute;
    top: 520px;
    left: 145px;
    z-index: 3;
}

.qw-1{
    width: 170px;
    height: 140px;
    background: url(../images/image/parent-main.png) no-repeat -118px -60px;
    position: absolute;
    top: 90px;
    right: 35px;
}

.qw-3{
    width: 306px;
    height: 70px;
    position: absolute;
    top: 145px;
    right: 158px;
}

.qw-03{
    font-size: 28px;
    float: right;
}

.qw-003{
    font-size: 18px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.qw-4{
    width: 565px;
    height: 563px;
    background: url(../images/picture/teacher-phone.png) no-repeat;
    position: absolute;
    top: 66px;
}

.qw-5{
    width: 700px;
    height: 300px;
    /* background-color: chartreuse; */
    position: absolute;
    top: 276px;
    left: 500px;
    text-align: center;
}

.qw-05 li{
    width: 200px;
    height: 300px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    float: left;
    margin-left: 33px;
    transition: transform 0.5s;  /* 平滑过渡效果 */
    transform: translateY(0); /* 初始状态，不移动 */
    box-shadow: 0px 10px 20px 10px rgb(240, 240, 240);
    cursor: pointer;
}

.qw-0051{
    width: 85px;
    height: 75px;
    background: url(../images/image/icon-spr.png) no-repeat -100px -8px;
    position: absolute;
    top: 50px;
    left: 60px;
}

.qw-0052{
    font-size: 25px;
    position: absolute;
    top: 160px;
    left: 50px;
}

.qw-0053{
    width: 157px;
    height: 40px;
    position: absolute;
    top: 210px;
    left: 26px;
}

.qw-005:hover{
    transform: translateY(-20px); /* 悬停时向上移动20像素 */
}

.qw-0054{
    width: 85px;
    height: 75px;
    background: url(../images/image/icon-spr.png) no-repeat -288px -98px;
    position: absolute;
    top: 50px;
    left: 60px;
}

.qw-0055{
    font-size: 25px;
    position: absolute;
    top: 160px;
    left: 26px;
}

.qw-0056{
    width: 195px;
    height: 50px;
    position: absolute;
    top: 210px;
    left: 3px;
}

.qw-0005:hover{
    transform: translateY(-20px);
}


.qw-0057{
    width: 85px;
    height: 75px;
    background: url(../images/image/icon-spr.png) no-repeat -100px -110px;
    position: absolute;
    top: 50px;
    left: 60px;
}

.qw-0058{
    font-size: 25px;
    position: absolute;
    top: 160px;
    left: 38px;
}

.qw-0059{
    width: 195px;
    height: 40px;
    position: absolute;
    top: 210px;
    left: 2px;
}

.qw-00005:hover{
    transform: translateY(-20px);
}

.qw-0053,.qw-0056,.qw-0059{
    color: #989898;
}

.as{
    width: 1473px;
    height: 1000px;
    background: url(../images/image/star-bg.jpg) no-repeat 0px 0px;
    background-size: 1650px;
    position: absolute;
    top: 1147px;
    z-index: 4;
}

.as-1{
    width: 185px;
    height: 150px;
    background: url(../images/image/parent-main.png) 280px -389px;
    position: absolute;
    top: 260px;
    left: 170px;
}

.as-3{
    width: 306px;
    height: 70px;
    position: absolute;
    top: 313px;
    left: 320px;
}

.as-03{
    font-size: 28px;
}

.as-003{
    font-size: 18px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.as-4{
    width: 565px;
    height: 563px;
    background: url(../images/picture/child-phone.png) no-repeat;
    position: absolute;
    top: 245px;
    right: 10px;
}

.as-5{
    width: 700px;
    height: 300px;
    /* background-color: chartreuse; */
    position: absolute;
    top: 445px;
    left: 140px;
    text-align: center;
}

.as-05 li{
    width: 200px;
    height: 300px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    float: left;
    margin-left: 33px;
    transition: transform 0.5s;  /* 平滑过渡效果 */
    transform: translateY(0); /* 初始状态，不移动 */
    box-shadow: 0px 10px 20px 10px rgb(240, 240, 240);
    cursor: pointer;
}

.as-0051{
    width: 85px;
    height: 75px;
    background: url(../images/image/icon-spr.png) no-repeat -100px -108px;
    position: absolute;
    top: 50px;
    left: 60px;
}

.as-0052{
    font-size: 25px;
    position: absolute;
    top: 160px;
    left: 16px;
    width: 175px;
}

.as-0053{
    width: 157px;
    height: 40px;
    position: absolute;
    top: 210px;
    left: 26px;
}

.as-005:hover{
    transform: translateY(-20px); /* 悬停时向上移动20像素 */
}

.as-0054{
    width: 85px;
    height: 75px;
    background: url(../images/image/icon-spr.png) no-repeat -288px -8px;
    position: absolute;
    top: 50px;
    left: 60px;
}

.as-0055{
    font-size: 25px;
    position: absolute;
    top: 160px;
    left: 12px;
    width: 175px;
}

.as-0056{
    width: 195px;
    height: 50px;
    position: absolute;
    top: 210px;
    left: 3px;
}

.as-0005:hover{
    transform: translateY(-20px);
}


.as-0057{
    width: 85px;
    height: 75px;
    background: url(../images/image/icon-spr.png) no-repeat -194px -95px;
    position: absolute;
    top: 50px;
    left: 60px;
}

.as-0058{
    font-size: 25px;
    position: absolute;
    top: 160px;
    left: 12px;
    width: 175px;
}

.as-0059{
    width: 195px;
    height: 40px;
    position: absolute;
    top: 210px;
    left: 2px;
}

.as-00005:hover{
    transform: translateY(-20px);
}

.as-0053,.as-0056,.as-0059{
    color: #989898;
}

.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: 1200px;
    height: 120px;
    border-bottom: 1px solid rgb(188, 184, 184);
    position: absolute;
    bottom: 100px;
    left: 170px;
    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;
}
柿子来了
关注
  • 11
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决pptpsetup连接时报LCP: timeout sending Config-Requests 错误
zggzcgy的专栏
11-27 3万+
防火墙规则，pptpsetup错误连接
腾讯云tsf平台-部署微服务项目
热门推荐
✨ 欢迎来到【Seal ^_^ 的CSDN博客】！这里是我记录技术心得、分享经验的地方。✨
01-22 3万+
腾讯云tsf平台（Tencent Service Framework）是一款用于部署和管理微服务架构的云原生应用平台，可使用以下两种方式部署。本文档使用容器部署微服务。
解决ZooKeeper集群搭建 [myid:1] - WARN [QuorumPeer[myid=1]:QuorumCnxManager@685] - Cannot open channel
又蠢又笨的懒羊羊程序猿的博客
11-01 1万+
ZooKeeper集群搭建中出现错误： [myid:1] - WARN [QuorumPeer[myid=1](plain=0.0.0.0:2181)(secure=disabled):QuorumCnxManager@685] - Cannot open channel to 3 at election address /x.x.x.x:3883 java.net.ConnectException: Connection refused (Connection refused) at java.net
腾讯EdgeOne产品测评体验—金字塔般的网络安全守护神
Hello大家好，我是Dream，如果帮得到你，那我深感荣幸！交流学习、商务合作：https://bbs.csdn.net/topics/614347534
04-15 2万+
EdgeOne 提供了一套灵活的工具和功能，使用户能够根据其特定的业务需求来配置自定义访问控制规则。
腾讯位置服务开发应用-使用教程，案例分享，知识总结
程序员哆啦A梦，蓝胖子
12-24 1万+
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 作为一名在职岗位为【前端开发工程师】的程序员，我开发的应用程序经常需要获取用户位置信息，需要再某些场合下使用展示地图以及地图商的某些地点，需要获取行政区划列表（省市区）以及地址详情信息，需要在地图上规划一条（动态）路线，轨迹回放，小车移动，需要创建信息窗口，用于地点的摘要性信息的展示。 一、pandas是什么？ 二、使用步骤 1.引入库 代码如下（示例）： 2.读入数据 代码如下（示例）： 总结 以上就是今天要讲
TencentMapSdk:腾讯地图SDK+Demo-iOS版
05-14
TencentMap 通过 pod 'TencentMapSdk' 安装 准备工作： 使用SDK时需要先鉴权，说明链接： 接口使用：
腾讯研究院：数字经济指数2015-2019(351个地级市)
05-10
适用于研究数字经济的人
高端制造：科技行业物联网周报-首钢股份与腾讯云共同打造钢铁行业工业互联网平台.pdf
07-11
高端制造：科技行业物联网周报-首钢股份与腾讯云共同打造钢铁行业工业互联网平台.pdf
腾讯大学：从概念到产品 - 需求分析过程
04-02
腾讯大学内部资料，聚焦需求分析与产品设计。
腾讯：从概念到产品-需求分析过程
02-26
腾讯大学关于“从概念到产品-需求分析过程”的解读，Something about grammar & literature
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3290
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 997
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 714
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
最新发布
xcLeigh
07-25 1996
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
【HTML — 构建网络】HTML 入门
07-24 1219
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
HTML 基础知识
07-24 1028
你写的替代文本应该为读者提供足够的信息，以便对图像传达的内容有一个很好的了解。对于我们的Firefox徽标，一个更好的替代品是“Firefox徽标：围绕地球的火焰狐狸”。如果它们如上所示重叠，那么您的 Web 浏览器将尝试对您想说的内容做出最佳猜测，这可能会导致意外结果。正如我们之前所说，它将图像嵌入到我们的页面中，该图像位于它出现的位置。空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。创建链接后，单击它以确保它将您发送到您想要的地方。
IPython的HTML魔法：%%html_header命令全解析
2401_85762266的博客
07-24 1194
IPython是一个增强的Python交互式解释器，而Jupyter Notebook是一个基于Web的开源项目，允许用户创建和共享包含实时代码、方程、可视化和解释性文本的文档。HTML头部是网页文档的元数据区域，它包含了文档的标题（title）、样式表链接（link）、脚本链接（script）等信息。的使用，可以让您更灵活地定制Notebook的样式和功能，从而提供更加丰富和个性化的文档体验。命令的使用非常简单。你只需要在Notebook的单元格中输入该命令，然后写入你想要添加到头部的HTML代码即可。
HTML开发小技巧：根据用户浏览器的分辨率调整控件的大小
ioioppk的博客
07-25 596
在Html页面开发中，我们通常会用Style进行控件的宽度高度进行控件的格式设置，如果直接设置像素的话，无法根据用户的浏览器进行宽高的适配，所以我们要做到根据实际使用的浏览器进行控件大小的自动调整，以下是几种控件自动调整的方式：
HTML（六）——HTML表单和框架
m0_62701594的博客
07-23 833
HTML 表单用于收集用户的输入信息，是一个包含表单元素的区域HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。<form>元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。<label>元素用于为表单元素添加标签，提高可访问性。<input>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值