web小游戏 2048制作(一):网页布局
2016-02-24 22:10
435 查看
这是html结构
<!DOCTYPE html> <html> <head> <title>2048</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="2048.css"> <script type="text/javascript" src="jquery-1.12.1.js"></script> <script type="text/javascript" src="support2048.js"></script><!--存放一些辅助函数--> <script type="text/javascript" src="showanimation2048.js"></script><!--过场动画--> <script type="text/javascript" src="main2048.js"></script><!--主逻辑--> </head> <body> <div id="header"> <h1>2048</h1> <a href="javascript:newGame();" id="newGameButton">New Game</a> <p>score: <span id="score">0</span></p> </div> <!--创建包裹整个游戏区的div--> <div class="grid-container"> <!--为每个格子id编号 第一行第一个为 grid-cell-0-0 以此类推--> <div class="grid-cell" id="grid-cell-0-0"></div> <div class="grid-cell" id="grid-cell-0-1"></div> <div class="grid-cell" id="grid-cell-0-2"></div> <div class="grid-cell" id="grid-cell-0-3"></div> <div class="grid-cell" id="grid-cell-1-0"></div> <div class="grid-cell" id="grid-cell-1-1"></div> <div class="grid-cell" id="grid-cell-1-2"></div> <div class="grid-cell" id="grid-cell-1-3"></div> <div class="grid-cell" id="grid-cell-2-0"></div> <div class="grid-cell" id="grid-cell-2-1"></div> <div class="grid-cell" id="grid-cell-2-2"></div> <div class="grid-cell" id="grid-cell-2-3"></div> <div class="grid-cell" id="grid-cell-3-0"></div> <div class="grid-cell" id="grid-cell-3-1"></div> <div class="grid-cell" id="grid-cell-3-2"></div> <div class="grid-cell" id="grid-cell-3-3"></div> </div> </body> </html>这是它的css样式
#header { width: 500px; margin: 0 auto; text-align: center; } #header h1 { font-family: Arial; font-size: 60px; font-weight: bold; } #header #newGameButton { display: block; width: 100px; margin: 20px auto; background-color: #8f7a66; padding: 10px 10px; border-radius: 10px; font-family: Arial; color: white; text-decoration: none; } #header #newGameButton:hover { background-color: #9f8b77; } #header p { font-family: Arial; font-size: 25px; margin: 20px auto; } .grid-container { width: 460px; height: 460px; padding: 20px; margin: 50px auto; background-color: #bbada0; border-radius: 10px; position: relative; } .grid-cell { width: 100px; height: 100px; border-radius: 6px; position: absolute; background-color: #ccc0b3; } .number-cell{ border-radius: 6px; font-family: Arial; font-weight:bold; font-size:60px; line-height:100px; text-align:center; position:absolute; }
相关文章推荐
- Vijos P1199核弹危机
- 配置SSH证书登录验证
- Java程序员应该掌握哪些东西?
- Sqrt(x)
- 简单的自定义加载ProgressBar
- javascript数组 添加元素
- Android事件分发机制以及滑动冲突处理
- [译]使用注解处理器生成代码-2 注解处理器
- 时间管理的思考
- synchronized的使用方法
- Python在Windows系统下安装环境的搭建
- Java新手问题集锦汇总
- 欢迎使用CSDN-markdown编辑器
- 一道有关static的题目
- Hive 10、Hive的UDF、UDAF、UDTF
- GO语言下载、安装、配置
- C和指针读书笔记——部分简介
- JAVA SE 学习笔记
- FZU 1686 神龙的难题(重复覆盖)
- POJ 1651 Multiplication Puzzle