1.下拉菜單
CSS
<style>
*{
margin: 0;
padding: 0;}
a{text-decoration: none;
color: #fff;
font-size: 24px}
ul{
width: 1000px;
height: 60px;
line-height: 60px;
margin: auto;
background: pink;
list-style: none;
/*overflow: hidden;*/
}
li{
text-align: center;
width: 150px;
float: left;
}
.row:after{
content: "";
display: table;
clear: both;
}
a{
display: block;
}
a:hover{
background: #eee;
}
.menu{
position: relative;
}
.menuDrop{
position: absolute;
width: 150px;
background: deeppink;
display: none;
}
.menu:hover .menuDrop{
display: block;
}
</style>
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="">聯(lián)系克服</a></li>
</ul>
效果如下：
下拉菜單
2.border-radius
div{
width: 200px;
height: 40px;
background: pink;
/*border-radius 一個參數(shù)則是4個角都變化
4個參數(shù)的話4個參數(shù)分別是四個角從左上角開始順時針*/
border-radius:20px 20px 0 0;
}
3.box-shadow
div{
width: 100px;
height: 100px;
background: red;
margin: 100px;
/*box-shadow 陰影
參數(shù)1：水平偏移的位置
參數(shù)2：垂直偏移的位置
參數(shù)3：高斯模糊
參數(shù)4：陰影尺寸
參數(shù)5：顏色
inset 內(nèi)陰影*/
box-shadow: 0px 10px 10px 2px #44cef6 inset;
}
4.text-shadow
p{
/*文字陰影
參數(shù)1：水平偏移
參數(shù)2：垂直偏移
參數(shù)3：高斯模糊
參數(shù)4：顏色*/
text-shadow: 10px 10px 15px red;
}
5.文本省略
p{
text-overflow:ellipsis;
overflow: hidden;
/*white-space 文本是否換行
nowrap 不換行*/
white-space: nowrap;
}
6.transform
/*旋轉(zhuǎn)
transform:rotate(度數(shù))
偏移
translate(x,y)
translateX 水平偏移
translateY 垂直偏移
縮放
scaleX()水平縮放
scaleY()垂直縮放
scale(x,y)
scale()整體縮放
傾斜
skew(度數(shù))
skewX
skewY
*/
div{
width: 100px;
height: 100px;
background: red;
}
div:hover{
/*transform:rotate(45deg);*/
/*transform: translate(100px 100px);*/
/*transform:scale(0.5);*/
transform:skew(30deg);
}
7.垂直居中新方法
<style>
.parent{
width: 300px;
height: 300px;
background: red;
position: relative;
}
.child{
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
</style>
8.transition過渡
<style>
/*過渡要配合hover使用*/
div{
width: 100px;
height: 100px;
background: red;
/*transition: style time*/
transition:width 1s;
}
div:hover{
width: 200px;
}
</style>
- 例子
CSS
<style>
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 #eeeeee;
}
.img{
width: 304px;
height: 317px;
border: 1px solid #eee;
overflow: hidden;
}
img{
width: 304px;
height: 317px;
transition:all 1s;
}
img:hover{
transform:scale(1.5);
}
</style>
HTML
<div>
</div>
<div class="img">
<img src="../images/test.jpg" alt="">
</div>
9.animation
<style>
div{
width: 100px;
height: 100px;
background: red;
}
div:hover{
-webkit-animation: myAnimate 2s;
-o-animation: myAnimate 2s;
animation: myAnimate 2s;
}
@keyframes myAnimate {
0%{
width: 100px;
height: 100px;
}
20%{
width: 200px;
height: 200px;
background: yellow;
}
50%{
width: 300px;
height: 200px;
background: pink;
}
100%{
width: 100px;
height: 100px;
}
}
</style>
- 引用animate.css
<link rel="stylesheet" >
<div class="animated rollOut"></div>
10.checkbox美化
CSS
<style>
input{
display: none;}
label{
padding-left: 20px;
background: url("../images/off.png") no-repeat;
}
.check input:checked+label{
background: url("../images/on.png") no-repeat;
}
</style>
HTML
<div class="check">
<input type="checkbox" id="c">
<label for="c">請勾選</label>
</div>
11.not選擇器
CSS
<style>
/*parent下面的div不包含最后一個元素*/
.parent>div:not(:last-child){
color: red;
}
</style>
HTML
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
效果如下：
not選擇器
