[TOC]
# 純grid
> 第一個為對比圖 div結構2層, 其他7個結構 div 三層

## 頁面布局 (此結構需三層div)
> 第一個為對比圖,與其他7個結構不一樣
```
<div class="container">
<div class="line">
<img src="images/1.png" />
<p>nihao小姐姐</p>
</div>
//div布局還需復制六個
<div class="line">
<div>
<img src="images/1.png" />
<p>nihao小姐姐</p>
</div>
</div>
~~
....X6 <div class="line">
~~
</div>
```
## css樣式
### 第一種
```
<style>
img {
width: 80px;
height: 80px;
}
.container {
margin: 100px;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: 200px 200px;
grid-gap: 1px;
}
.container .line {
// width,height 清除網格線重疊
width: 200px;
height: 200px;
border: 1px solid #999;
display: grid;
}
.line div {
text-align: center;
background:red;
justify-self: center;
align-self: center;
}
</style>
```
### 第二種
```
<style>
img {
width: 80px;
height: 80px;
}
.container {
margin: 100px;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: 200px 200px;
}
.container .line {
border: 1px solid #999;
display: grid;
//清除網格線重疊
margin-left: -1px;
margin-top: -1px;
}
.line div {
text-align: center;
background:red;
justify-self: center;
align-self: center;
}
</style>
```
# div加flex布局 只需倆層div

## 頁面布局同上
## css樣式
```
<style>
img {
width: 80px;
height: 80px;
}
.container {
margin: 100px;
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: 200px 200px;
}
.container .line {
border: 1px solid #999;
display: grid;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-left: -1px;
margin-top: -1px;
}
.line div {
text-align: center;
background:red;
justify-self: center;
align-self: center;
}
</style>
```
- 1.基本樣式
- 0.樣式初始化
- 1. 漸變色
- 2. hover問題
- 3. 陰影
- 4. 選擇器
- 5. border.畫邊線
- 6. 水平垂直居中
- 7.input 輸入框需要縮進
- 8.文字問題
- 2. 方法
- 1. 定位浮動和flex
- 1. 阮一峰
- 2. position
- 3. flex
- 2. bootstrap 3
- 3. sass語法
- 4.margin-top bug 解決方法
- 5. iconfont圖標
- 3. 動畫特效
- 特效總結
- 動畫
- css2d轉換
- 過渡
- 1. 入場從無到有
- 2. 兩面切換
- 3. 小三角及原理
- 4. 點擊圖片單獨顯示
- 5. 導航條吸頂
- 6. 進度條
- 7. animate效果 jquery
- 8.3D透視旋轉
- 4.grid布局
- 1.grid布局 網格居中對齊
- HTML
- 第一節、學習網站
- 第二節、封裝
- 第三節、快捷鍵使用