900字范文 > 游戏静态HTML网页作业作品大学生游戏介绍网页设计制作成品简单DIV CSS布局网站

游戏静态HTML网页作业作品大学生游戏介绍网页设计制作成品简单DIV CSS布局网站

时间：2023-12-15 16:04:30

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

H21XY 游戏资讯 bootstrap网页

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE HTML><html><head><script src="js/jquery.min.js"></script><link href="css/bootstrap.css" rel='stylesheet' type='text/css' /><script src="js/bootstrap.js"></script><link href="css/style.css" rel='stylesheet' type='text/css' /><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="Adventure Gaming Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /><script type="application/x-javascript"> addEventListener("load", function() {setTimeout(hideURLbar, 0); }, false); function hideURLbar(){window.scrollTo(0,1); } </script><script src="js/jquery.min.js"></script></head><body><div class="header"><div class="container"><div class="headr-left"><div class="social"><a ><i class="facebook"></i></a><a ><i class="twitter"></i></a><a ><i class="gplus"></i></a><a ><i class="pin"></i></a><a ><i class="youtube"></i></a></div><div class="search"><form><input type="submit" value=""><input type="text" value="" placeholder="搜索......"> </form></div><div class="clearfix"></div></div></div><div class="footer"><div class="container"><div class="footer-grids"><div class="col-md-3 ftr-info"><h3>关于我们</h3><p>但是票据的软喉。但是喉咙的可行性是从电线末端开始的一个悲伤的电线床。恐惧的颤抖，是代价的构成。</p></div><div class="col-md-3 ftr-grid"><h3>类别</h3><ul class="ftr-list"><li><a >行动</a></li><li><a >赛车</a></li><li><a >冒险</a></li><li><a >模拟</a></li><li><a >自行车</a></li></ul> </div><div class="col-md-3 ftr-grid"><h3>平台</h3><ul class="ftr-list"><li><a >个人电脑</a></li><li><a>Ps4</a></li><li><a >XBOX 360</a></li> <li><a >一机</a></li><li><a>PSP</a></li></ul> </div><div class="col-md-3 ftr-grid"><h3>信息</h3><ul class="ftr-list"><li><a >联系我们</a></li><li><a">愿望</a></li><li><a>站点地图</a></li><li><a>条款和条件</a></li> </ul> </div><div class="clearfix"></div></div></div></div><div class="copywrite"><div class="container"><p> © 冒险游戏。保留所有权利 | <a >由W3layouts设计</a></p></div></div></body></html>

🏠CSS样式代码

.header{background:#69d2e8;padding:1em 0;}.headr-left{float:left;width:65%;}.social{float:left;}.social i {width: 33px;height: 33px;background: url('../images/social.png') no-repeat 0px 0px;display: inline-block;margin:0 5px;}a i.facebook:hover,a i.twitter:hover,a i.gplus:hover,a i.pin:hover,a i.youtube:hover{opacity:0.8;}a i.facebook{background-position:-5px -6px;}a i.twitter{background-position:-46px -7px;}a i.gplus{background-position:-92px -8px;}a i.pin{background-position:-135px -8px;}a i.youtube{background-position:-180px -9px;}.search {position: relative;float: left;width:40%;margin-left:10em;}.search input[type="text"] {padding: 6px 10px 6px 0px;outline: none;color: #fff;background: none;border: none;width: 88%;position: relative;font-size: 0.9em;-webkit-appearance: none;margin-left: 3em;}.search input[type="submit"] {background: url('../images/search1.png') no-repeat 0px 1px;border: none;cursor: pointer;width: 24px;outline: none;position: absolute;height: 24px;top: 3px;left: 8px;}