介绍一下本代码块实现的效果，本代码快只实现了仿照游戏平台设计的一个网页，导航栏中的跳转页面以及物品购物车的增删查改均有实现，需要的话可私聊 。表单验证区域未添加具体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:20px
background #FFFFFF;
float:left;
padding-right: 6px;
color: #adabab;
margin-top: 35px;
box-sizing: border-box;
}
.leftma{
color: rgb(147, 148, 148);
font-size: 10px
font-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;
}
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
