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="">联系克服</a></li>
</ul>
效果如下：
下拉菜单
2.border-radius
div{
width: 200px;
height: 40px;
background: pink;
/*border-radius 一个参数则是4个角都变化
4个参数的话4个参数分别是四个角从左上角开始顺时针*/
border-radius:20px 20px 0 0;
}
3.box-shadow
div{
width: 100px;
height: 100px;
background: red;
margin: 100px;
/*box-shadow 阴影
参数1：水平偏移的位置
参数2：垂直偏移的位置
参数3：高斯模糊
参数4：阴影尺寸
参数5：颜色
inset 内阴影*/
box-shadow: 0px 10px 10px 2px #44cef6 inset;
}
4.text-shadow
p{
/*文字阴影
参数1：水平偏移
参数2：垂直偏移
参数3：高斯模糊
参数4：颜色*/
text-shadow: 10px 10px 15px red;
}
5.文本省略
p{
text-overflow:ellipsis;
overflow: hidden;
/*white-space 文本是否换行
nowrap 不换行*/
white-space: nowrap;
}
6.transform
/*旋转
transform:rotate(度数)
偏移
translate(x,y)
translateX 水平偏移
translateY 垂直偏移
缩放
scaleX()水平缩放
scaleY()垂直缩放
scale(x,y)
scale()整体缩放
倾斜
skew(度数)
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" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<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选择器
