1.清除网页的外边距,让网页全屏显示
html,body{
margin:0;
padding:0;
}
2.把图片变为适合屏幕的全屏
img{
background-size:cover;
}
3.把图片放在中间
img{
background-position:center;
}
4.让横向滚动条消失
body{
overflow-x: hidden;
}
5.将一个div进行全屏居中,并带有阴影效果
div#dialog{
width: 300px;
height: 150px;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
margin: auto;
background-color: #fff;
border-radius: 5px;
box-shadow: 5px 5px 20px rgba(200,200,200,.7),-5px -5px 20px rgba(200,200,200,.7);
}
6.整个标签居中(相对于父标签)
div{
width:100px;
height:100px;
margin:0 auto;
}
7.改变子的间距与基本样式
div{
font-size:1.5em;
font-family:'微软雅黑';
font-weight: bold;
line-height: 10px;
}
8.动画(一)
先定义一个div和一个class
例如
#section1:hover{
width:200px;
background-color:rgba(255,34,56,0.5);
}
#section1{
-webkit-transition:width 2s,background-color 3s;
}
9.动画(二)
先定义一个div和class
例如
@keyframes section1
{
from{
width:20px;
}
to{
width:200px;
}
}
#section1{
-webkit-animation:section1 2s infinite(循环);
}
10.背景颜色渐变
img{
background-image:linear-gradient(left, red 100px, yellow 200px);
background-image:linear-gradient(left top, red 100px, yellow 200px);
}
但是为了兼容,有时候要写多个前缀,变成如下:
img{
background-image: -ms-linear-gradient(top,#fff,#dededc);
background-image: -moz-linear-gradient(top,#fff,#dededc);
background-image: -webkit-gradient(linear, left top, left bottom,from(#fff),to(#dededc));
background-image: -o-linear-gradient(top,#fff,#dededc);
background-image: linear-gradient(top,#fff,#dededc);
}