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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
拿到UI時，前端人該如何思考？

經(jīng)常有人私信我，小智這個設(shè)計(jì)圖用 CSS 要怎么布局呀，這個按鈕要怎么畫的。所以今天，在這篇文章我們來介紹一些新的布局的方法，希望對智米們有些用處。

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十載時間我們累計(jì)服務(wù)了上千家以及全國政企客戶，如成都花箱等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致夸獎。

把設(shè)計(jì)細(xì)節(jié)放在一邊

我通常做的第一件事就是把設(shè)計(jì)細(xì)節(jié)放在一邊。我想先知道這次設(shè)計(jì)主要包括哪些部分，然后在關(guān)注每個部分的細(xì)節(jié)?？紤]以下UI：

 

在上面UI中，有以下特點(diǎn)：

  • Header/Navigation
  • 中間內(nèi)容 部分
  • 底部的 How it works 部分

接著，我們先把這三個主要部分抽象出來：

 

抽象后，我們可以看到主要的部分，主宋就可以幫助我們考慮如何布局組件，而不用考慮每個組件的細(xì)節(jié)。

我是這樣想的：

  • Full-width header：頭部的導(dǎo)航欄
  • Centered Content：中間內(nèi)容水平居中，注意，這個一般需要設(shè)置最大寬度 max-width。
  • How it works：這是一個4列的布局，整個部分都被限制在一個包裝器中。

接著，把上面三個部分用代碼表示出來：

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

     

     

    因?yàn)槲覀冇幸粋€4列的部分，這里我使用 CSS網(wǎng)格：

     
 
 
 
      
  
  
  
  
    1. .wrapper { 
      2. 
  
  
  
  
    2.   margin-left: auto; 
      3. 
  
  
  
  
    3.   margin-right: auto; 
      4. 
  
  
  
  
    4.   padding-left: 1rem; 
      5. 
  
  
  
  
    5.   padding-right: 1rem; 
      6. 
  
  
  
  
    6.   max-width: 1140px; 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. .hero__content { 
      10. 
  
  
  
  
    10.   max-width: 700px; 
      11. 
  
  
  
  
    11.   margin-left: auto; 
      12. 
  
  
  
  
    12.   margin-right: auto; 
      13. 
  
  
  
  
    13. } 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15. .grid-4 { 
      16. 
  
  
  
  
    16.   display: grid; 
      17. 
  
  
  
  
    17.   grid-template-columns: repeat(4, 1fr); 
      18. 
  
  
  
  
    18. } 
      19.

    拿到 UI 時，我們不是馬上就開始行動，而是要觀察整體的構(gòu)成，先實(shí)現(xiàn)每塊的構(gòu)成，然后再去深入構(gòu)成的實(shí)現(xiàn)。

    文章頁面

    在本例中，我們有一個文章頁面布局。這是UI，它包含:

    • 頭部
    • 圖片
    • 文章標(biāo)題
    • 文章內(nèi)容
    • 側(cè)邊欄(旁邊)

    我們再一次把它抽象成主要的幾個部分：

     

    抽象主要包括幾個部分：

    • 網(wǎng)站的頭部寬度是 100%
    • 標(biāo)題：包含文章標(biāo)題和說明，其內(nèi)容左對齊，要設(shè)置最大寬度
    • 兩列布局，包含main和sidebar元素。
    • 文章內(nèi)容，水平居中并有最大寬度。

    文章-頁面標(biāo)題

     

    這里不需要什么布局方法。一個簡單的max-width就可以了，當(dāng)然還需要加些 padding，增加一些舒適距離。

     
 
 
 
      
  
  
  
  
    1. .page-header { 
      2. 
  
  
  
  
    2.   max-width: 50rem; 
      3. 
  
  
  
  
    3.   padding: 2rem 1rem; 
      4. 
  
  
  
  
    4. } 
      5.

    文章- Main 和 Sidebar

     

    main 元素是視口的整個寬度減去側(cè)邊欄的寬度。通常，側(cè)邊欄應(yīng)具有固定的寬度。為此，使用CSS網(wǎng)格是完美的。

     
 
 
 
      
  
  
  
  
    1. .page-wrapper { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: 1fr; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. @media (min-width: 800px) { 
      7. 
  
  
  
  
    7.   grid-template-columns: 1fr 250px; 
      8. 
  
  
  
  
    8. } 
      9.

    對于文章的內(nèi)部內(nèi)容，應(yīng)該將其限制在一個包裝器中。

     
 
 
 
      
  
  
  
  
    1. .inner-content { 
      2. 
  
  
  
  
    2.   max-width: 50rem; 
      3. 
  
  
  
  
    3.   margin-left: auto; 
      4. 
  
  
  
  
    4.   margin-right: auto; 
      5. 
  
  
  
  
    5.   padding-left: 1rem; 
      6. 
  
  
  
  
    6.   padding-right: 1rem; 
      7. 
  
  
  
  
    7. } 
      8.

    有些整體的布局后，我們來看具體的細(xì)節(jié)。

    深入細(xì)節(jié)

    How It Works 部分

    在本文的第一個示例中，我們來看一下 How It Works 部分 的細(xì)節(jié)實(shí)現(xiàn)。

     

    列

    • 這里的步驟一，二，三，有沒有可能會增加或者減少的情況，如果有，我們應(yīng)該如何處理?
    • 我們是否需要列的高度相等，特別是當(dāng)一個卡片有一個很長的文本?

    標(biāo)題

    我們是否需要該部分標(biāo)題留在一邊?還是在某些情況下應(yīng)采用全寬?

    響應(yīng)式設(shè)計(jì)

    當(dāng)網(wǎng)頁寬度縮小時，我們需要做響應(yīng)式嗎?如果有, 那觸發(fā)的條件是什么?

    這些是我們開發(fā)可能會遇到的問題，你覺得怎么樣?作為一名前端開發(fā)人員，我們應(yīng)該考慮這樣的邊緣情況，而不僅僅按 UI 照貓畫虎這樣簡單。

     

    由于本文著重于思考過程，所以無法詳細(xì)介紹一個個有可能出現(xiàn)的情況。

    在上面的模型的第一個和第三個版本中，步驟數(shù)分別是3和2。我們可以使CSS動態(tài)化來處理嗎?可以。

    HTML

        
 
 
 
      
     
  
  
  
    1.  
      2. 
     
  
  
  
    2.    
      3. 
     
  
  
  
    3.     
       
      4. 
     
  
  
  
    4.       
      How it works
       
      5. 
     
  
  
  
    5.       
      Easy and simple steps
       
      6. 
     
  
  
  
    6.     
     
  •      
  •        
  •          
  •       
    •  
  •        
  •          
  •       
    •  
  •        
  •          
  •       
    •  
  •     
    •  
  •    
  •  

     

    CSS

     
 
 
 
      
  
  
  
  
    1. .steps { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: 1fr; 
      4. 
  
  
  
  
    4.   grid-gap: 1rem; 
      5. 
  
  
  
  
    5. } 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. @media (min-width: 700px) { 
      8. 
  
  
  
  
    8.   .steps { 
      9. 
  
  
  
  
    9.     grid-template-columns: 250px 1fr; 
      10. 
  
  
  
  
    10.   } 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. .layout { 
      14. 
  
  
  
  
    14.   display: grid; 
      15. 
  
  
  
  
    15.   grid-template-columns: 1fr; 
      16. 
  
  
  
  
    16.   grid-gap: 1rem; 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19. @media (min-width: 200px) { 
      20. 
  
  
  
  
    20.   .layout { 
      21. 
  
  
  
  
    21.     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
      22. 
  
  
  
  
    22.   } 
      23. 
  
  
  
  
    23. } 
      24.

    我使用了CSS grid minmax()和auto-fit關(guān)鍵字。這在卡片數(shù)量可以增加或減少的情況下很有用。

     

    內(nèi)容部分

     

    圖片

    • 圖片應(yīng)如何呈現(xiàn)?它是每天變化的還是應(yīng)該從CMS更新?
    • 是使用HTML 還是CSS background?
    • 圖片的預(yù)期長寬比是多少?
    • 我們是否需要根據(jù)視口大小使用多個圖像大小?
    • 圖片的部分是否可能會換成視頻?

    高度

    內(nèi)容最小高度是多少?

    內(nèi)容長度

    我們需要設(shè)置標(biāo)題和描述的最大長度嗎?如果是，設(shè)計(jì)期望處理的最小值和最大值是多少?

    元素之間的間距

    如何處理垂直間距?

    內(nèi)容中心

    如何水平和垂直居中內(nèi)容?已知我們只知道寬度，而高度是未知的。

    限制內(nèi)容

    為了提高可讀性，最好限制內(nèi)容。理想的寬度是多少?

    響應(yīng)式設(shè)計(jì)

    我們需要根據(jù)視窗寬度改變字體大小嗎?如果是，我們應(yīng)該使用基于px的單位，視口單位，或CSS clamp()函數(shù)?

    根據(jù)我們所做的項(xiàng)目的性質(zhì)，我們應(yīng)該找到這些問題的答案，這將幫助我們確定組件的構(gòu)建方式。

    有時，很難回答每個問題，但是問得越多，獲得良好的無錯誤結(jié)果的可能性就越大。

    在本部分中，我將解決子元素之間的間距。我喜歡使用flow-space實(shí)用程序。我是從Andy Bell的Piccalil博客中學(xué)到的。目的是在直接同級元素之間提供間距。

     

    html

       
 
 
 
      
    
  
  
  
    1.  
      2. 
    
  
  
  
    2.    
      3. 
    
  
  
  
    3.    
      4. 
    
  
  
  
    4.     
      Food is amazing
       
      5. 
    
  
  
  
    5.     
      Learn how to cook amazing meals with easy and simple to follow steps
       
      6. 
    
  
  
  
    6.     Learn now 
      7. 
    
  
  
  
    7.   
     
  •  

    • css

     
 
 
 
      
  
  
  
  
    1. .flow > * + * { 
      2. 
  
  
  
  
    2.   margin-top: var(--flow-space, 1em); 
      3. 
  
  
  
  
    3. } 
      4.

     

    最后的想法如前面所見，實(shí)現(xiàn)組件的過程不僅要使其與 UI 完全匹配，還要考慮邊緣情況。希望智米從本文中學(xué)到至少一件事。

    本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。


    當(dāng)前題目：拿到UI時，前端人該如何思考？
    當(dāng)前鏈接：http://m.5511xx.com/article/dpeiddi.html