已经工作的师姐让我写个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的时候,肯定会对界面代码进行更细的改动。不过还好现在显示出来了。