游戏版块

---

html布局介绍

                    
上面我们HTML部分的布局大致都讲完了，接下来我们的目的是了解星际大战的css布局
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 
首先按照顺序，我们可以看到最上方有个样式初始的
                        
初始样式的好处就是下面的不用每一次都重新打一遍，一些需要其他格式的在重新打
下面就是各板块的样式例如

像这一些常规的样式这里就不细讲都百度的到，
紧接着就是游戏介绍板块里面的样式这里用了一个有意思的东西


使用>用于定义某个板块下的某个元素里的某个样式，这段css的作用是定义
在show-desc里的li列表里的span
display 属性规定元素应该生成的框的类型为inline-block

                        
Font-size属性规定了元素字体大小
Color属性规矩了元素颜色
在接下来用到了css3

                        
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
这里用到了animation使用简写属性，将动画与 desc-group1元素绑定：15s 无限循环
linear:表示动画从头到尾的速度都是相同的

                        
                        
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

从时间轴来看从0%>6.666%>33.333%

                        
Rotate旋转方法，这里就只有角度rotate（x deg）旋转的角度
度数指的是元素相对中心原点进行旋转的度数，单位为deg。其中，deg是degree（度数）的缩写。
如果度数为正，则表示元素相对原点中心顺时针旋转；如果度数为负，则表示元素相对原点中心进行逆时针旋转。

                        
第一组动画，就是通过某个时间段时，添加css3里的属性来实现动画效果其他两组也是以此类推，

在往下看

                        
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
这就是实现将结束页面暂时隐藏的原因后面游戏结束在通过js更改z-index的值来实现结束页面显示。

下面放部分CSS源码：
                    
                    
                    
                    
                

工作人员

 
                    
作者：蔡昂轩
                    
信息录入:蔡昂轩