HTML5+css+JS实现LOL官网动态页面DW、vscode页眉加轮播图

DW做LOL官网页面html5+css+JS页眉加轮播图

css部分

这里rgba颜色代码看自己喜欢更改

/*总体*/
	*{
   margin:0;padding:0;}
	html{
   background: url("001.jpg")no-repeat;}
	a{
   text-decoration:none;color:white;}
	ul{
   list-style:none;}
	/*页眉*/
	.jianbian{
   position: absolute;top:0px;left:0px;width:1902px;height: 120px;background: repeating-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0));}
	.tubiao{
   position:absolute;top:10px;left:275px;}
	.guanggao1{
   width:780px;height:100px;position: absolute;top:-8px;left:435px;}
	.guanggao1 li{
   width: 100px;text-align: center;padding:24px;float: left;}
		.font1{
   color: white;font-size: 19px;}
		.font2{
    color:#A4A4A4;font-size: 12px;}
	.guanggao2{
   width:1902px;height: 360px;background: rgba(0,0,0,0.6);}
	.guanggao2 li{
   text-align:center;font-size: 13px;margin:10px 0 10px 0;}
	.guanggao2 a:hover{
   color:#D3B529;}
		.gg1{
   position:absolute;top:2px;left:430px;}
		.gg2{
   position:absolute;top:2px;left:570px;}
		.gg3{
   position:absolute;top:2px;left:720px;}
		.gg4{
   position:absolute;top:2px;left:870px;}
		.gg5{
   position:absolute;top:2px;left:1020px;}
		.ggN{
   position: relative;right:5px;top:4px;}
	#gg-beijing{
   height: 280px;width: 1902px;position: relative;top:80px;}
	#guanggao1{
   display: block;}
	#guanggao2{
   display: none;}
	
	#biao1{
   position:absolute;top:17px;left:1260px;display: block;}
	#biao1-sc{
   font-size:14px;width:40px;background: white;text-align: center;position: absolute;top:50px;display: none;}
	#biao2{
   position:absolute;top:14px;left:1318px;display: block;}
	#biao2-zm{
   width:205px;height:170px;background: rgba(0,0,0,0.7);position: absolute;top:60px;left:-85px;display: none;}
		.biao2-zm-ma{
   margin:15px 20px 0 43px;}
		.biao2-zm-p{
   text-align: center; font-size:12px;color:#D3B529;}
		.biao2-zm-polo{
   position: absolute;top:120px;left:165px;}
	#geren{
   width: 300px;height: 60px;position:absolute;top:0px;left:1365px;display: block;}
		.biao3{
   position:absolute;top:6px;left:7px;z-index: 9999;}
		.denglu{
   font-size: 16.2px;color: white;position: absolute;top:27px;left:80px;z-index: 9999;}
	#geren-zx{
   width:310px;height:170px;position: absolute;top:0px;left:0px;display: none;}
		.geren-bj{
   font-size:10px;color: gray;text-align: center;background: rgba(0,0,0,0.7);height:105px;padding-top:100px;}
		.geren-jr{
   font-size:15px;color: white;text-align: center;background: black;height: 38px;line-height: 35px;}
		.lianjie1{
   color:antiquewhite;}
		.lianjie2{
   color:#daa520;}
		.lianjie3{
   color:#D3B529;}
		.chakan{
   width:160px;height: 37px;background:rgba(0,0,0,0.65);text-align: center;line-height: 35px;color: #DD975C;font-size: 14px;border-top:0.02px #514007 solid;border-right:0.02px #9D8629 solid;border-bottom:0.02px #9D801E solid;border-left:0.02px #837018 solid;position: absolute;top:290px;left:885px;}
		.banben{
   position:absolute;top:308px;left:1380px;}
		.banben1{
   color:gray;font-size:14px;}
		.banben2{
   color:#EAD679;font-size:13px;}
		.banben3{
   width:85px;height:23px;background:rgba(0,0,0,0.65);text-align: center;line-height: 22px;font-size: 12px;border-top:2px #514007 solid;border-right:2px #9D8629 solid;border-bottom:2px #D3B529 solid;border-left:2px #9D8629 solid;position: absolute;top:305px;left:1555px;}
	/*中部*/
	
		/*轮播图*/
		#outer{
   width:820px;height: 380px;position:absolute;top:400px;left: 275px;overflow: hidden;}
		#imgList{
   height: 340px;width: 500%;list-style