css居中與佈局

- 水平居中

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 高清桌布