日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS精髓：這些布局你都學(xué)廢了嗎？

 前言

成都創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為廣宗企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)，廣宗網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

最近忙里偷閑，給自己加油充電的時(shí)候，發(fā)現(xiàn)自己腦海中布局這塊非常的凌亂混雜，于是花了一些時(shí)間將一些常用的布局及其實(shí)現(xiàn)方法整理梳理了出來(lái)，在這里，分享給大家。

單列布局

單列布局是最常用的一種布局，一般是將一個(gè)元素作為容器，設(shè)置一個(gè)固定的寬度，水平居中對(duì)齊。

單列布局一般有兩種形式：

(圖片來(lái)源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一欄布局

一欄布局頭部、內(nèi)容、底部寬度一致

效果圖

代碼實(shí)現(xiàn)

html

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

css

 
 
 
 
    
  
  
  
  
  1. header,footer{ 
    2. 
  
  
  
  
  2.     width: 1200px; 
    3. 
  
  
  
  
  3.     height: 100px; 
    4. 
  
  
  
  
  4.     margin: 0 auto; 
    5. 
  
  
  
  
  5.     background: black; 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. main{ 
    8. 
  
  
  
  
  8.     width: 1200px; 
    9. 
  
  
  
  
  9.     height: 600px; 
    10. 
  
  
  
  
  10.     background: red; 
    11. 
  
  
  
  
  11.     margin: 0 auto; 
    12. 
  
  
  
  
  12. } 
    13.

一欄布局(通欄)

一欄布局(通欄)頭部和底部寬度一致，占滿整個(gè)頁(yè)面，中間內(nèi)容區(qū)域?qū)挾容^小不占滿屏幕。

效果圖

代碼實(shí)現(xiàn)

html

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

css

 
 
 
 
    
  
  
  
  
  1. header,footer{ 
    2. 
  
  
  
  
  2.     width: 100%; 
    3. 
  
  
  
  
  3.     height: 100px; 
    4. 
  
  
  
  
  4.     background: black; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. main{ 
    7. 
  
  
  
  
  7.     width: 1200px; 
    8. 
  
  
  
  
  8.     height: 600px; 
    9. 
  
  
  
  
  9.     background: red; 
    10. 
  
  
  
  
  10.     margin: 0 auto; 
    11. 
  
  
  
  
  11. } 
    12.
  • 單列布局是最為基礎(chǔ)和簡(jiǎn)單的一種，實(shí)現(xiàn)方法并不局限于以上兩種，大家可自由發(fā)揮，找到更多的方法來(lái)實(shí)現(xiàn)。

2列布局

2列布局的使用頻率也非常高，其實(shí)現(xiàn)效果主要就是將頁(yè)面分割成左右寬度不等的兩列。一般寬度較小的一列會(huì)設(shè)置為固定寬度，作為側(cè)邊欄之類的，而另一列則充滿剩余寬度，作為內(nèi)容區(qū)。

在后臺(tái)管理系統(tǒng)及api文檔中使用較為廣泛。

效果圖

先來(lái)看看效果：

代碼實(shí)現(xiàn)

實(shí)現(xiàn)兩列布局的方法有很多，這里主要介紹兩種方法。

calc函數(shù)

calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。實(shí)現(xiàn)思路很簡(jiǎn)單，側(cè)邊欄寬度固定，設(shè)置絕對(duì)定位，使其脫離文檔流，內(nèi)容區(qū)域通過(guò)calc()函數(shù)計(jì)算剩余寬度并設(shè)置寬度，再加一個(gè)margin-left，值為側(cè)邊欄的寬度。

代碼如下：

html
 
    •  

     css 

     
 
 
 
      
  
  
  
  
    1. *{ 
      2. 
  
  
  
  
    2.     margin: 0; 
      3. 
  
  
  
  
    3.     padding: 0; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5. body,html{ 
      6. 
  
  
  
  
    6.     width: 100%; 
      7. 
  
  
  
  
    7.     height: 100%; 
      8. 
  
  
  
  
    8. } 
      9. 
  
  
  
  
    9. .slider,.main{ 
      10. 
  
  
  
  
    10.     height: 100%; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. .slider{ 
      13. 
  
  
  
  
    13.     position: absolute; 
      14. 
  
  
  
  
    14.     left: 0; 
      15. 
  
  
  
  
    15.     top: 0; 
      16. 
  
  
  
  
    16.     width: 100px; 
      17. 
  
  
  
  
    17.     background: black; 
      18. 
  
  
  
  
    18. } 
      19. 
  
  
  
  
    19. .main{ 
      20. 
  
  
  
  
    20.     width: calc(100% - 100px); 
      21. 
  
  
  
  
    21.     background: red; 
      22. 
  
  
  
  
    22.     margin-left: 100px; 
      23. 
  
  
  
  
    23. } 
      24.

    flex屬性

    通過(guò)flex屬性實(shí)現(xiàn)思路也很簡(jiǎn)單，將父元素設(shè)置為flex，側(cè)邊欄寬度固定，內(nèi)容區(qū)域設(shè)置flex:1即可充滿剩余區(qū)域。

    代碼如下：

    html
     
    •  

     css 

     
 
 
 
      
  
  
  
  
    1. *{ 
      2. 
  
  
  
  
    2.     margin: 0; 
      3. 
  
  
  
  
    3.     padding: 0; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5. body,html{ 
      6. 
  
  
  
  
    6.     width: 100%; 
      7. 
  
  
  
  
    7.     height: 100%; 
      8. 
  
  
  
  
    8. } 
      9. 
  
  
  
  
    9. body{ 
      10. 
  
  
  
  
    10.     display: flex; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. .slider,.main{ 
      13. 
  
  
  
  
    13.     height: 100%; 
      14. 
  
  
  
  
    14. } 
      15. 
  
  
  
  
    15. .slider{ 
      16. 
  
  
  
  
    16.     width: 100px; 
      17. 
  
  
  
  
    17.     background: black; 
      18. 
  
  
  
  
    18. } 
      19. 
  
  
  
  
    19. .main{ 
      20. 
  
  
  
  
    20.     flex: 1;    
      21. 
  
  
  
  
    21.     background: red; 
      22. 
  
  
  
  
    22. } 
      23.

    3列布局

    3 列布局在日常開(kāi)發(fā)中使用頻率也是很高的，其按照左中右的順序進(jìn)行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應(yīng)，能根據(jù)屏幕大小做響應(yīng)。

    效果圖

    還是先來(lái)看看效果圖

    代碼實(shí)現(xiàn)

    三列布局的實(shí)現(xiàn)方法也很多，這里主要介紹兩種(雙飛翼布局、圣杯布局、flex布局)

    在介紹雙飛翼布局和圣杯布局之前要先說(shuō)一下margin設(shè)置負(fù)值的作用：

    當(dāng)margin的值設(shè)為負(fù)值的時(shí)候，元素會(huì)對(duì)應(yīng)的像那個(gè)放向移動(dòng)，比如margin-left為負(fù)值，元素則會(huì)左移

    雙飛翼布局

    代碼如下：

    html

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.             中間 
      5. 
  
  
  
  
    5.         
     
  •     
    •  
  •      
  •         左邊 
  •     
    •  
  •      
  •         右邊 
  •     
    •  
  •  

    css 

     
 
 
 
      
  
  
  
  
    1. * { 
      2. 
  
  
  
  
    2.     margin: 0; 
      3. 
  
  
  
  
    3.     padding: 0; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. body, 
      7. 
  
  
  
  
    7. html { 
      8. 
  
  
  
  
    8.     width: 100%; 
      9. 
  
  
  
  
    9.     height: 100%; 
      10. 
  
  
  
  
    10. } 
      11. 
  
  
  
  
    11. div{ 
      12. 
  
  
  
  
    12.     height: 100%; 
      13. 
  
  
  
  
    13. } 
      14. 
  
  
  
  
    14. .main>div { 
      15. 
  
  
  
  
    15.     float: left; 
      16. 
  
  
  
  
    16. } 
      17. 
  
  
  
  
    17.  
      18. 
  
  
  
  
    18. .left { 
      19. 
  
  
  
  
    19.     width: 200px; 
      20. 
  
  
  
  
    20.     background: red; 
      21. 
  
  
  
  
    21.     margin-left: -100%; 
      22. 
  
  
  
  
    22. } 
      23. 
  
  
  
  
    23.  
      24. 
  
  
  
  
    24. .right { 
      25. 
  
  
  
  
    25.     width: 200px; 
      26. 
  
  
  
  
    26.     background: blue; 
      27. 
  
  
  
  
    27.     margin-left: -200px; 
      28. 
  
  
  
  
    28. } 
      29. 
  
  
  
  
    29.  
      30. 
  
  
  
  
    30. .middle { 
      31. 
  
  
  
  
    31.     width: 100%; 
      32. 
  
  
  
  
    32.     background: yellow; 
      33. 
  
  
  
  
    33.  
      34. 
  
  
  
  
    34. } 
      35. 
  
  
  
  
    35.  
      36. 
  
  
  
  
    36. .content { 
      37. 
  
  
  
  
    37.     margin-left: 200px; 
      38. 
  
  
  
  
    38.     margin-right: 200px; 
      39. 
  
  
  
  
    39. } 
      40.

    圣杯布局

    代碼如下:

    html

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     中間中間中間中間中間中間中間后
     
  •     左邊
    •  
  •     右邊
    •  
  •  

    • css 

     
 
 
 
      
  
  
  
  
    1. * { 
      2. 
  
  
  
  
    2.     margin: 0; 
      3. 
  
  
  
  
    3.     padding: 0; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. .main { 
      7. 
  
  
  
  
    7.     height: 200px; 
      8. 
  
  
  
  
    8.     padding: 0 150px 0 200px; 
      9. 
  
  
  
  
    9.     background: greenyellow; 
      10. 
  
  
  
  
    10.     *zoom: 1; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. .left, 
      14. 
  
  
  
  
    14. .center, 
      15. 
  
  
  
  
    15. .right { 
      16. 
  
  
  
  
    16.     float: left; 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19. .center { 
      20. 
  
  
  
  
    20.     width: 100%; 
      21. 
  
  
  
  
    21.     height: 200px; 
      22. 
  
  
  
  
    22.     background: red; 
      23. 
  
  
  
  
    23. } 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25. .left { 
      26. 
  
  
  
  
    26.     width: 200px; 
      27. 
  
  
  
  
    27.     height: 200px; 
      28. 
  
  
  
  
    28.     background: yellow; 
      29. 
  
  
  
  
    29.     margin-left: -100%; 
      30. 
  
  
  
  
    30.     position: relative; 
      31. 
  
  
  
  
    31.     left: -200px; 
      32. 
  
  
  
  
    32. } 
      33. 
  
  
  
  
    33.  
      34. 
  
  
  
  
    34. .right { 
      35. 
  
  
  
  
    35.     width: 150px; 
      36. 
  
  
  
  
    36.     height: 200px; 
      37. 
  
  
  
  
    37.     background: gainsboro; 
      38. 
  
  
  
  
    38.     margin-left: -150px; 
      39. 
  
  
  
  
    39.     position: relative; 
      40. 
  
  
  
  
    40.     left: 150px; 
      41. 
  
  
  
  
    41. } 
      42.

    flex布局

    代碼如下:

    html

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     左邊定寬 
      3. 
  
  
  
  
    3.     中間自適應(yīng) 
      4. 
  
  
  
  
    4.     右邊定寬 
      5. 
  
  
  
  
    5.  
      6.

    css 

     
 
 
 
      
  
  
  
  
    1. * { 
      2. 
  
  
  
  
    2.     padding: 0px; 
      3. 
  
  
  
  
    3.     margin: 0px; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5. body,html{ 
      6. 
  
  
  
  
    6.     width: 100%; 
      7. 
  
  
  
  
    7.     height: 100%; 
      8. 
  
  
  
  
    8. } 
      9. 
  
  
  
  
    9. body{ 
      10. 
  
  
  
  
    10.     display: flex; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. #left, 
      14. 
  
  
  
  
    14. #right { 
      15. 
  
  
  
  
    15.     width: 100px; 
      16. 
  
  
  
  
    16.     background-color: #0FC; 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18. #main { 
      19. 
  
  
  
  
    19.     flex: 1; 
      20. 
  
  
  
  
    20.     background-color: #999; 
      21. 
  
  
  
  
    21. } 
      22.

    垂直方向的布局(sticky footer)

    這種布局將頁(yè)面分成上、中、下三個(gè)部分，上、下部分都為固定高度，中間部分高度不定。當(dāng)頁(yè)面高度小于瀏覽器高度時(shí)，下部分應(yīng)固定在屏幕底部;當(dāng)頁(yè)面高度超出瀏覽器高度時(shí)，下部分應(yīng)該隨中間部分被撐開(kāi)，顯示在頁(yè)面最底部。

    這種布局也稱之為sticky footer，意思是下部分粘黏在屏幕底部。

    代碼實(shí)現(xiàn)

    首先我們先構(gòu)建簡(jiǎn)單的HTML代碼

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.    
      3. 
  
  
  
  
    3.    
      4. 
  
  
  
  
    4.  
      5.

     其中content為我們的內(nèi)容區(qū)。下面開(kāi)始介紹解決方法。

    為內(nèi)容區(qū)域添加最小的高度

    這種方法重要用vh(viewpoint height)來(lái)計(jì)算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內(nèi)容區(qū)域的最小高度。例如我們可以添加如下樣式：

     
 
 
 
      
  
  
  
  
    1. .content{ 
      2. 
  
  
  
  
    2.      min-height:calc(100vh-footer的高度); 
      3. 
  
  
  
  
    3.      box-sizing:border-box; 
      4. 
  
  
  
  
    4. }   
      5.

    從而這個(gè)問(wèn)題就解決了，但是如果頁(yè)面的footer高度不同怎么辦?每一個(gè)頁(yè)面都要重新計(jì)算一次，這是很麻煩的，所以這種方法雖然簡(jiǎn)單但卻是不推薦的。

    使用flex布局

    這種方法就是利用flex布局對(duì)視窗高度進(jìn)行分割。footer的flex設(shè)為0，這樣footer獲得其固有的高度;content的flex設(shè)為1，這樣它會(huì)充滿除去footer的其他部分。

    代碼如下：

     
 
 
 
      
  
  
  
  
    1. body {  
      2. 
  
  
  
  
    2.     display: flex;  
      3. 
  
  
  
  
    3.     flex-flow: column;  
      4. 
  
  
  
  
    4.     min-height: 100vh; 
      5. 
  
  
  
  
    5.  } 
      6. 
  
  
  
  
    6.  .content { 
      7. 
  
  
  
  
    7.     flex: 1;  
      8. 
  
  
  
  
    8. } 
      9. 
  
  
  
  
    9. .footer{ 
      10. 
  
  
  
  
    10.     flex: 0;       
      11. 
  
  
  
  
    11. } 
      12.

    這樣的布局簡(jiǎn)單使用，比較推薦。

    在content的外面可以添加一個(gè)wrapper

    這種方法就是在content的外面添加一個(gè)包裹容易，將html代碼改成這樣：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.       
      5. 
  
  
  
  
    5.    
      6. 
  
  
  
  
    6.  
      7.

     然后添加以下樣式： 

     
 
 
 
      
  
  
  
  
    1. html, body, .wrapper { 
      2. 
  
  
  
  
    2.      height: 100%; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. body > .wrapper { 
      5. 
  
  
  
  
    5.      height: auto;  
      6. 
  
  
  
  
    6.      min-height: 100%; 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8. .content { 
      9. 
  
  
  
  
    9.     padding-bottom: 150px; /* 必須使用和footer相同的高度 */ 
      10. 
  
  
  
  
    10. }   
      11. 
  
  
  
  
    11. .footer { 
      12. 
  
  
  
  
    12.     position: relative; 
      13. 
  
  
  
  
    13.     margin-top: -150px; /* footer高度的負(fù)值 */ 
      14. 
  
  
  
  
    14.     height: 150px; 
      15. 
  
  
  
  
    15.     clear:both; 
      16. 
  
  
  
  
    16. } 
      17.

    另外，為了保證兼容性，需要在wrapper上添加clearfix類。其代碼如下：

      
 
 
 
      
   
  
  
  
    1.  
      2. 
   
  
  
  
    2.      
      3. 
   
  
  
  
    3.          
      4. 
   
  
  
  
    4.       
      5. 
   
  
  
  
    5.    
      6. 
   
  
  
  
    6.  
      7. 
  
 
 
 
     
 
 
 
      
  
  
  
  
    1. .clearfix{ 
      2. 
  
  
  
  
    2.      display: inline-block; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .clearfix:after { 
      5. 
  
  
  
  
    5.      content: "."; 
      6. 
  
  
  
  
    6.      display: block; 
      7. 
  
  
  
  
    7.      height: 0; 
      8. 
  
  
  
  
    8.      clear: both; 
      9. 
  
  
  
  
    9.      visibility: hidden; 
      10. 
  
  
  
  
    10. }     
      11.

    ok,好，完成了，這種方法也比較推薦，但就是加入的代碼比較多，也改變了html的文檔結(jié)構(gòu)。

    粘性布局(sticky)

    粘性布局是什么呢?我們先來(lái)看看效果演示

    沒(méi)錯(cuò)，其實(shí)就是在頁(yè)面滾動(dòng)的時(shí)候保持元素(這里的是標(biāo)題)在頁(yè)面視圖上方，也就是我們常?？吹降?吸附效果。

    標(biāo)題行設(shè)置了背景色。如果不設(shè)置背景色(背景透明)，正常文檔流的文字就會(huì)和標(biāo)題行文字重疊在一起顯示。

    sticky定位的元素會(huì)遮住滾動(dòng)而來(lái)的“正常”的文檔流;后面的sticky元素會(huì)覆蓋前面的sticky元素，就好像一層層的便利貼，是不是很酷~~。

    代碼實(shí)現(xiàn)

    實(shí)現(xiàn)粘性布局主要依靠position的sticky屬性。

     
 
 
 
      
  
  
  
  
    1. position: sticky; 
      2.

    先來(lái)看看兼容性：

    從Can I use上查詢可以看出，sticky的兼容性并不是太好，所以大家使用的時(shí)候要慎重考慮，如果不要求兼容的情況，用這個(gè)還是相當(dāng)?shù)氖娣恕?/p>

    下面給出一個(gè)簡(jiǎn)單的示例。

    html:

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
      標(biāo)題一
       
      3. 
  
  
  
  
    3.      
      4. 
  
  
  
  
    4.      
      5. 
  
  
  
  
    5.     
      標(biāo)題二
       
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.      
      8. 
  
  
  
  
    8.     
      標(biāo)題三
       
      9. 
  
  
  
  
    9.      
      10. 
  
  
  
  
    10.      
      11. 
  
  
  
  
    11.     
      標(biāo)題四
       
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.      
      14. 
  
  
  
  
    14.  
      15.

     js(不想寫(xiě)太多p標(biāo)簽，所以用js生成，偷個(gè)懶):

     
 
 
 
      
  
  
  
  
    1. let num = 20 
      2. 
  
  
  
  
    2. let html = '' 
      3. 
  
  
  
  
    3. for (var i = 0; i < num; i++) { 
      4. 
  
  
  
  
    4.     html += `
      ${i + 1}
      ` 
      5. 
  
  
  
  
    5. } 
      6. 
  
  
  
  
    6. Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{ 
      7. 
  
  
  
  
    7.     item.innerHTML = html 
      8. 
  
  
  
  
    8. }) 
      9.

      css:

     
 
 
 
      
  
  
  
  
    1. main { 
      2. 
  
  
  
  
    2.     width: 400px; 
      3. 
  
  
  
  
    3.     height: 300px; 
      4. 
  
  
  
  
    4.     margin: 200px auto; 
      5. 
  
  
  
  
    5.     overflow: auto; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. header { 
      8. 
  
  
  
  
    8.     position: sticky; 
      9. 
  
  
  
  
    9.     top: 0; 
      10. 
  
  
  
  
    10.     height: 30px; 
      11. 
  
  
  
  
    11.     background-color: blanchedalmond; 
      12. 
  
  
  
  
    12. } 
      13.

    網(wǎng)站題目：CSS精髓：這些布局你都學(xué)廢了嗎？
    本文地址：http://www.5511xx.com/article/dhshhps.html

    其他資訊