2048game

最新推荐文章于 2024-08-16 20:24:29 发布

eatandlearn

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量432

点赞数 1

分类专栏：网页html+css 文章标签： css css div html

本文链接：https://blog.csdn.net/eatandlearn/article/details/38441487

版权

网页html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

已经工作的师姐让我写个2048网页版的游戏练手，只能用js+html+css。然后这两天就开始写了。先把界面做好了。

因为很久没有用到这方面的知识，所以写起来比较慢。用了好几个小时才把东西全部写完。

在这里，记录一下css方面需要注意的知识点，display，last-child，div在页面中左右垂直居中margin，left等等，这里涉及到的属性比较多，border-radius属性。

界面是这个样子的

代码附上html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>2048</title>
<link href="css/2048.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript"> 

</script> 
</head>
<body>
<div class="twobig">
<div class="information">
	<h1 class="title">2048</h1>

	<div class="score-container">SCORE</div>
	<div class="best-container">BEST</div>	
	
</div>
<div class="square1">
<div class="square2">
	<div class="row">
		<div class="rowcell"></div>
		<div class="rowcell"></div>
		<div class="rowcell"></div>
		<div class="rowcell"></div>
	</div>
	<div class="row">
		<div class="rowcell"></div>
		<div class="rowcell"></div>
		<div class="rowcell"></div>
		<div class="rowcell"></div>
	</div>
	<div class="row">
		<div class="rowcell"></div>
		<div class="rowcell"></div>
		<div class="rowcell"></div>
		<div class="rowcell"></div>
	</div>
	<div class="row">
		<div class="rowcell"></div>
		<div class="rowcell"></div>
		<div class="rowcell"></div>
		<div class="rowcell"></div>
	</div>
</div>
	
</div>	
<div class="footer"></div> 
</div>

	
</body>
</html>

css代码

<style type="text/css">

.html,body{
	padding: 0px;
	margin: 0px;
	background-color: #faf8ef;
	color: #776e65;
	font-family:  "Microsoft YaHei", sans-serif, 'Microsoft Sans Serif','Microsoft JhengHei UI';
	font-size:18px;
	text-align: center;
}
.body{
	margin: 80px 0;
	background-color: #faf8ef;
}
.twobig{
	height: 650px;
	width: 500px;
	border: 1px ;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -250px;
}
.information{
	height: 150px;
	width: 500px;
	font-family: "Microsoft YaHei";
}
.title{
	margin-top: 16px;
	margin-left: 25px;
	font-size: 80px;
	font-weight: bold;
	margin: 0;
	display: block;
	float:left;
	color: #8f7a66;
}

.score-container{
	margin-left: 140px;
	margin-top: 16px;
	margin-right: 0;
	height: 75px;
	width:75px;
	background: #bbada0;
	float: left;
	font-size: 20px;
	font-weight: bold;
	color: #faf8ef;
	text-align: center;
	line-height: 50px;
	font-family: "Microsoft YaHei";

}
.best-container{
	margin-left: 10px;
	margin-top: 16px;
	margin-right: 0;
	height: 75px;
	width:75px;
	background: #bbada0;
	float: left;
	font-size: 20px;
	font-weight: bold;
	color: #faf8ef;
	text-align: center;
	line-height: 50px;
	font-family: "Microsoft YaHei";
}
.square1{
	height: 500px;
	width: 500px;
	border: 1px ;
	background: #bbada0;
	position: relative;
	border-radius:6px;
}
.square2{
	height: 470px;
	width: 470px;
	border: 1px;
	position: absolute;
	left: 50%;
	top:50%;	
	margin-left: -235px;
	margin-top: -235px;
	
	z-index: 1;
}
.row{
	width:470px;
	height: 107px;
	display: block;
	margin-bottom: 14px;
}
.row:last-child{
	margin-bottom: 0px;
}

.rowcell{
	width: 107px;
	height: 107px;
	margin-right: 14px;
	float: left;
	border-radius: 3px;
	background: rgba(238,228,218,0.35);

}
.rowcell:last-child{
	margin-right: 0;
}
.footer{
	height: 300px;
	width: 500px;
}
</style>

这里只是纯界面的显示，后面在涉及到js的时候，肯定会对界面代码进行更细的改动。不过还好现在显示出来了。