使用html简单仿写一个静态的绝地求生官网首页

最新推荐文章于 2023-08-02 10:20:24 发布
最新推荐文章于 2023-08-02 10:20:24 发布
阅读量766 收藏 10
点赞数 1
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunanxxx/article/details/129189672
版权

这是我以前写的一个静态网页，算一个html入门的简单的教程。刚刚开始学习前端可以用这个练手

1.首先在vscode新建一个文件夹，点击如图所示，点击蓝笔圈起的图标（左边的是新建文件）

起名为绝地求生。再给绝地求生这个文件夹里新建一个image文件夹。后面会用到的图片都放在这个文件夹里

 2.再点击刚刚蓝圈左边的图标，新建一个绝地求生.html文件（文件名最好是英文）

文件的后缀一定要是.html。然后点开这个文件，在里面进行下一步

 

3.新建的文件打开是空白的

我们在里面输入英文感叹号“!”后点击回车键 ，此时文件内会生成一个html的模板

 

蓝圈部分我们暂时不需要，可以删除

4.在body标签里自定义三个标签<header><section><footer>

5.首先我们先编辑官网的导航栏部分 ，写在header标签里的nav自命名标签中。这个导航栏我是使用table标签写的。

大家可以发现，我的标签开头都坠了很大一坨style的样式设置。如果你已经学习了css，那就可以吧这些style设置搬到模板标签<head>里使用。

如何加入图片：

将你下载好的图片，拖入上面建好的image文件夹中。使用<img src="  " alt="  ">进行引入。

我们的图片和.html文件在同一级，所以使用./引入图片（../ 代表上一级）

<nav
        style="background-image: url(./image/pebg素材/bg_top.png); width: auto;height: 80px;padding-inline-start: 110px;">
        <table style="display: inline-block;">
            <tr
                style="margin: auto;padding: 0px;text-align: center;font-size: 14px;font-family:宋体;font-weight: bold; text-align: center;">
                <td>
                     //引入图片
                    <img src="./image/pebg素材/logo_s.png" alt="logo">
                </td>
                <td style="width: 110px;">
                     //给文字加超链接
                    <a href="#" style="color:#ccc; text-decoration: none;">官网首页</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">绑定查询</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">国服预约</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">老兵绑定</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">游戏特色</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">社区APP</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">网吧认证</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc"></a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc"></a>
                </td>
                <td>
                    //设置一个按钮button
                    <button style="color: #fff;
                                    background-color: #e69800;
                                    display: inline-block;
                                    width: 142px;
                                    height: 40px;
                                    font-size: 14px;
                                    font-weight: bold;
                                    text-align: center;
                                    line-height: 40px;">进入官网</button>
                </td>
            </tr>
        </table>
    </nav>

 效果如下图所示：

6.接下来我们写官网首页里的动态图片的部分

 <section style="background-color: black;">
        <video autoplay muted loop style="width:100%;">
            <source src="./image/pebg素材/v1.mp4" type="video/mp4">
        </video>

        <video autoplay muted loop style="width:100%;">
            <source src="./image/pebg素材/v2.mp4" type="video/mp4">
        </video>

        <video autoplay muted loop style="width:100%;">
            <source src="./image/pebg素材/v3.mp4" type="video/mp4">
        </video>

        <video autoplay muted loop style="width:100%;">
            <source src="./image/pebg素材/v4.mp4" type="video/mp4">
        </video>
    </section>

也是将动态图保存到image里，红圈部分就是我们要用的动图，后缀是.mp4。

引入动图的标签就不能用img了，要使用<voide>,并且设置了：自动播放，静音播放，循环播放，即：autoplay， muted ，loop

效果如下图所示：

和官网的一样，图片是会循环播放的。

7.最后来做官网最下面的部分

 <footer style="background-color: black;width: 100%;height: 100px;">
        <table>
            <tr>
                <td>
                    <div>
                        <img src="./image/pebg素材/foot-dark.png" alt="" style="float: left;
                                                                                padding-inline-start: 160px;
                                                                                width: 180px;
                                                                                height: 35px;
                                                                                text-indent: -999em;
                                                                                overflow: hidden;
                                                                                margin: 10px;">
                    </div>
                </td>
                <td>
                    <div>
                        <img src="./image/pebg素材/pubg.jpg" alt="" >
                    </div>
                </td>
                <td>
                    <ul>
                        <li style="display: inline-block; color: #676767;font-size: 12px;font-family: 微软雅黑;">
                            <a target="_blank">腾讯互动娱乐</a>
                            <span>|</span>
                            <a target="_blank">服务条款</a>
                            <span>|</span>
                            <a target="_blank">隐私保护指引</a>
                            <span>|</span>
                            <a target="_blank">儿童隐私保护指引</a>
                            <span>|</span>
                            <a target="_blank">腾讯游戏招聘</a>
                            <span>|</span>
                            <a target="_blank">腾讯游戏客服</a>
                            <span>|</span>
                            <a target="_blank">游戏列表</a>
                            <span>|</span>
                            <a target="_blank">广告服务及商务合作</a>
                            <span>|</span>
                        </li>
                        <li style="display: block; color: #676767;font-size: 12px;font-family: 微软雅黑;list-style-type: none;">
                            <a target="_blank">腾讯互动娱乐</a>&nbsp;
                            <a target="_blank">腾讯互动娱乐</a>
                        </li>
                        <li style="display: block; color: #676767;font-size: 12px;font-family: 微软雅黑;">
                            <p>
                                COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED.
                            </p>
                        </li>

                    </ul>
                </td>
            </tr>
        </table>
    </footer>

 效果如下：

整体代码：

<!DOCTYPE html>
<html>

<head>
    <title>pebg</title>
</head>

<body style="margin: 0; padding: 0;">
    <header>
    <nav
        style="background-image: url(./image/pebg素材/bg_top.png); width: auto;height: 80px;padding-inline-start: 110px;">
        <table style="display: inline-block;">
            <tr
                style="margin: auto;padding: 0px;text-align: center;font-size: 14px;font-family:宋体;font-weight: bold; text-align: center;">
                <td>
                    <img src="./image/pebg素材/logo_s.png" alt="logo">
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">官网首页</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">绑定查询</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">国服预约</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">老兵绑定</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">游戏特色</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">社区APP</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc; text-decoration: none;">网吧认证</a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc"></a>
                </td>
                <td style="width: 110px;">
                    <a href="#" style="color:#ccc"></a>
                </td>
                <td>
                    <button style="color: #fff;
                                    background-color: #e69800;
                                    display: inline-block;
                                    width: 142px;
                                    height: 40px;
                                    font-size: 14px;
                                    font-weight: bold;
                                    text-align: center;
                                    line-height: 40px;">进入官网</button>
                </td>
            </tr>
        </table>
    </nav>
    </header>
    <section style="background-color: black;">
        <video autoplay muted loop style="width:100%;">
            <source src="./image/pebg素材/v1.mp4" type="video/mp4">
        </video>

        <video autoplay muted loop style="width:100%;">
            <source src="./image/pebg素材/v2.mp4" type="video/mp4">
        </video>

        <video autoplay muted loop style="width:100%;">
            <source src="./image/pebg素材/v3.mp4" type="video/mp4">
        </video>

        <video autoplay muted loop style="width:100%;">
            <source src="./image/pebg素材/v4.mp4" type="video/mp4">
        </video>
    </section>
    <footer style="background-color: black;width: 100%;height: 100px;">
        <table>
            <tr>
                <td>
                    <div>
                        <img src="./image/pebg素材/foot-dark.png" alt="" style="float: left;
                                                                                padding-inline-start: 160px;
                                                                                width: 180px;
                                                                                height: 35px;
                                                                                text-indent: -999em;
                                                                                overflow: hidden;
                                                                                margin: 10px;">
                    </div>
                </td>
                <td>
                    <div>
                        <img src="./image/pebg素材/pubg.jpg" alt="" >
                    </div>
                </td>
                <td>
                    <ul>
                        <li style="display: inline-block; color: #676767;font-size: 12px;font-family: 微软雅黑;">
                            <a target="_blank">腾讯互动娱乐</a>
                            <span>|</span>
                            <a target="_blank">服务条款</a>
                            <span>|</span>
                            <a target="_blank">隐私保护指引</a>
                            <span>|</span>
                            <a target="_blank">儿童隐私保护指引</a>
                            <span>|</span>
                            <a target="_blank">腾讯游戏招聘</a>
                            <span>|</span>
                            <a target="_blank">腾讯游戏客服</a>
                            <span>|</span>
                            <a target="_blank">游戏列表</a>
                            <span>|</span>
                            <a target="_blank">广告服务及商务合作</a>
                            <span>|</span>
                        </li>
                        <li style="display: block; color: #676767;font-size: 12px;font-family: 微软雅黑;list-style-type: none;">
                            <a target="_blank">腾讯互动娱乐</a>&nbsp;
                            <a target="_blank">腾讯互动娱乐</a>
                        </li>
                        <li style="display: block; color: #676767;font-size: 12px;font-family: 微软雅黑;">
                            <p>
                                COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED.
                            </p>
                        </li>

                    </ul>
                </td>
            </tr>
        </table>
    </footer>
</body>

</html>

 感谢观看！

guaishou♂xxx
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿写静态百度页面
weixin_46716059的博客
03-27 313
静态页面，纯html和css html： ​ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca.
html静态网站基于游戏网站设计与实现共计10个页面 (仿地下城与勇士游戏网页)
qq_38512570的博客
04-23 915
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
仿写西南民大官网静态首页简单记录
Process finished with exit code 0
04-22 516
敢问哪个学计算机的同学没想过黑学校官网改数据库呢 仿写学校官网以此来证明自己的能力呢？ 暑假以后就没再碰过前后端的东西了，网课十几天结束随堂的项目还没最后收尾 反正咕咕咕咕咕赶鸭子上架来整理一下写官网的学到的一些东西～ 本次仿写的官网地址：西南民族大学 工具：WebStorm 工期：一周 项目已上传GitHub，地址：-0- 首先分析整个网站的格式 然后是涉及到的相关技术点 最后是整个写下来的感受...
制作一个简单HTML游戏网页（HTML+CSS）仿龙之谷网络游戏官网
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
html+css的淘宝首页
09-11
html+css的淘宝首页，想只看代码的可以去我发表的文章里看，这里有图片素材和代码
小米商城仿写css+html纯静态
08-06
主页仿写
仿写王者荣耀官方静态网站-腾讯游戏（HTML+CSS）
weixin_74947024的博客
08-02 1176
我根据王者荣耀腾讯官方网站仿写的静态网站，
和平精英官方网站静态页面制作与学习html+css保姆级教程
weixin_55355282的博客
11-09 1万+
新建html和两个css文件，一个嵌套另一个用于模块化管理index.css设置样式，public.css设置公用样式。
HTML+css制作简单游戏界面
qq_53541336的博客
08-31 3036
开学在即闲来无事在家做了一个简单的游戏开始界面，下面看看具体代码吧，其实非常的简单这里只用HTML和css做的静态页面。
HTML5网站设计模板(静态)
09-26
简单易懂html、css、js网页。个人主页模板 。适合初学者学习的一个自己写的html页面，帮助大家了解html标签，帮助初学者学习CSS样式布局
大学html作业-仿写大学静态官网
02-09
仿写学校官网html设计 大学html作业设计
CSS+HTML仿写美团&淘宝网站首页静态页面.zip
最新发布
12-14
淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML...
基于Vue.js开发的仿写星巴克官网静态页面源码(升级版)+项目使用说明.zip
12-24
基于Vue.js开发的仿写星巴克官网静态页面源码(升级版)+项目使用说明.zip 项目介绍 这个项目基于 Vue.js 开发 ，引入了bootstrap作为CSS框架 【技术栈】 Vue + Vuex +Vue-Router 首先利用了Vue-Router的视图命名，...
html+css仿写简单网站
12-15
刚入门HTML+CSS，学习了一段时间后，为了练手，便写了这样一个静态的淘宝页面。就在刚才，终于完工。不得不说，内心有点小激动… 代码有点多，贴出来不太方便。如果大家有需要的话，直接去演示页面查看源代码扒取吧...
苹果官网页面仿写（纯html+css)
04-09
仿写苹果官网，纯html+css,零基础学了三天小成果，使用hbuilder软件
用html和css仿作小米官网（静态）
m0_70220004的博客
07-09 3014
使用html和css3 制作静态页面
html+css仿写NIKE官网静态页面
lucky_kundy的博客
03-27 2064
第一次较完整的网页，没有动画，纯静态，没有调式各种窗口大小，谷歌浏览器缩放90%为正常比例 部分效果图 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="view...
纯手工html+css实现静态游戏网首页（免费拿源码）
m0_60187384的博客
12-25 6682
效果图： 主要通过浮动、定位对网页进行布局，实现鼠标悬浮图片的偏移、字体的缩放、背景颜色改变、以及动画效果等相关功能。 html部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
热门推荐
余光的博客
09-20 2万+
作为一个前端开发，基础页面布局和样式是必备，我们拿电商具体（模块、丰富度）都足够 第一版本 这一无论从布局到样式到UI都较老（因为是自己入门时写的） 如果大家感兴趣可以下载下来看看。。。献丑了最近会抽时间改几版 代码下载 github仓库下载 或加我QQ565017805 第二版本（未完待续） 190921最近会抽时间重构一版电商网站的静态布局，布局思路会贴近仅了解HTML+CSS的朋友们...
用html仿写一个永劫无间官网
06-10
好的，以下是一个简单的永劫无间官网的 HTML 代码示例： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>永劫无间 - 官方网站</title> </head> <body> <header> <h1>永劫无间</h1> <nav> <ul> <li><a href="#">游戏首页</a></li> <li><a href="#">新闻资讯</a></li> <li><a href="#">游戏特色</a></li> <li><a href="#">下载中心</a></li> <li><a href="#">社区互动</a></li> <li><a href="#">充值中心</a></li> </ul> </nav> </header> <main> <section> <h2>游戏介绍</h2> <p>《永劫无间》是一款以东方神话为背景的多人在线冒险游戏，玩家可以选择不同的职业进行游戏，探索神秘的世界，体验多样化的游戏玩法。</p> <a href="#">了解更多</a> </section> <section> <h2>新闻资讯</h2> <ul> <li><a href="#">新闻1标题</a></li> <li><a href="#">新闻2标题</a></li> <li><a href="#">新闻3标题</a></li> <li><a href="#">新闻4标题</a></li> <li><a href="#">新闻5标题</a></li> </ul> <a href="#">更多资讯</a> </section> <section> <h2>游戏特色</h2> <ul> <li><a href="#"><img src="feature1.jpg" alt="特色1">特色1</a></li> <li><a href="#"><img src="feature2.jpg" alt="特色2">特色2</a></li> <li><a href="#"><img src="feature3.jpg" alt="特色3">特色3</a></li> <li><a href="#"><img src="feature4.jpg" alt="特色4">特色4</a></li> </ul> </section> </main> <footer> <p>© 2021 永劫无间</p> </footer> </body> </html> ``` 注意：由于版权问题，以上示例中的图片和链接仅为示意，实际使用时需要替换为合法的资源。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值