HTML+css制作简单游戏界面

最新推荐文章于 2024-03-29 15:43:18 发布

℡52Hz★

最新推荐文章于 2024-03-29 15:43:18 发布

阅读量3k

点赞数 2

文章标签： html css 游戏

本文链接：https://blog.csdn.net/qq_53541336/article/details/126627858

版权

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

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>漫溯五千年</title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="Box">
			<!-- 头部 -->
			<div class="box1">
				<!-- 用户部分 -->
				<div class="box_admin">
					<div class="im">
						<img src="img/pic.jpeg" >
					</div>
					<p>用户昵称</p>
					<div class="wz">
						LV.1
					</div>
					<div class="im1">
						<img src="img/box_admin_pic1.png" >
					</div>
				</div>
				<!-- 用户部分 end-->
				<div class="box_member">
					<img src="img/pic7.png" >
					<div class="member1">
					<a href="#">会员</a>	
					</div>
				</div>
				<!-- 升等级部分 -->
				<div class="box_energy">
					<div class="enery1">
						<div class="en1">
							<img src="img/pic2.jpeg" >
						</div>
						<div class="en2">
							<img src="img/pic3.png" >
						</div>
					</div>
					<div class="enery2">
						<div class="en1">
							<img src="img/pic2.jpeg" >
						</div>
						<div class="en3">
							<img src="img/pic4.png" >
						</div>
					</div>
					<div class="enery3">
						<div class="en1">
							<img src="img/pic2.jpeg" >
						</div>
						<div class="en4">
							<img src="img/pic5.png" >
						</div>
					</div>
					<div class="enery4">
						<a href="#"><img src="img/pic6.png" ></a>
						<div class="en5">
							<a href="#">首充</a>
						</div>
					</div>
				</div>
				<!-- 升等级部分 end-->
				<!-- 消息显示部分 -->
				<div class="box_message">
					<div class="M1">
						<img src="img/pic8.png" >
						<div class="m1">
							<a href="#">好友</a>
						</div>
					</div>
					<div class="M2">
						<img src="img/pic9.png" >
						<div class="m2">
							<a href="#">信息</a>
						</div>
					</div>
					<div class="M3">
						<img src="img/pic10.png" >
						<div class="m3">
							<a href="#">好友动态</a>
						</div>
					</div>
					<div class="M4">
						<img src="img/pic11.png" >
						<div class="m4">
							<a href="#">设置</a>
						</div>
					</div>
					<div class="M5">
						<img src="img/pic12.png" >
						<div class="m5">
							<a href="#">更多</a>
						</div>
					</div>
				</div>
				<!-- 消息显示部分 end-->
			</div>
			<!-- 头部 end-->
			<!-- 历史闯关部分 -->
			<div class="box2">
				<div class="part2">
					<ul class="flex-ct">
						<li>
							<a href="http://www.chrome.com" target="_blank">
					           <img src="img/pic22.png" >
							</a>
						</li>
						<li>
							<a href="http://www.chrome.com" target="_blank" >
							    <p>鼎足而立-三国</p>
							</a>
						</li>
						<li>
						    <a href="http://127.0.0.1:8848/%E5%94%90%E4%BB%A3/index.html" >
						        <p>太平盛世-唐</p>
						    </a>
						</li>
						<li>
						    <a href="http://www.chrome.com" target="_blank" >
						        <p>百花齐放-宋</p>
						    </a>
						</li>
						<li>
						    <a href="http://www.chrome.com" target="_blank" >
						        <p>大疆无边-元</p>
						    </a>
						</li>
						<li>
						    <a href="http://www.chrome.com" target="_blank" >
						        <p>八府巡按-明</p>
						    </a>
						</li>
						<li>
						    <a href="http://www.chrome.com" target="_blank" >
						        <p>闭关自首-清</p>
						    </a>
						</li>
						<li>
						    <a href="http://www.chrome.com" target="_blank" >
								<img src="img/pic22.png" >
						    </a>
						</li>
					</ul>
				</div>
				<div class="part3">
					<div class="case">
						<img src="img/pic13.png" >
						<div class="word">
							<a href="#">商城</a>
						</div>
					</div>
					<div class="case1">
						<img src="img/pic14.png" >
						<div class="word1">
							<a href="#">福利</a>
						</div>
					</div>
					<div class="case2">
						<img src="img/pic15.png" >
						<div class="word2">
							<a href="#">成就</a>
						</div>
					</div>
					<div class="case3">
						<img src="img/pic16.png" >
						<div class="word3">
							<a href="#">寻宝</a>
						</div>
					</div>
					<div class="case4">
						<img src="img/pic17.png" >
						<div class="word4">
							<a href="#">任务</a>
						</div>
					</div>
				</div>
			</div>
			<!-- 历史闯关部分 end-->
			<!-- 底部 -->
			<div class="box3">
				<div class="foot1">
					<img src="img/pic18.png" >
					<p>游戏指南</p>
				</div>
				<div class="foot2">
					<img src="img/pic19.png" >
					<p>游戏介绍</p>
				</div>
				<div class="foot3">
					<img src="img/pic20.png" >
					<p>游戏技巧</p>
				</div>
				<div class="foot4">
					<a href="#"><img src="img/pic21.png" ></a>
				</div>
			</div>
			<!-- 底部 end-->
		</div>
	</body>
</html>

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直播