- 水平居中

1.行內(nèi)元素: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浮動實現(xiàn)，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 網(wǎng)站
• css tricks shape css形狀代碼
• iconfont.cn 圖標庫
• wallhaven 高清壁紙