# submime编辑器的讲解
在编辑器中输入 h1*3 按tab键可见到如下效果(显示3行h1标签):
```
<h1></h1>
<h1></h1>
<h1></h1>
```
## 自己在sublime中动手尝试以下几个语法:
* ! + tab键
* ul>li*5 + tab键
* p{内容}*3 + tab键
# 定位的讲解
**绝对定位**
* 相对于"相对定位"的div而移动
* 若不在相对定位的div内则相对于浏览器窗口移动
**相对定位**
* 相对于父div定位
demo1: 相对定位，相对于父div定位
```html
<style>
.div1{ /*父div*/
width:500px;
height:500px;
margin:0 auto;
background:#333;
}
.div2
{
width:100px;
height:100px;
position:relative; /*相对定位*/
left:100px;
top:150px;
background:#ccc;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
```
demo2: 绝对定位，div相对于屏幕定位
```html
<style>
div
{
width:300px;
height:300px;
position:absolute;
left:100px;
top:150px;
background:#ccc;
}
</style>
<body>
<div></div>
</body>
```
demo3: 绝对定位+相对定位，相对于"相对定位"的div而移动
```html
<style>
.div1{ /*父div*/
width:500px;
height:500px;
margin:0 auto;
background:#333;
}
.div2
{
width:300px;
height:300px;
position:relative; /*相对定位*/
left:100px;
top:150px;
background:#ccc;
}
.div3{
width:50px;
height:50px;
position:absolute;
left:10px;
top:15px;
background:#777;
}
</style>
<body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>
```
# css3属性讲解
自己需动手尝试，通过改变参数理解属性效果
旋转属性 ： transform: rotate(111deg); 旋转111度
尝试一下：http://www.runoob.com/try/try.php?filename=trycss3_transform1
圆角属性 ： border-radius: 30px;
尝试一下：http://www.runoob.com/try/try.php?filename=trycss3_border-radius1
规定动画：@keyframes
尝试一下： http://www.runoob.com/try/try.php?filename=trycss3_animation3
阴影属性：box-shadow
尝试一下：http://www.runoob.com/try/try.php?filename=trycss3_box-shadow
课堂练习1：奸笑
作业：跳动的心
!
