- NAVI获得2021斯德哥尔摩冠军 2021-12-10
- 新赛季 激流大行动？ 2021-12-10
- 沙城改版后如何适应中路 2021-12-10
- 匪图变成警图怎么打？ 2021-12-10
- 新武器箱上线 2021-12-10
- NAVI首次major夺冠 2021-12-10
网页前端大作业主界面（Html+CSS+JS+Axios）
介绍一下本代码块实现的效果，本代码快只实现了仿照游戏平台设计的一个网页，导航栏中的跳转页面以及物品购物车的增删查改均有实现，需要的话可私聊 。表单验证区域未添加具体JS代码，单独增加了登录验证界面，喜欢打CSGO所以尝试写了这个网页，有不足请多多指教！首页HTML代码及CSS样式可参考
页面效果如下
（中间及下部中间区域为轮播图和图片滚动效果）
*以下为首页的代码*
CSGO网站主页
"Welcome to CSGO website"
留 言 区 域（欢迎各位玩家留言提出建议）:
<平台使用注意事项>
- 禁止发表辱骂不堪入耳言论
- 有问题请上报官方客服
- 不允许私自改动平台源代码
- 不准欺骗名义售卖武器皮肤
- 必要时可以申请紧急求助
<游戏枪支指南>
步枪
- 加利尔 AK-47 法玛斯
- M4A4 M4A1消音 SCAR20
- SG553 AUG SSG08
- GS3G1 AWP
手枪
- usp消音版 P2000 格洛克20
- P250 FN57 Tec-9
- CZ75自动手枪 R8左轮 ; 沙漠之鹰
冲锋枪
- P90 MAC-10 UMP-45
- MP7 PP-野牛 MP9
- MP5-SD
霰弹枪/机枪
- 截短霰弹枪 XM1014 新星
- MAG-7 内格夫 M249
*以下为首页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;
}
