- 水平居中
1.行内元素:text-align:center
<p class="cen">居中</p> //html代码
.cen{ //css代码
text-align:center;
border:1px solid red;
}
2.块级元素
让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto
margin:0 auto
<div class="first"></div> //html
.first{ //css
width:20px;
height:20px;
margin:0 auto;
border:1px solid red;
}
- 垂直居中
1.设置padding-top与padding-bottom相等
<div class="first">first</div> //html
.first{ //css
width:200px;
padding-top:20px;
padding-bottom:20px;
border:1px solid red;
}
2.设置height与line-height相等
<div class="first">first</div> //html
.first{ //css
width:100px;
height: 50px;
line-height: 50px;
border:1px solid red;
}
- 左右布局
通过float浮动实现，float:left与float:right
<div class="first">leftcontent</div>
<div class="second">rightcontent</div>
.first{
width:100px;
height: 100px;
float:left;
border:1px solid red;
}
.second{
width:100px;
height: 100px;
float:right;
border:1px solid green;
}
- 左中右布局
思路：使用div将左中左浮，右侧右浮
<div class="out">
<div class="clearfix inner" style="float:left">
<div class="first">left</div>
<div class="first">middle</div>
</div>
<div class="third">right</div>
</div>
.out{
width:354px;
height:100px;
border:1px solid red;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
.first{
width:100px;
height: 100px;
float:left;
border:1px solid red;
}
.second{
width:100px;
height: 100px;
float:left;
border:1px solid green;
margin-left:25px;
}
.third{
width:100px;
height: 100px;
float:right;
border:1px solid green;
}
其他技巧：
google关键字：
- css shadow generator 生成阴影
- css gradient generator 渐变背景
- webpage free psd 免费psd文件
- dribbble 网站
- css tricks shape css形状代码
- iconfont.cn 图标库
- wallhaven 高清壁纸
