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

已于 2024-07-24 17:54:48 修改
阅读量148 收藏 1
点赞数 6
文章标签： html5 css css3 前端
于 2024-07-24 17:53:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71805303/article/details/140669213
版权

成长守护页面效果展示：

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

<body>
    <!-- 头部模块 -->
    <div class="gurd">
        <!-- 导航栏模块 -->
        <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="phone w-1200">
            <div class="phone-bg">
                <img src="./image/gurd01.png" alt="">
            </div>
            <div class="phone-text">
                <div class="text-left">
                    <h1>成长守护小程序</h1>
                    <p>成长守护小程序是腾讯成长守护面向未成年人及其家庭推出的，培养健康游戏和娱乐习惯的产品。我们致力于打造互信互动的亲子守护平台，倡导家长与孩子沟通，协商、互动，同时也提供必要管控工具来帮助孩子。
                    </p>
                </div>
                <div class="text-right">
                    <img src="./image/program-code-white.png" alt="">
                    <p>微信小程序：腾讯成长守护</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 主体模块 -->
    <div class="main">
        <div class="main-head w-1200">
            <div class="content cont1">
                <div class="box-num">
                    <img src="./image/gurd-icon(1).png" alt="">
                </div>
                <div class="box-center">
                    <h6>家庭共享游戏数据</h6>
                    <p>家长和孩子通过双向确认的邀请组建家庭，成员共享游戏信息，建立互信的和谐家庭关系。</p>
                </div>
                <div class="box-img">
                    <img src="./image/gurd-icon(2).png" alt="">
                </div>
            </div>
            <div class="content cont2">
                <div class="box-num">
                    <img src="./image/gurd-icon(4).png" alt="">
                </div>
                <div class="box-center">
                    <h6>守护工具</h6>
                    <p>在“账号绑定”的基础上，提供未成年人的姓名、身份证号信息。家长可以进入“守护模式”管理孩子的游戏情况。具体能力包括:限制登录时长、时段，禁止充值，一键禁玩等。</p>
                </div>
                <div class="box-img">
                    <img src="./image/gurd-icon(3).png" alt="">
                </div>
            </div>
            <div class="content cont3">
                <div class="box-num">
                    <img src="./image/gurd-icon(5).png" alt="">
                </div>
                <div class="box-center">
                    <h6>社区</h6>
                    <p>丰富科学的家庭教育资讯，有趣活泼的话题PK互动，专业科学的家长课堂，家长孩子一起学习进步，让家庭有序有爱。</p>
                </div>
                <div class="box-img">
                    <img src="./image/gurd-icon(6).png" alt="">
                </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部分源代码：

下面代码中的样式不包括导航栏样式和底部样式的代码：详细公共样式代码放在了文章顶部可以直接下载！

/* 页面头部模块 */
.gurd {
    height: 1000px;
    background: url(../image/pc-parent-banner.png) no-repeat -146px 0px;
    overflow: hidden;
}

.phone {
    position: relative;
}

.phone-bg {
    width: 485px;
    height: 930px;
    background: url(../image/phone-bg.png)no-repeat;
    box-sizing: border-box;
    margin-top: 140px;

}

.phone-bg img {
    width: 350px;
    margin: 73px 0px 0px 70px;
}


.phone-text {
    position: absolute;
    top: 430px;
    left: 420px;
    width: 810px;
    height: 360px;
    z-index: -1;
    padding: 20px 20px;
    box-sizing: border-box;
    /* box-shadow: 0px 0px 10px 5px rgba(128, 128, 128, 0.238); */
    border: 5px solid #b5f3f1;
    border-left: 0;
}

.text-left {
    padding-left: 30px;
    width: 400px;
}

.text-left h1 {
    font-size: 40px;
    font-weight: normal;
    padding: 70px 0px 30px 0px;
}

.text-right {
    width: 300px;
}

.text-left {
    float: left;
}

.text-right {
    float: right;
}

.text-right {
    padding: 50px;
    box-sizing: border-box;
}


/* 主题模块 */
.main-head {
    height: 800px;
}

.main-head .content {
    display: flex;
    height: 270px;
}

.main-head .content img {
    width: 400px;
}

.box-num {
    height: 200px;
    padding-top: 30px;
}

.content .box-center {
    width: 500px;
    height: 200px;
}

.content .box-center h6 {
    text-align: right;
    font-size: 40px;
    font-weight: normal;
}

.content .box-center p {
    margin-top: 15px;
    color: #888;
}

.content .box-img {
    width: 230px;
    height: 200px;
}

.cont2 .box-center h6 {
    text-align: left;
    font-size: 40px;
    font-weight: normal;
}

该网页为第二个网页，第一个网页首页已发布，可在我的资源中查看！

星河路漫漫
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
英雄联盟LOL静态HTML网页制作模板DⅣ+CSS学生网页作品代码游戏题材大学生网页设计作业下载
qq___365392777的博客
10-22 7027
HTML5期末大作业：动漫网站设计——迪斯尼公主(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满
和平精英官方网站静态页面制作与学习html+css保姆级教程
热门推荐
weixin_55355282的博客
11-09 1万+
新建html和两个css文件，一个嵌套另一个用于模块化管理index.css设置样式，public.css设置公用样式。
HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
01-07 571
HTML5期末大作业：游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢
html静态网站基于游戏网站设计与实现共计10个页面 (仿地下城与勇士游戏网页)
网页设计与制作 | HTML+CSS+JS
10-28 601
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
游戏网页制作 仿英雄联盟网页设计作业 HTML CSS游戏官网网页模板 大学生游戏介绍网站毕业设计 DW游戏主题网页模板下载 游戏娱乐网页成品代码 英雄联盟网页作品下载
专注于dreamweaver网页设计制作
05-29 344
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
王者荣耀静态页面头部代码设计（1）
qq_55928824的博客
12-28 584
王者荣耀静态页面头部代码设计（1）
网站静态页面制作：成长守护平台项目
07-20
成长守护平台项目源码，整个项目有五个网页组成：首页，成长守护，星星守护，守护共创，帮助。 里面有HTML源代码，CSS源代码，以及图片等资源。 五个页面共用的头部导航栏和页面底部模块都已放在common.css样式文件...
wordpress插件纯静态html网页页面生成插件simply-static
05-30
simply-static是一个简单的一键生成全站静态html文件的wordpress插件，支持生成或不生成指定url的html文件，生成文件的资源路径可选相对路径、绝对路径和脱机文件，html文件可以直接生成在服务器或zip压缩包下载。...
html静态页面源代码 静态网页制作代码【CSS+DIV】
06-27
html静态页面源代码 静态网页制作代码【CSS+DIV】 HTML静态页面(CSS+DIV) 这是期末老师HTML老师布置的。本来要求一个，但我做了三个。 主要是CSS+DIV做的（3个项目）。 对于页面的布局，代码的规格，命名，都很清晰...
奔梦向前-静态网页制作-2020-04-24-2.zip
04-24
奔梦向前：学编程其实很简单，html、css、JavaScript、html5、css3、vue、Canvas实现网页特效页面、新手入门学习、了解网页动画的制作、代码实现网页动态画面-静态网页制作-2020-04-24-2。
HTML5&CSS3网页制作：静态定位.pptx
05-31
HTML5&CSS3网页制作：静态定位 HTML5&CSS3网页制作是当前web开发的趋势，静态定位是CSS中一个基础yet重要的概念。通过本篇文章，我们将详细介绍静态定位在CSS中的应用和实现方式。 一、静态定位的定义 静态定位是...
HTML5的离线存储
weixin_46515434的博客
07-19 715
此外，随着Web技术的发展，新的缓存和离线存储技术（如Service Workers和Cache API）正在逐渐取代HTML5的离线缓存功能，因此开发者也可以考虑使用这些新技术来实现离线存储的需求。该文件包含一个或多个CACHE、NETWORK和FALLBACK部分，用于指定需要缓存的文件和资源、哪些文件需要在线访问、以及在无法访问某个资源时应使用的备用资源。在HTML文档的部分，通过添加一个指向缓存清单文件的标签（或使用manifest属性，具体取决于浏览器支持情况），将缓存清单与HTML文件相关联。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 254
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
DAY05 CSS
adminstate的博客
07-20 1066
CSS样式
动态美学：WebKit中CSS转换与动画的魔力
2401_85743969的博客
07-19 761
CSS转换允许我们对元素进行旋转、缩放、移动和倾斜等操作。：移动元素。rotate()：旋转元素。scale()：缩放元素。skew()：倾斜元素。matrix()：更复杂的转换组合。CSS动画允许我们为元素的属性变化定义动画效果。：指定需要动画效果的属性。：指定动画的持续时间。：指定动画的速度曲线。：指定动画的延迟时间。
CSS进阶探索：动画与过渡效果
最新发布
2301_79375313的博客
07-23 215
在掌握了CSS的基础知识后，进一步探索CSS的动画与过渡效果，可以让你的网页更加生动有趣。动画和过渡不仅可以增强用户的视觉体验，还能有效传达信息，提升交互的流畅性。本文将带你深入了解CSS动画与过渡的奥秘，让你的网页设计更上一层楼。
CSS Text(文本)
lly202406的博客
07-23 289
CSS中文本属性非常丰富，通过合理运用这些属性，可以创造出各种美观、实用的文本效果。希望本文能帮助您更好地掌握CSS文本属性的使用方法。
关于css中flex布局垂直居中失效问题的原因
zuo-yiran的博客
07-19 343
flex布局垂直居中失效原因
CSS 中border-radius 属性
HWL5679的博客
07-20 427
虽然border-radius不能直接接受八个值作为其属性的一部分，但通过使用斜杠分隔的水平和垂直半径，可以为每个角提供两个值（总共八个值，但按对分组），以实现更复杂的圆角效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值