HTML+css制作简单游戏界面

开学在即闲来无事在家做了一个简单的游戏开始界面，下面看看具体代码吧，其实非常的简单这里只用HTML和css做的静态页面。

HTML

	
		
		
		
		
	
	
		

			
			

				
				

					

						
					
					
用户昵称
					

						LV.1
					
					

						
					
				
				
				

					
					

					会员	
					
				
				
				

					

						

							
						
						

							
						
					
					

						

							
						
						

							
						
					
					

						

							
						
						

							
						
					
					

						
						

							首充
						
					
				
				
				
				

					

						
						

							好友
						
					
					

						
						

							信息
						
					
					

						
						

							好友动态
						
					
					

						
						

							设置
						
					
					

						
						

							更多
						
					
				
				
			
			
			
			

				

					

						

							
					           
							
						
						

							
							    
鼎足而立-三国
							
						
						

						    
						        
太平盛世-唐
						    
						
						

						    
						        
百花齐放-宋
						    
						
						

						    
						        
大疆无边-元
						    
						
						

						    
						        
八府巡按-明
						    
						
						

						    
						        
闭关自首-清
						    
						
						

						    
								
						    
						
					
				
				

					

						
						

							商城
						
					
					

						
						

							福利
						
					
					

						
						

							成就
						
					
					

						
						

							寻宝
						
					
					

						
						

							任务
						
					
				
			
			
			
			

				

					
					
游戏指南
				
				

					
					
游戏介绍
				
				

					
					
游戏技巧
				
				

					
				
			
			
		
	

public.css

*{
	padding: 0;
	margin: 0;
}
a{
	text-decoration: none;
}
ul,li,ol{
	list-style: none;
}
.clear{
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
.body{
	font-family: "microsoft yahei",verdana,"pingfang sc",simsun;
}
textarea{
	resize: none;
}
button,
input[type=button],
input[type=reset],
input[type=submit]
{
	cursor: pointer;
}

style.css

.Box{
	width: 1920px;
	height: 1080px;
	background: url(../img/box-GIF.gif);
	background-size: 100% 100%;
	margin-left: auto;
	margin-right: auto;
}
.box1{
	width: 1920px;
	height: 100px;
}
.box_admin{
	float: left;
	height: 100px;
	width: 280px;
}
.im img{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	float: left;
}
.box_admin p{
	font-size: 25px;
	padding-left: 130px;
	padding-top: 10px;
}
.wz {
	font-size: 20px;
	padding-top: 18px;
	float: left;
}
.im1 img{
	margin-top: 18px;
	width: 140px;
	height: 30px;
}
.box_member{
	width: 60px;
	height: 100px;
	float: left;
	margin-left: 20px;
}
.box_member img{
	width: 50px;
	height: 60px;
}
.member1 a{
	font-size: 23px;
	color: #f8ac09;
	line-height: 40px;
}
.box_energy{
	width: 760px;
	height: 100px;
	float: left;
	margin-left: 140px;
}
.enery1 ,
.enery2 ,
.enery3{
	width: 180px;
	height: 40px;
	margin-top: 16px;
	border-radius: 50px;
	border-color: #0000FF;
	border-style: solid;
	opacity: 0.9;
}
.enery1 ,.enery2,.enery3{
	float: left;
}
.enery2,.enery3{
	margin-left: 30px;
}
.en1 img{
	width: 40px;
	height: 40px;
	cursor: pointer;
	float: left;
}
.en2 img,
.en3 img,
.en4 img{
	width: 40px;
	height: 40px;
	float: right;
	cursor: pointer;
}
.enery4{
	width: 60px;
	height: 80px;
	float: right;
}
.enery4 img{
	width: 40px;
	height: 40px;
	margin-top: 15px;
	cursor: pointer;
}
.en5 a{
	font-size: 23px;
	color: #CC8800;
	line-height: 42px;
}
.box_message{
	width: 580px;
	height: 100px;
	float: right;
}
.M1,
.M2,
.M4{
	width: 60px;
	height: 100px;
	float: left;
}
.M2,
.M3
,.M4
{
	margin-left: 55px;
}
.M3{
	width: 100px;
	height: 100px;
	float: left;
}
.M5{
	width: 80px;
	height: 100px;
	float: right;
}
.M1 img
,.M2 img
{
	width: 50px;
	height: 60px;
}
.M3 img{
	width: 60px;
	height: 50px;
	margin-left: 18px;
	margin-top: 8px;
}
.M4 img,
.M5 img{
	width: 50px;
	height: 50px;
	margin-top: 8px;
}
.m1 a
,.m2 a
,.m3 a
,.m4 a
,.m5 a
{
	font-size: 23px;
	color: #CC8800;
	line-height: 35px;
}
.box2{
	width: 1920px;
	height: 800px;
}
.part2{
	width: 1650px;
	height: 800px;
	float: left;
}
.part2 ul {
    display: flex;
    padding-top: 260px;
    justify-content: space-evenly;
}
.flex-ct{
	align-items: center;
}
.part2 ul li {
    background: url(../img/part2-listbg.png) no-repeat;
    width: 150px;
    height: 300px;
    font-size: 35px;
	cursor: pointer;
    transition: all 1.5s;
}
@keyframes tan{
	0%{
		transform: translateY(0);
	}
	25%{
		transform: translateY(-200px);
	}
	50%{
		transform: translateY(0);
	}
	75%{
		transform: translateY(200px);
	}
	100%{
		transform: translateY(0);
	}
}

.part2 ul li:hover{
	animation: tan 3s;
}
.part2 >ul >li>a{
	width: 80px;
	height: 292px;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: center;
	-webkit-display:flex;
	flex-direction: column;
	justify-content: center;
	color: #000;
	font-size: 30px;
}
.part2 a > p:hover{
	color: #0000ff;
}
.part2 img{
	width: 60px;
	height: 60px;
}
.part3{
	width: 260px;
	height: 800px;
	float: right;
}
.case,
.case1,
.case2,
.case3,
.case4
{
	width: 120px;
	height: 100px;
	margin-left: auto;
}
.case{
	margin-top: 80px;
}
.case1,.case2,.case3,.case4{
	margin-top: 40px;
}
.case img
,.case1 img
,.case3 img
{
	width: 70px;
	height: 60px;
	margin-left: 20px;
}
.case2 img
,.case4 img{
	width: 60px;
	height: 60px;
	margin-left: 20px;
}
.word a
,.word1 a
,.word2 a
,.word3 a
,.word4 a{
	font-size: 25px;
	color: #CC8800;
	line-height: 35px;
	padding-left: 30px;
}
.box3{
	width: 1920px;
	height: 180px;
}
.foot1{
	width: 260px;
	height: 180px;
	margin-left: 50px;
	float: left;
}
.foot2
,.foot3{
	width: 260px;
	height: 180px;
	margin-left: 100px;
	float: left;
}
.foot1 img
,.foot2 img
,.foot3 img
{
	width: 80px;
	height: 100px;
	margin-top: 80px;
	float: left;
	margin-right: 20px;
}
.foot3 img{
	width: 100px;
	height: 80px;
}
.foot1 p
,.foot2 p
,.foot3 p{
	font-size: 32px;
	color: #CC8800;
	padding-top: 100px;
	cursor: pointer;
}
.foot4{
	width: 700px;
	height: 200px;
	float: right;
}
.foot4 img{
	width: 450px;
	height: 180px;
	margin-left: 250px;
}

下面附上页面结果:游戏-CSDN直播