>### A.今天學什么？
#### 1.下拉菜單
- ##### 1.1實現重點
- 利用:after偽元素清除浮動
- 利用:hover+定位+display來實現下拉框
```
// html
<ul class="row">
<li class="menu">
<a href="">收藏夾</a>
<div class="menuDrop">
<a href="">收藏寶貝</a>
<a href="">收藏店鋪</a>
</div>
</li>
<li><a href="">賣家中心</a></li>
<li><a href="">聯系客服</a></li>
</ul>
// css
*{margin: 0;padding: 0}
a{
text-decoration: none;
color: #fff;
display: inline-block;
width: 100%;
}
ul{
width: 1000px;
margin: 0 auto;
background-color: pink;
list-style: none;
line-height: 50px;
}
li{
float: left;
width: 100px;
text-align: center;
}
/* 這里使用before還是會坍塌，要在后面加 */
.row:after{
content: "";
display: table;
/* 清除兩邊浮動
這樣after元素就能保證在下方，這樣能拉開父級的高度
*/
clear: both;
}
a:hover{
background-color: red;
}
.menu{
position: relative;
}
.menuDrop{
position: absolute;
width: 100px;
background-color: deeppink;
display: none;
}
.menu:hover .menuDrop{
display: block;
}
```
#### 2.陰影
- ##### 2.1盒子陰影
- box-shadow: offsetX offsetY blur size color;
水平偏移量，垂直偏移量;高斯模糊-越大越模糊; 陰影尺寸; 陰影顏色。inset 內陰影
```
// html
<div></div>
// css
div{
margin: 100px;
width: 100px;
height: 100px;
background-color: red;
}
div:hover{
/* box-shadow: offsetX offsetY blur size color; */
/* 水平偏移量，垂直偏移量; 高斯模糊-越大越模糊; 陰影尺寸; 陰影顏色 */
/* inset 內陰影 */
box-shadow: 5px 5px 10px 2px #333;
}
```
- ##### 2.1文字陰影
- text-shadow: offsetX offsetY blur color;
```
// html
<p>hello world</p>
// css
p{
/* text-shadow: offsetX offsetY blur color; */
text-shadow: 10px 10px 5px red;
}
```
#### 3.文本省略
- ##### 3.1注意事項
- 文本溢出以省略號結尾，white-space: nowrap;讓文本不換行。overflow: hidden;讓文本不會橫向溢出。text-overflow: ellipsis;以省略號結尾。
```
// html
<p> 小米商城直營小米公司旗下所有產品，囊括小米手機系列小米Note 3、小米8、小米MIX 2S，紅米手機系列紅米5 Plus、紅米Note 5A，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售后支持。小米商城直營小米公司旗下所有產品，囊括小米手機系列小米Note 3、小米8、小米MIX 2S，紅米手機系列紅米5 Plus、紅米Note 5A，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售后支持。</p>
// css
p{
/* 以省略號結尾 */
text-overflow: ellipsis;
/* 不設置這個，則會橫向擴大寬度 */
overflow: hidden;
/* 讓文本不換行，默認是換行的 */
white-space: nowrap;
}
```
#### 4.transform
- ##### 4.1旋轉
- rotate(度數deg)
- ##### 4.2位移
- transform:translateX() 水平方向偏移
- transform:translateY() 垂直方向偏移
- transform:translate(x,y)
- ##### 4.3縮放
- transform: scale(倍率) 整體縮放
- transform: scaleX(倍率) 水平縮放
- transform: scaleY(倍率) 垂直縮放
- ##### 4.4傾斜
- transform: skew(度數) 整體傾斜
- transform: skewX(度數) X軸傾斜
- transform: skewY(度數) Y軸傾斜
```
// html
<div></div>
// css
/*
1.旋轉
transform:rotate(度數deg)
2.位移
transform:translateX() 水平方向偏移
transform:translateY() 垂直方向偏移
transform:translate(x,y)
3.縮放
transform: scale(倍率) 整體縮放
transform: scaleX(倍率) 水平縮放
transform: scaleY(倍率) 垂直縮放
4.傾斜
transform: skew(度數) 整體傾斜
transform: skewX(度數) X軸傾斜
transform: skewY(度數) Y軸傾斜
*/
div{
width: 100px;
height: 100px;
background-color: red;
transform: skew(2deg);
}
div:hover{
/* 旋轉，中間的參數為度數 */
transform: rotate(30deg);
}
```
- ##### 4.5利用transform實現垂直水平居中
- 利用位移translate屬性
```
// html
<div class="parent">
<div class="child"></div>
</div>
// css
.parent{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.child{
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
```
#### 5.transition過渡
- ##### 5.1 transition: property duration timing-function delay;屬性 持續時間 軌跡 延遲
- 默認值為：transition:all 0 ease 0;
```
// html
<div></div>
// css
div{
width: 100px;
height: 100px;
background-color: red;
/* 動畫效果-默認為
transition:all 0 ease 0;
transition: property duration timing-function delay;
屬性 持續時間 軌跡 延遲
*/
transition: width 1ms;
}
div:hover{
width: 200px;
}
```
- ##### 5.2實現小米商品框動畫效果
- 結合box-shadow陰影
```
// html
<div></div>
// css
div{
margin: 100px;
width: 200px;
height: 350px;
border: 1px solid #333;
transition: all 1s;
}
div:hover{
transform: translateY(-20px);
box-shadow: 0 0 15px 10px #eee;
}
```
- ##### 5.3實現圖片放大效果
- 結合transform變化圖形效果
```
// html
<div>
<img src="../htmlCss04/images/banner.png" alt="" />
</div>
// css
div{
width: 1000px;
height: 300px;
border: 10px solid #eee;
overflow: hidden;
}
img{
width: 1000px;
height: 300px;
transition: all 1s;
}
img:hover{
transform: scale(2);
}
```
#### 6.animation動畫
- ##### 6.1介紹
- 通過@keyframes 函數名 {函數體}，函數體中包含各個狀態時觸發什么樣式，來實現動畫效果
```
// html
<div></div>
// css
div{
width: 100px;
height: 100px;
background-color: red;
}
div:hover{
animation: myAnimation 2s;
}
@keyframes myAnimation {
0%{
width: 100px;
height: 100px;
}
25%{
width: 200px;
height: 200px;
background-color: yellow;
}
50%{
width: 300px;
height: 200px;
background-color: pink;
}
100%{
width: 100px;
height: 100px;
background-color: red;
}
}
```
#### 7.checkbox和border-box
- ##### 7.1checked選擇器
- 當checkbox類型的input框被選中時，觸發
```
// html
<div class="search">
<input id="c" type="checkbox" />
<label for="c">請勾選</label>
</div>
// css
input{display: none}
label{
display: inline-block;
height: 36px;
line-height: 36px;
padding-left: 36px;
background: url("images/11.png") no-repeat;
}
/* checked被選中時，然后選中他的兄弟元素label */
.search input:checked + label{
background: url("images/12.png") no-repeat;
}
```
- ##### 7.2`div`的border-box屬性
- box-sizing: border-box;表示指定寬度和高度（最小/最大屬性）確定元素邊框box。也就是說，對元素指定寬度和高度包括padding和border的指定。內容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計算。
- 一個div里有4個div，指定每個小div的width為25%，加上border-box屬性之后，邊框+小div的寬等于25%。
```
// html
<div class="parent center">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
// css
.center{
margin-left: auto;
margin-right: auto;
}
.parent{
width: 1000px;
overflow: hidden;
background-color: pink;
border: 1px solid #333;
}
.parent div{
/* 指定寬度和高度（最小/最大屬性）確定元素邊框box。
也就是說，對元素指定寬度和高度包括padding和border的指定。
內容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計算
*/
box-sizing: border-box;
width: 25%;
height: 300px;
float: left;
border-right: 1px solid #333;
}
.parent div:last-child{
border: none;
}
```
