CSS书写规范:
影响布局的样式全部写在前面,可被继承的样式属性写在后面。如下:
{
display: block;
margin-bottom: 10px;
vertical-align: top;
line-height: 18px;
font-size: 16px;
color: red;
background: #fff;
}
单行文本溢出省略
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
实现效果:
清楚浮动
ul:after{
display: block;
content: ".";
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
滤镜模糊效果
效果图:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box-wrapper{
position: relative;
width: 400px;
height: 300px;
border: 1px solid #ccc;
}
.img{
margin: 75px auto;
width: 200px;
height: 150px;
}
.background{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -999;
filter: blur(4px); // 模糊效果
background: url(gitar.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="img">
<img src="gitar.jpg" alt="" width="200" height="150">
</div>
<div class="background"></div>
</div>
</body>
</html>
后续慢慢补充…….