# 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：奸笑
作業：跳動的心
!
