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

这是我以前写的一个静态网页，算一个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文件在同一级，所以使用./引入图片（../ 代表上一级）

<navstyle="background-image: url(./image/pebg素材/bg_top.png); width: auto;height: 80px;padding-inline-start: 110px;"><table style="display: inline-block;"><trstyle="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><navstyle="background-image: url(./image/pebg素材/bg_top.png); width: auto;height: 80px;padding-inline-start: 110px;"><table style="display: inline-block;"><trstyle="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>

感谢观看！

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

HTML: 仿写一个财经类静态的网页
要求:仿写一个静态的网页,主要采用HTML+CSS+DIV的布局方式, 新建两个文件:demo.html.demo.css 图片素材:image.zip demo.html代码如下: <!doc ...
android sdk build-tools_从零开始仿写一个抖音App——视频编辑SDK开发(一)
本文首发于微信公众号--世界上有意思的事,搬运转载请注明出处,否则将追究版权责任.交流qq群:859640274. 大家好久不见,又有一个多月没有发文章了.不知道还有哪些读者记得我的从零开始仿写抖音 ...
从零开始仿写一个BiliBili客户端之编译ijkplayer
章节从零开始仿写一个B站客户端之-编译ijkplayer 从零开始仿写一个B站客户端之-抓包B站接口从零开始仿写一个B站客户端之-使用ijkplayer打造一个通用的播放器从零开始仿写一个B站客 ...
从零开始仿写一个抖音App——基于FFmpeg的极简视频播放器
本文首发于微信公众号--世界上有意思的事,搬运转载请注明出处,否则将追究版权责任.微信号:a1018998632,交流qq群:859640274 1.从零开始仿写一个抖音app--开始 4.从零开始仿 ...
从零开始仿写一个抖音App
点击上方"何俊林",马上关注,每天早上8:50准时推送真爱,请置顶或星标本文转载自公号开发者技术前线,原文:https://juejin.im/post/5b9e9bf1e51 ...
写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢添加评论分享按投票 ...
div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...
HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...

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

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

最新文章

热门文章