网页前端大作业主界面（Html+CSS+JS+Axios）
2024-03-23 09:39:28
介绍一下本代码块实现的效果，本代码快只实现了仿照游戏平台设计的一个网页，导航栏中的跳转页面以及物品购物车的增删查改均有实现，需要的话可私聊 。表单验证区域未添加具体JS代码，单独增加了登录验证界面，喜欢打CSGO所以尝试写了这个网页，有不足请多多指教！首页HTML代码及CSS样式可参考
页面效果如下
（中间及下部中间区域为轮播图和图片滚动效果）
*以下为首页的代码*
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>CSGO网站主页</title><link rel="stylesheet" href="./css/index.css"><script src="js/index.js" charset="gb2312"></script><script src="js/comment.js" ></script></head><body ><div id="container"> <!-- 大框 --><table id="a111" CELLSPACING="0"><tr><td ><div class="lefttop"><img src="./photo/二维码1.jpg" alt="" width="185px" height="185px"><br><br><h2 class="leftma">完美世界电竞</h2><br><br><p class="leftmap">地 图 平 面 概 览</p><br><ul class="aa" ><li><a href="https://www.csgo.com.cn/hd/1610/info/map.html" id="map" target="_blank">炽 热 沙 城</a> 更新至12月10日</li><br><li><a href="https://www.csgo.com.cn/hd/1610/info/map.html" id="map" target="_blank">炼 狱 小 镇</a> 更新至12月10日</li><br><li><a href="https://www.csgo.com.cn/hd/1610/info/map.html" id="map" target="_blank">核 子 危 机</a> 更新至12月10日</li><br><li><a href="https://www.csgo.com.cn/hd/1610/info/map.html" id="map" target="_blank">殒 命 大 厦</a> 更新至12月10日</li><br><li><a href="https://www.csgo.com.cn/hd/1610/info/map.html" id="map" target="_blank">死 城 之 谜</a> 更新至12月10日</li><br><li><a href="https://www.csgo.com.cn/hd/1610/info/map.html" id="map" target="_blank">突 入 点 2</a> 更新至12月10日</li><br><li><a href="https://www.csgo.com.cn/hd/1610/info/map.html" id="map" target="_blank">古 堡 激 战</a> 更新至12月10日</li><br></ul><br><p class="leftmap">平台指南</p><br><ul class="aa"><li> <a href="#" id="map">设置中心</a> <br> 不清楚如何操作点击这里哦</li><br><li><a href="#" id="map">操作技巧</a><br> 不会的操作这里可以教会你</li><br><li><a href="#" id="map">键位设置</a><br>快来设置和职业哥一样的键位吧！</li><br><li><a href="#" id="map">客服中心</a><br>有问题找客服！更放心！</li><br></ul></div></td><td><!-- 1 头部--><div id="header"> <div id="logo"><img src="./photo/logo.jpg" alt="" width="300px" height="111px"></div> <!-- 1左 logo --><div id="select_search"><!-- 1右 搜索--><table height="80px" align="right" ><tr align="right"><td colspan="4"><select id="sel"><option selected>简体中文</option><option >繁体中文</option><option >English</option></select></td></tr><tr align="right" ><td><font size="4" ; style="font-weight: bold;">请输入您感兴趣的内容 :</font></td><td><input type="text" size="25" placeholder=" 2021斯德哥摩尔Major锦标赛"></td> <td><a href="https://www.baidu.com/" target="_blank"><input type="image" src="./photo/search logo.png" width="25px" height="23px"></a></td></tr></table></div></div><div class="solgan">"Welcome to CSGO website"</div><!-- 2 导航栏--><div id="nav"> <table ><td ><a href="index.html" class="daohang" style="color: rgb(219, 219, 219);" target="_blank">首页</a></td><td ><a href="game.html" class="daohang"style="color: rgb(219, 219, 219);"target="_blank">锦标赛</a></td><td ><a href="map.html" class="daohang"style="color: rgb(219, 219, 219);"target="_blank">地图攻略</a></td><td ><a href="toy.html" class="daohang"style="color: rgb(219, 219, 219);"target="_blank">道具教学</a></td><td ><a href="survey.html"class="daohang" style="color: rgb(218, 219, 219);"target="_blank">皮肤商城</a></td><td ><a href="join.html" class="daohang"style="color: rgb(219, 219, 219);"target="_blank">加入CSGO客服</a></td></table></div><!-- 3 图片轮播--><div id="bao"> <div id="photo"><img src="./photo/轮播1.jpg" ><img src="./photo/轮播2.jpg" ><img src="./photo/轮播3.jpg" ><img src="./photo/轮播4.jpg" ><img src="./photo/轮播5.jpg" ></div></div ><!-- 4 左中右--><div id="main"> <div id="left"> <!-- 4左 咨询--><img src="./photo/左.jpg" width="259px" height="60px"><ul><li><a href="http://www.imbatv.cn/appnews/app_news_v1/33834/share" target="_blank" style="color: rgb(172, 172, 166);">NAVI获得2021斯德哥尔摩冠军</a> 2021-12-10</li><li><a href="https://baijiahao.baidu.com/s?id=1711590042889689685&wfr=spider&for=pc" style="color: rgb(177, 177, 172);"target="_blank">新赛季 激流大行动？</a> 2021-12-10</li><li><a href="https://www.9game.cn/news/4128527.html" style="color: rgb(177, 177, 175);"target="_blank">沙城改版后如何适应中路</a> 2021-12-10</li><li><a href="https://www.bilibili.com/read/cv5652476/" style="color: rgb(175, 175, 173);"target="_blank">匪图变成警图怎么打？</a> 2021-12-10</li><li><a href="https://www.csgo.com.cn/article/details/20200401/221461.html" style="color: rgb(173, 173, 169);"target="_blank">新武器箱上线</a> 2021-12-10</li><li><a href="https://www.bilibili.com/read/cv13284877" style="color: rgb(172, 172, 169);"target="_blank">NAVI首次major夺冠</a> 2021-12-10</li></ul></div><div id="center"> <!-- 4中 图片滚动--><marquee onmouseover="this.stop()" onmouseout="this.start()"><img src="./photo/滚4.jpg" border="0" width="400px" height="230px"><img src="./photo/滚2.jpg" border="0" width="400px" height="230px"><img src="./photo/滚3.jpg" border="0" width="400px" height="230px"><img src="./photo/滚1.jpg" border="0" width="400px" height="230px"><img src="./photo/滚5.jpg" border="0" width="400px" height="230px"></marquee></div><div id="right"> <!-- 4右 登录--><img id="ri" src="./photo/欢迎登录.png" width="250" height="50px"><br/><form action="" id="fo"><table align="center" class="register"><tr><td>用户名:</td><td><input type="text" id="user01" maxlength="11" placeholder="请输入您的用户名" required/></td><td ><input type="submit" value="登录"></td></tr>
<tr><td><br></td>
</tr><tr id="fot"><td>密码:</td><td><input type="password" id="password01" maxlength="16" placeholder="请输入密码......" required/></td> <td><input type="reset"></td></tr></table></form> <div class="wjmmzczh"><a href="#" >忘记密码</a> <a href="#" id="zc">注册账号</a></div></div></div> <table><tr><td >
<div class="mid"><img src="./photo/完美.png" alt="" width="400" height="105px"><img src="./photo/二维码1.jpg" alt="" width="105px" height="105px"><p class="welcome">欢迎扫描完美世界平台官网添加<br>   以及点击其网址添加即可：<a href="https://pvp.wanmei.com/" class="welcome" style="color:rgb(142, 212, 212);" target="_blank">PREFECT WORLD</a></p> </div></td></tr></table><!-- 5 留言区--><div id="comment"> <p class="lyb"> 留 言 区 域（欢迎各位玩家留言提出建议）:</p> <hr size="2px" color="#b5b5b5" width="990px" align="left"><form><table align="center" style="color: rgb(155, 150, 146);"><tr style="padding-left: 7px;"><td style="font-weight: bold;"> 用户名：</td><td style="font-weight: bold;"><input type="text" id="n" placeholder="请输入用户名" style="font-weight: bold;"></td> <td style="font-weight: bold;"> Wechat：</td><td style="font-weight: bold;"> <input type="text" id="x" placeholder="请输入您的微信" style="font-weight: bold;"></td> <td style="font-weight: bold;"> 留言时间：</td><td style="font-weight: bold;"><input type="text" id="t" placeholder="请输入您的留言时间" style="font-weight: bold;"></td></tr><tr><td style="font-weight: bold;"> 留言内容：</td><td colspan="5"><textarea id="txt" cols="100" rows="3" placeholder="评论时，请遵纪守法并注意语言文明" style="font-weight: bold;"></textarea></td></tr> <tr > <td colspan="2"> <input type="submit" value="提交留言" onclick="check()" style="font-weight: bold;"></th> <td colspan="2"> <input type="reset" value="重置内容" style="font-weight: bold;"></th></tr></table></form></div><!-- 6 版权区--><div id="footer" > <p class="p1">NYIST © 2021 12.10 <span> 所有版权归2020级智能一班孟煜桐所有</span>,I best.</p><p class="p2">2021,版权所有 孟煜桐 2714694757</p></div></div></td><td><div class="righttop"><p class="righttext"><平台使用注意事项></p><br><ol class="bb" style="padding-left: 30px;"><li> 禁止发表辱骂不堪入耳言论</li><br><li>有问题请上报官方客服</li><br><li> 不允许私自改动平台源代码</li><br><li> 不准欺骗名义售卖武器皮肤</li><br><li> 必要时可以申请紧急求助</li><br></ol> <P class="righttext" style="font-size: 28px ;"><游戏枪支指南></P> <HR></HR><p class="righttext" style="color: rgb(167, 163, 157);">步枪</p><UL style="color: rgb(109, 134, 155);"><li>加利尔 AK-47 法玛斯</li><li>M4A4 M4A1消音 SCAR20</li><li>SG553 AUG SSG08</li><LI>GS3G1 AWP</LI></UL> <HR></HR><P class="righttext" style="color: rgb(167, 163, 157);">手枪</P><ul style="color: rgb(109, 134, 155);"><li>usp消音版 P2000 格洛克20</li><li>P250 FN57 Tec-9</li><li>CZ75自动手枪 R8左轮 ; 沙漠之鹰</li></ul> <HR></HR><P class="righttext" style="color: rgb(167, 163, 157);">冲锋枪</P><ul style="color: rgb(109, 134, 155);"><li>P90 MAC-10 UMP-45</li><li>MP7 PP-野牛 MP9</li><LI>MP5-SD</LI></ul> <P class="righttext" style="color: rgb(167, 163, 157);">霰弹枪/机枪</P><HR></HR><UL style="color: rgb(109, 134, 155);"><LI>截短霰弹枪 XM1014 新星</LI><li>MAG-7 内格夫 M249</li></UL></div>
</td>
</tr>
</table></body>
</html>
*以下为首页CSS样式*
/*index.css*/*{font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /*全文字体*/margin: 0;padding: 0;
}
#container{width:990px;/* margin:0 auto; padding:0 auto;font-size:12px; */
}.solgan{background-color: rgb(87, 1, 1);box-sizing: border-box;height: 60px;width: 990px;text-align: center;font-size: 30px;color: rgb(241, 237, 180);line-height: 60px;font-style: normal;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-weight: bold
}.lefttop{margin: 0px;box-sizing: border-box;padding: 50px;background-color: rgb(63, 63, 63);;
width: 295px;
height: 1328px;
}.leftmap{font-size: 25px;font-weight: bold;text-align: center;color: rgb(202, 201, 201);
}.aa{font-size: 10px;color:rgb(127, 133, 127);
}#map{font-size: 19px;font-weight: bold;color: rgb(146, 142, 142);
}#map:hover{color: rgb(235, 236, 146);
}.righttop{margin-top: 0px;/* padding-top: 60px; */
padding-top: 95px;
padding-left:20px;box-sizing: border-box;background-color: rgb(65, 63, 63);;
width: 295px;
height: 1328px;}.righttext{padding: 10px;color: rgb(136, 138, 138);font-size: 25px;font-weight: bold;
}.bb{font-size: 15px;font-weight: bold;color: rgb(167, 160, 136);}.lb{display: inline-block;width: 990px;height: 500px;
}#header{ /*1 头部*/width:990px;height:112px;background-image: linear-gradient(to right,rgb(168, 4, 4),rgb(86, 50, 247));
}
#logo{ /* 1左上 logo */width:300px;height:87px;float:left;/* background:#FFFFFF url("../photo/D77DE6C6AC3B62EAB38254A92B9CDB0C.jpg" ) no-repeat left bottom; */}
#select_search{ /* 1右 搜索*/width:690px;height:80px;font-size:20pxbackground #FFFFFF;float:left;padding-right: 6px;color: #adabab;margin-top: 35px;box-sizing: border-box;
}.leftma{color: rgb(147, 148, 148);font-size: 10pxfont-weight bold;
}#nav{ /* 2 导航栏 */clear: both;width:990px;height:40px;font-size:18px;font-weight: bold;background-image:url("../photo/导航背景.png")
}
#nav a:hover{color:#fff06a;text-decoration:none;
}.daohang{color: beige;
}#nav td{width:165px;height:40px;text-align:center;vertical-align:middle;
}
table{line-height:1.5em
}
#bao{ /* 3图片轮播 */width: 990px;height: 500px;overflow: hidden;
}
#photo { /*图片轮播*/width: 5940px;animation: switch 15s ease-out infinite;
}
#photo > img {float: left;width: 990px;height: 500px;
}
@keyframes switch {0%, 5% {margin-left: 0;}20%, 30% {margin-left: -990px;}40%, 55% {margin-left: -1980px;}60%, 75% {margin-left: -2970px;}85%, 100% {margin-left: -3960px;}
}#main{ /* 4 */width:990px;height:230px;border-bottom:5px ridge #DEDEDE;float:left;clear:both
}
#left{ /*4左*/width:260px;height:230px;background:#979796;float:left;font-size: 13px;font-weight: bold;background-image:url("../photo/left背景.png")/*border-right:10px solid #FFFFFF*/
}
a:link,a:visited,a:active{text-decoration:none;
}
a:link,a:visited,a:active{color:#828282;
}
ul{list-style:none;padding-left:10px;line-height:1.8em
}
#left li{border-bottom:1px dotted #009900;
}
#left a:hover{color:#Bf0000;text-decoration:underline
}
#center{ /*4中*/width:480px;height:230px;float:left;/* border-right:5px solid #FFFFFF; */background-image:url("../photo/滚底.jpg")
}#right{ /*4右 登录部分*/width:250px;height:230px;box-sizing: border-box;background:#EEFFDD;float:left;background-image:url("../photo/left背景.png")
}
.register{ /*登录*/font-size: 11px;font-weight: bold;color: rgb(189, 192, 194);flex: 40%;box-sizing: border-box;padding-left: 13px;padding-top: 20px;
}
.wjmmzczh{padding-left: 50px;padding-top: 20px;font-weight: bold;color: darkgray;
}
#zczh{padding-left: 50px;
}
#biaodan{padding-top: 20px;
}
h2{font-size:30px;font-family:宋体;font-style:bolder;color:#ffff00;margin:0
}.mid{ border: 0;height: 108px;width: 986px;background-color: rgb(33, 33, 39);
}.welcome{line-height: 30px;text-align: right;padding-right: 5px;margin: 1px;padding-bottom: 25px;font-weight: bold;font-size: 15px;color: rgb(83, 83, 83);display: inline-block;
}#comment{ clear:both;width:990px;height:210px;/* background-color:rgba(58, 57, 57, 0.667); */background-image: linear-gradient(to right,rgb(77, 64, 67),rgb(117, 118, 119));float:left
}.lyb{padding-top: 5px;padding-left: 6px;color: rgb(170, 170, 135);font-size: 20px;font-weight: bold;
}input{ vertical-align: middle;
} /*垂直居中*/
#footer{ /*6 尾部*/clear:both;text-align: center;width:990px;height: 60px;background: #330033;text-align: center;line-height: 10px;float:left
}
#footer p{ color: #ffff00;font-size: 15px;opacity: 0.7;
}
.p1{ margin: 0;padding: 15px 0 5px 0;
}
.p2{ margin: 0;padding: 5px 0;
}
#footer span{color: #aaffff;
}
网页前端大作业主界面（Html+CSS+JS+Axios）相关推荐
- 有趣的HTML实例（七） 注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编 ...
- 有趣的HTML实例（十五） 注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编码实现 i ...
- HTML期末大作业~ 明星林依晨（7页）带留言 学生网页设计作业源码(HTML+CSS+JS)
HTML期末大作业~ 明星林依晨(7页)带留言 学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
- HTML期末大作业~ 大话西游之大圣娶亲电影4页面 ~学生网页设计作业源码(HTML+CSS+JS)...
HTML期末大作业~ 大话西游之大圣娶亲电影4页面 ~学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网 ...
- HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS)...
HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS)
HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- HTML期末大作业~ 海贼王6页代码质量好~ 学生网页设计作业源码(HTML+CSS+JS)
HTML期末大作业~ 海贼王6页代码质量好~ 学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的 ...
- HTML期末大作业~ 大话西游之大圣娶亲电影4页面 ~学生网页设计作业源码(HTML+CSS+JS)
HTML期末大作业~ 大话西游之大圣娶亲电影4页面 ~学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网 ...
- HTML5期末大作业：网站——美丽家乡(南京介绍7个页面) 家乡文化介绍 学生DW网页设计作业源码(HTML+CSS+JS) ~学生dreamweaver网页设计作业成品
HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...
最新文章
- 【基础巩固篇】Java中的Buffer缓冲区探究
- 安装quagga 软路由
- ES6转ES5：Gulp+Babel
- python 2022/1/2
- windows快捷键十八式（win10）
- ABAP事物码SFW5里business function前面的双箭头图标是什么含义
- Istio 首次安全评估结果公布
- mysql timeout的单位_mysql的timeout-阿里云开发者社区
- 优酷视频如何在手机进行安全设置？
- sap模块介绍_SAP系统如何快速上手？
- 数据中心智能化运维之路
- 分类：基于规则的分类技术
- 我当 DevOps 的一年
- 2. Mac 命令行走代理服务器
- 俞渝年轻图片_组图：2007中国职场女性榜样-俞渝
- swiper 弹出图片_结合swiper使用图片懒加载
- 在vue3中使用jsx语法
- HTTP协议和资源下载
- 面向智慧教室物联网关键技术的研究与运用（待完成）
- Python语言程序设计第七章 - 组合数据类型 - 6.1
热门文章
- 华为鸿蒙3.0亮相，搭载设备产业链投资机会带来了POKERTIME129263？
- sum与countif、countifs函数套用
- 荣耀50手机系列正式发布，售价2399元起，主要竞争对手瞄准苹果
- AdaNet: Adaptive Structural Learning of Artificial Neural Networks
- 零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术...
- 声音能否内嵌在PPT中
- Ajax发送的put请求过程
- 字符型数据与数值型数据之间的转换
- ERROR: Cannot install keras==2.2.0 and tensorflow==1.14.0 because these package versions have confli
- 七、 标准型、基、基解、基可行解、可行基