>### 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;
}
```
