A.今天學到了什么
1.下拉菜單
a{
text-decoration: none;
color:#fff;
}
ul{
width: 1000px;
margin-left: auto;
margin-right: auto;
background: pink;
list-style: none;
line-height: 50px;
}
li{
float: left;
width: 100px;
text-align: center;
}
.row::after{
content: "";
display: table;
clear: both;
}
a:hover{
background: red;
}
a{ display: block;}
.menu{
position: relative;
}
.key{
position: absolute;
display: none;
background: red;
width: 100px;
}
.menu:hover .key{
display: block;
}
<ul class="row">
<li class="menu">
<a href="">收藏夾</a>
<div class="key">
<a href="">收藏寶貝</a>
<a href="">收藏店鋪</a>
</div>
</li>
<li><a href="">賣家中心</a></li>
<li><a href="">聯(lián)系客服</a></li>
</ul>
2.border-radius
調(diào)整邊框樣式
div{
width: 200px;
height: 50px;
background: red;
border-radius: 20px 40px 80px 150px;
}
3.box-shadow
3.1偏移位置
div{
width: 100px;
height: 100px;
background: red;
/* 1.水平偏移的位置
2.垂直偏移的位置
3.高斯模糊
4.陰影的尺寸
5.陰影的顏色 */
/* box-shadow: 20px 20px 20px 5px blue; */
box-shadow: 0px 0px 20px 5px rgba(68, 206, 246, 0.3) inset;
}
3.2文字陰影
p{
/* 1.水平偏移量
2.垂直偏移量
3.高斯模糊
4.陰影顏色 */
text-shadow: 10px 10px 5px red;
}
3.3.文本省略
/* 文本以省略號結(jié)尾 */
p{
text-overflow: ellipsis;
overflow: hidden;
/* 不換行 */
white-space: nowrap;
}
4.transform
4.1用法
div{
/* 位移 */
width: 100px;
height: 100px;
background: rebeccapurple;
/* 橫坐標偏移 */
/* transform: translateX(100px); */
/* 垂直方向偏移 */
/* transform: translateY(100px); */
/* translate(X,Y) */
/* transform: translateZ(100px); */
/* 縮放 */
/* transform: scale(x,y); */
/* transform: scaleX(); */
/* transform: scale(2); */
/* 傾斜 */
transform: skew(30deg);
}
div:hover{
/* 旋轉(zhuǎn) */
transform: rotate(30deg);
}
4.2實現(xiàn)水平垂直居中
.parent{
width: 300px;
height: 300px;
background: rebeccapurple;
position: relative;
}
.child{
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
5.transition
div{
/* 過渡 */
width: 100px;
height: 100px;
background: red;
/* 傳參順序：樣式 時間 */
transition: width 4s;
}
div:hover{
width: 200px;
}
6.transition和tranform綜合使用
div{
width: 200px;
height: 350px;
margin-top: 100px;
border:1px solid #333;
transition: all 2s;
}
div:hover{
transform:translateY(-20px);
box-shadow: 0 0 15px 10px #eee;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
transition: all 1s;
overflow: hidden;
}
img{
width: 100px;
height: 100px;
}
div:hover{
transform: scale(1.5);
}
7.animation
漸放效果
<link rel="stylesheet"
>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
div:hover{
animation: myAnimate 2s;
}
@keyframes myAnimate{
0%{
width: 100px;
height: 100px;
}
20%{
width: 200px;
height: 200px;
background: yellow;
}
50%{
width: 300px;
height: 300px;
background: blue;
}
100%{
width: 100px;
height: 100px;
background: red;
}
}
</style>
8.效果網(wǎng)頁
<link rel="stylesheet"
>
<style>
div{
width: 100px;
/* height: 100px; */
}
</style>
9.切換原理
input {
display: none;
}
.checkbox label {
background: url("images/off.png") no-repeat;
padding-left: 20px;
}
.checkbox>input:checked+label {
background: url("images/on.png") no-repeat;
}
<div class="checkbox">
<input type="checkbox" id="c">
<label for="c">請選擇</label>
</div>
10.border邊框
.parent{
width: 1000px;
height: 300px;
overflow: hidden;
background: skyblue;
margin-left: auto;
margin-right: auto;
border: 1px solid #333;
}
.parent>div{
box-sizing: border-box;
width: 25%;
height: 300px;
float: left;
}
.parent>div:not(:last-child){
border-right: 1px solid #333;
}
11.選擇器
/* 選中父元素的第一個子元素 */
div>P:first-child{
color: red;
}
/* 選中父元素下的最后一個子元素 :last-child */
/* 不包含某個子元素 ：not() */
