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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
新時代創(chuàng)意布局不完全指南

依稀記得，某年廣東語文高考作文的相關(guān)描述 -- “有時，常識雖易知而難行，有時，常識須推陳而出新”。人的想象力和創(chuàng)造力很容易在對常識的一貫認知中被削弱。

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、都蘭網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為都蘭等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

CSS 更新之快，只能不斷鞭策自己持續(xù)學(xué)習(xí)，一直呆在舒適區(qū)中，很容易就跟不上節(jié)奏。當然，不僅僅是 CSS，對于任何技術(shù)任何行業(yè)也可以套用這句話。

回歸本文的主題 -- 新時代布局。運用現(xiàn)有的 CSS 技術(shù)，我們是否可以大膽的跳出常規(guī)思維，不再局限于矩形框框一塊一塊，試著更加藝術(shù)一些?

像是下面這幾個這樣。

不拘一格的線條：

CSS Tricks 某時期官網(wǎng)

文字隨圖片的邊緣排列：

不再是橫平豎直：

又或者造型怪異的網(wǎng)格：

GTA 5 封面

是不是很有意思?不拘一格的布局能夠給頁面吸引更多的目光和流量，當然這也需要我對 CSS 掌握的足夠好，才能在有限的屬性中創(chuàng)造更多不同的可能性。

Grid 布局

說到新時代布局和創(chuàng)意布局，就不得不提到 Grid 的布局。

CSS Grid 布局的二維特性，讓我們相較于傳統(tǒng)的float布局、定位布局、flex 布局有了對頁面更強大的掌控力。

利用 Grid 布局，切割頁面進行分塊

這里，我們利用 Grid 布局的特性，可以將頁面按照我們的所想任意切割成不同的塊狀區(qū)域。

這里推薦一些能夠方便我們進行 Grid 布局的工具：

快速進行 Grid 布局 - Grid Layoutit[1]

利用這個工具，可以快速創(chuàng)建得到自己想要 Grid 布局，并且拿到對應(yīng)的 CSS，非常的簡單便捷。

這里我利用工具，將頁面切割成了 A、B、C、D、E、F 6 塊區(qū)域：

復(fù)制右側(cè)的 HTML 和 CSS，可以快速的得到這樣一個布局，我把代碼拷貝到了 CodePen，簡單添加了一下底色，我們就可以基于這個布局再去做任何事情：

CodePen Demo -- Grid Layout Demo[2]

利用 Grid 布局配合 clip-path 實現(xiàn) GTA5 封面

這里，我們可以利用 Grid 布局配合 clip-path 實現(xiàn) GTA5 封面，像是這樣：

我們將一個 4x4 的 Grid 網(wǎng)格，分割為 9 個不同的部分：

再利用 clip-path，根據(jù)封面圖片的的造型，對每一塊 Gird item 進行二次裁剪：

ok，最后把里面的色塊替換成具體的圖片即可：

CodePen Demo -- GTA 5 poster ( Grid and Clip Path)[3]

當然這里有一個槽點，最終還是用了 9 張圖片，那為什么不一開始直接用一張圖片呢?:)

Grid 是在進行復(fù)雜布局的過程中非常好的幫手，它非常適合各種不規(guī)則網(wǎng)格塊的布局，這里再提供一個 DEMO：

作者是 Olivia Ng[4]，Demo 的鏈接 -- CodePen Demo -- CSS Grid: Train Ticket[5]

瀑布流布局

瀑布流布局在現(xiàn)代布局中也非常常見，通常在一些照片墻中使用。像是這樣：

在之前，不借助 JavaScript，我們有 3 種純 CSS 的方式可以實現(xiàn)偽瀑布流布局(注意，這里是偽瀑布流)，分別是：

  • 使用 CSS column 實現(xiàn)瀑布流布局[6]
  • 使用 CSS flex 實現(xiàn)瀑布流布局[7]
  • 使用 CSS grid 實現(xiàn)瀑布流布局[8]

你可以點進 Demo 看看，利用上述三種方式實現(xiàn)的瀑布流布局，缺點比較明顯：

  • 對于 flex 和 column 布局而言，只能實現(xiàn)豎直排布的瀑布流布局，第一列填充滿了填充第二列，以此類推
  • 對于 Grid 布局而言，缺點則是無法自動適配不同的高度，需要手動指定每一個元素區(qū)塊大小

而在未來，標準基于 Grid 布局實現(xiàn)了 grid-template-rows: masonry，利用該標準，我們可以快速利用 Grid 實現(xiàn)水平排布的瀑布流布局，目前，你可以在 Firefox 體驗該功能。

使用 grid-template-rows: masonry 實現(xiàn)水平方向排布的瀑布流布局

grid-template-rows: masonry 是 firefox 在 firefox 87 開始支持的一種基于 grid 布局快速創(chuàng)建瀑布流布局的方式。并且 firefox 一直在推動該屬性進入標準當中。

從 firefox 87 開始，在瀏覽器輸入網(wǎng)址欄輸入 about:config 并且開啟 layout.css.grid-template-masonry-value.enabled 配置使用。Can i use -- grid-template-rows: masonry[9]

正常而言，我們想要實現(xiàn)瀑布流布局還是需要花費一定的功夫的，即便是基于 grid 布局。在之前，我們通過 grid 布局，通過精細化控制每一個 grid item，可以實現(xiàn)豎直方向的瀑布流布局：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   1
 
  •   2
    •  
  •   3
    •  
  •   4
    •  
  •   5
    •  
  •   6
    •  
  •   7
    •  
  •   8
    •  
  •   
     
 
 
 
      
  
  
  
  
    1. .g-container { 
      2. 
  
  
  
  
    2.     height: 100vh; 
      3. 
  
  
  
  
    3.     display: grid; 
      4. 
  
  
  
  
    4.     grid-template-columns: repeat(4, 1fr); 
      5. 
  
  
  
  
    5.     grid-template-rows: repeat(8, 1fr); 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8. .g-item { 
      9. 
  
  
  
  
    9.     &:nth-child(1) { 
      10. 
  
  
  
  
    10.         grid-column: 1; 
      11. 
  
  
  
  
    11.         grid-row: 1 / 3; 
      12. 
  
  
  
  
    12.     } 
      13. 
  
  
  
  
    13.     &:nth-child(2) { 
      14. 
  
  
  
  
    14.         grid-column: 2; 
      15. 
  
  
  
  
    15.         grid-row: 1 / 4; 
      16. 
  
  
  
  
    16.     } 
      17. 
  
  
  
  
    17.     &:nth-child(3) { 
      18. 
  
  
  
  
    18.         grid-column: 3; 
      19. 
  
  
  
  
    19.         grid-row: 1 / 5; 
      20. 
  
  
  
  
    20.     } 
      21. 
  
  
  
  
    21.     &:nth-child(4) { 
      22. 
  
  
  
  
    22.         grid-column: 4; 
      23. 
  
  
  
  
    23.         grid-row: 1 / 6; 
      24. 
  
  
  
  
    24.     } 
      25. 
  
  
  
  
    25.     &:nth-child(5) { 
      26. 
  
  
  
  
    26.         grid-column: 1; 
      27. 
  
  
  
  
    27.         grid-row: 3 / 9; 
      28. 
  
  
  
  
    28.     } 
      29. 
  
  
  
  
    29.     &:nth-child(6) { 
      30. 
  
  
  
  
    30.         grid-column: 2; 
      31. 
  
  
  
  
    31.         grid-row: 4 / 9; 
      32. 
  
  
  
  
    32.     } 
      33. 
  
  
  
  
    33.     &:nth-child(7) { 
      34. 
  
  
  
  
    34.         grid-column: 3; 
      35. 
  
  
  
  
    35.         grid-row: 5 / 9; 
      36. 
  
  
  
  
    36.     } 
      37. 
  
  
  
  
    37.     &:nth-child(8) { 
      38. 
  
  
  
  
    38.         grid-column: 4; 
      39. 
  
  
  
  
    39.         grid-row: 6 / 9; 
      40. 
  
  
  
  
    40.     } 
      41. 
  
  
  
  
    41. } 
      42.

    效果如下：

    CSS Grid 實現(xiàn)偽瀑布流布局

    CodePen Demo -- CSS Grid 實現(xiàn)偽瀑布流布局[10]

    在上述 Demo 中，使用 grid-template-columns、grid-template-rows 分割行列，使用 grid-row 控制每個 grid item 的所占格子的大小，但是這樣做的成本太高了，元素一多，計算量也非常大，并且還是在我們提前知道每個元素的高寬的前提下。

    而在有了 grid-template-rows: masonry 之后，一切都會變得簡單許多，對于一個不確定每個元素高度的 4 列的 grid 布局：

     
 
 
 
      
  
  
  
  
    1. .container { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: repeat(4, 1fr); 
      4. 
  
  
  
  
    4. } 
      5.

    正常而言，看到的會是這樣：

    簡單的給容器加上 grid-template-rows: masonry，表示豎方向上，采用瀑布流布局：

     
 
 
 
      
  
  
  
  
    1. .container { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: repeat(4, 1fr); 
      4. 
  
  
  
  
    4. + grid-template-rows: masonry; 
      5. 
  
  
  
  
    5. } 
      6.

    便可以輕松的得到這樣一種水平方向順序排布元素的瀑布流布局：

    如果你在使用 firefox，并且開啟了 layout.css.grid-template-masonry-value.enabled 配置，可以戳進下面的 DEMO 感受一下：

    CodePen Demo -- grid-template-rows: masonry 實現(xiàn)瀑布流布局[11]

    多欄布局

    多欄布局也屬于現(xiàn)在我們能夠掌控的布局之一，利用 CSS 較為新的特性 Multiple-column Layout Properties[12]。

    最簡單的多欄布局，我們只需要用到 column-count 或者 column-width。

    假設(shè)我們有如下 HTML：

     
 
 
 
      
  
  
  
  
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit...
       
      2.

    簡單的 3 列布局：

     
 
 
 
      
  
  
  
  
    1. p { 
      2. 
  
  
  
  
    2.     width: 800px; 
      3. 
  
  
  
  
    3.     column-count: 3; 
      4. 
  
  
  
  
    4.     font-size: 16px; 
      5. 
  
  
  
  
    5.     line-height: 2; 
      6. 
  
  
  
  
    6. } 
      7.

    通過 column-count: 3 指定 3 欄。

    column-gap 控制間距 & column-rule 控制列與列間樣式

    接下來，我們再了解下 column-gap 和 column-rule

    • column-gap：控制列與列之間的間隔，默認為關(guān)鍵字 normal，數(shù)值上為 1em
    • column-rule：控制列與列之間的樣式規(guī)則，其寫法與 border 類似，指定列之間的裝飾線

    還是如下 HTML：

     
 
 
 
      
  
  
  
  
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit...
       
      2.

    簡單的 3 列布局：

     
 
 
 
      
  
  
  
  
    1. p { 
      2. 
  
  
  
  
    2.     width: 800px; 
      3. 
  
  
  
  
    3.     column-count: 3; 
      4. 
  
  
  
  
    4.     font-size: 16px; 
      5. 
  
  
  
  
    5.     line-height: 2; 
      6. 
  
  
  
  
    6. +   column: 1px solid #999; 
      7. 
  
  
  
  
    7. +   column-gap: 2em; 
      8. 
  
  
  
  
    8. } 
      9.

    CodePen Demo -- CSS multi column Layout Demo[13]

    column-span 設(shè)置跨列

    接著，還有一個很有意思的屬性 column-span，用于設(shè)置元素的跨列展示。

    我們首先利用多列布局，實現(xiàn)這樣一個類似于報紙排版的布局樣式。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.     
      Lorem ipsum dolor sit amet ... 
       
      3. 
  
  
  
  
    3.     
      Title Lorem ipsum dolor sit amet consectetur adipisicing elit title
       
      4. 
  
  
  
  
    4.     
      Lorem ipsum dolor sit amet ... 
       
      5.
      
     
 
 
 
      
  
  
  
  
    1. .g-container { 
      2. 
  
  
  
  
    2.     width: 800px; 
      3. 
  
  
  
  
    3.     column-count: 3; 
      4. 
  
  
  
  
    4.     column-rule: 1px solid #aaa; 
      5. 
  
  
  
  
    5.     column-gap: 2em; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8. h2 { 
      9. 
  
  
  
  
    9.     margin: 14px 0; 
      10. 
  
  
  
  
    10.     font-size: 24px; 
      11. 
  
  
  
  
    11.     line-height: 1.4; 
      12. 
  
  
  
  
    12. } 
      13.

    大概就是多列布局中嵌套標題，標題的加粗并且字號大一點：

    通過給 h2 設(shè)置 column-span: all，讓 h2 標題跨列多列進行展示，改動一下 CSS：

     
 
 
 
      
  
  
  
  
    1. h2 { 
      2. 
  
  
  
  
    2.     margin: 14px 0; 
      3. 
  
  
  
  
    3.     font-size: 24px; 
      4. 
  
  
  
  
    4.     line-height: 1.4; 
      5. 
  
  
  
  
    5. +   column-span: all; 
      6. 
  
  
  
  
    6. +   text-align: center; 
      7. 
  
  
  
  
    7. } 
      8.

    即可得到這樣一個布局：

    CodePen Demo -- CSS multi column Layout Demo 2[14]

    多欄布局搭配其他布局實現(xiàn)更復(fù)雜的布局

    當然，column-span 有個缺陷，就是它的取值只有 column-span: all 或者是 column-span: none，也就是要么橫跨所有的列，要么不跨列。

    如果現(xiàn)在我有一個 3 列布局，但是只希望其中的標題橫跨兩列，column-span: all 就無法實現(xiàn)了。

    但是，通過嵌套其他布局，我們可以巧妙的對多列布局再進行升華，譬如 rachelandrew[15]就實現(xiàn)了這樣一種嵌套布局：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
       
      3. 
  
  
  
  
    3.     
      By way of precaution ...
       
      4. 
  
  
  
  
    4.     
      the first that ever burst Into that silent sea;
       
      5. 
  
  
  
  
    5.     
      and with what ...
       
      6. 
  
  
  
  
    6.    
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.   
      9. 
  
  
  
  
    9.        
      10. 
  
  
  
  
    10.       
      The Authoress, her Father and Mr. Spencer making an ascent
       
      11. 
  
  
  
  
    11.    
      12.
     

    通過一個 2 列的 Grid 布局，嵌套一個兩列的 multi-column 布局，大致的 CSS 如下：

     
 
 
 
      
  
  
  
  
    1. .container { 
      2. 
  
  
  
  
    2.   max-width: 800px; 
      3. 
  
  
  
  
    3.   display: grid; 
      4. 
  
  
  
  
    4.   grid-gap: 1em; 
      5. 
  
  
  
  
    5.   grid-template-columns: 2fr 1fr; 
      6. 
  
  
  
  
    6.   align-items: start; 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. h2 { 
      10. 
  
  
  
  
    10.   column-span: all; 
      11. 
  
  
  
  
    11.   text-align: center; 
      12. 
  
  
  
  
    12. } 
      13. 
  
  
  
  
    13.  
      14. 
  
  
  
  
    14. .container article { 
      15. 
  
  
  
  
    15.   column-count: 2; 
      16. 
  
  
  
  
    16.   column-gap: 2em; 
      17. 
  
  
  
  
    17.   column-rule: 1px solid #ccc; 
      18. 
  
  
  
  
    18. } 
      19. 
  
  
  
  
    19.  
      20. 
  
  
  
  
    20. .container aside { 
      21. 
  
  
  
  
    21.   border-left: 1px solid #ccc; 
      22. 
  
  
  
  
    22.   padding: 0 1em; 
      23. 
  
  
  
  
    23. } 
      24.

    這樣，我們就能實現(xiàn)視覺上的橫跨任意列的標題：

    完整的 Demo 代碼你可以戳這里：CodePen Demo -- Smashing Multicol: mixing layout methods -- By rachelandrew[16]

    shape-outside 讓布局插上想象的翅膀

    OK，進入下一個模塊，主角是 shape-outside。

    在之前，我也有寫過一篇關(guān)于 shape-outside 的文章 奇妙的 CSS shapes[17]，感興趣的同學(xué)也可以先看看。

    shape-outside[18] CSS 屬性定義了一個可以是非矩形的形狀，相鄰的內(nèi)聯(lián)內(nèi)容應(yīng)圍繞該形狀進行包裝。

    利用它，我們就能夠很好的實現(xiàn)各種非橫平豎直的布局，讓布局真正的活起來。

    圖文排列的交界處，可以是斜的，像是這樣：

    CodePen Demo -- FCC: Build a Tribute Page - Michel Thomas by Stephanie[19]

    也可以是彎曲的，像是這樣：

    CodePen Demo -- shape-outside: circle Demo[20]

    甚至，它是還可以動態(tài)變化的不規(guī)則容器：

    CodePen Demo -- shape-outside animation[21]

    合理使用，我們就可以如報紙版創(chuàng)造各種花式布局效果：

    不僅如此，袁川老師[22] 甚至使用了 shape-outside 進行了一些 CSS 藝術(shù)創(chuàng)作，一起欣賞一下：

    CodePen Demo -- shape-outside -- Face By yuanchuan[23]

    以開篇的這張圖為例子：

    就是巧妙的運用 shape-outside 的例子，它將整個布局分為了 7 塊，每一塊分別使用 shape-outside 進行精細化的控制，實際上完整的布局是這樣的：

    在這篇文章中，對這個 DEMO 進行了非常詳細的闡述：A CSS Venn Diagram[24]

    如果你也對 shape-outside 感興趣，在這份收藏夾里，收藏了 CodePen 上非常多精良的 shape-outside 布局 DEMO，不妨一看學(xué)習(xí)學(xué)習(xí) -- CSS Shapes Experiments[25]

    總結(jié)一下

    在今天，實現(xiàn)有創(chuàng)意的布局也需要我們掌握更多的 CSS 屬性與技巧，本文粗略的介紹了幾種在今天實現(xiàn)創(chuàng)意布局的有益屬性：

    當然，CSS 能實現(xiàn)的遠不止如此，像是滾動視差、3D 變換等等都是可以利用 CSS 實現(xiàn)并且再融合進布局當中的屬性。當然這也需要我們有創(chuàng)造和發(fā)現(xiàn)美的眼睛和思維。

    最后

    好了，本文到此結(jié)束，希望對你有幫助 ????

    更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[26] ，持續(xù)更新。

    參考資料


    分享名稱：新時代創(chuàng)意布局不完全指南
    文章轉(zhuǎn)載：http://m.5511xx.com/article/dhdgpgd.html

    其他資訊