您當前位置: 南順網絡>> 官方資訊>> 建站知識

一些有趣的 CSS 魔法和布局(上)

懶加載占位圖自適應

在商城中展示商品圖片時,如果圖片較多,一種比較好的體驗是:會先有一個占位圖,目的是為了讓頁面無抖動,也就是所謂的圖片懶加載效果。但是,當遇到適配時就比較頭痛,特別是手機的橫豎屏切換。如果是通過 JavaScript 計算的話,就可能會出現抖動現象。

本著能用 CSS,就不用 JS 去實現的原則,就有了下面這種方案:

<div class="img-ratio">  
   <img src="//via.placeholder.com/640x384"> 
 </div>
.img-ratio {   
  width: 100%;     
  position: relative;     
  padding-top: 75%;
} 
.img-ratio > img {   
  width: 100%;     
  height: 100%;    
   position: absolute;     
   top: 0;     
   left: 0; 
   }

可以適配不同屏幕,只要 UI 提供一張 4:3 的占位圖即可。下圖展示了不同寬高,但比例相同的 2 張圖,都能完美地居中顯示。

169a07e39ddd22b0.jpg

它的原理是:

  • 根據容器的寬度,按照寬高比例,自動計算出容器的實際大小,并且讓容器內的如 img 等子元素自適應寬高。

  • 圖片父容器寬度 100%,父容器的高度百分比為:100 * 3 / 4 = 75%。

  • 圖片 absolute 并且完全鋪滿父容器。

移動端的橫向滾動條

移動端的界面,寸土寸金。有時為了控制屏幕的滾動長度,會將一些??楹嵯蚺帕?。但是,橫向排列會產生一些布局問題。

比如,移動端的滾動條樣式,依賴與手機瀏覽器,各不相同。一種解決方案是:把滾動軸隱藏掉,但不能 overflow-x:hidden;,不然就滾不動了。然后算好每一個橫向的塊的寬度,讓最右側的塊露出一部分,這樣用戶就知道右側的屏幕之外還有內容,可以橫向滑動。

又如果橫向滾動的寬度是未知的,因為可能會隨著業務的需要,改變橫向??櫚母鍪?,那么橫向排布就沒法用 float 了。因為用了浮動,就得知道整個橫向滾動的寬度,整個的寬度要比浮動塊累加起來的寬度更寬,才能保證浮動不換行。

所以,就有了下面這樣的寫法:

<div class="wrapper">   
  <ul>      
     <li>1</li>         
     <li>2</li>         
     <li>3</li>         
     <li>4</li>         
     <li>5</li>         
     <li>6</li>   
  </ul>
</div>
.wrapper {   
  width: 340px;  
  height: 80px;     
  overflow: hidden; 
 } 
.wrapper ul {  
   height: 96px;     
   width: 100%;     
   white-space: nowrap;     
   overflow-x: scroll;     
   padding: 0;     
   margin: 0; 
 } 
 .wrapper li {
      display: inline-block;     
      width: 80px;     
      height: 80px;     
      background-color: #ddd;     
      line-height: 80px;     
      text-align: center;     
      font-size: 20px;    
      margin-right: 10px;
  }

它的思路是:ul 設置 white-space:nowrap;,li 設置 display:inline-block;。最外層的 div 利用高度差,把橫向滾動條藏起來。

169a07fb35fc9e4c.jpg

頂部導航不定寬的居中展示

一些官網,有頂部導航欄,導航欄的內容區往往需要居中展示,兩旁則留白,導航欄的下方可能還有根線或者陰影,作為區分頂部與主體內容。

.center-float { 
    float: left;     
    position: relative;     
    left: 50%; 
  } 
.center-float > ul {
     position: relative;     
     left: -50%; 
 }

這是居中浮動的一種做法,再配合相對定位。

footer 置底

當頁面主內容區高度不夠時,footer 依然顯示在最下面。這里當然不是指 position: fixed,footer是緊跟在內容區下方的。有 2 種方法。

html 結構如下:

<html>   
  <body>       
    <div id="content">....</div>         
    <div id="footer">....</div>   
  </body>
</html>

1、margin & padding

html, body {  
   height: 100%;
 } 
 $footer-height: 30px; 
 #content {  
    min-height: 100%;     
    margin-bottom: -$footer-height;     
    padding-bottom: $footer-height;
  }
   #footer { 
       line-height: $footer-height;     
       text-align: center; 
    }

2、flex 布局

$footer-height: 30px;
 html { 
     height: 100%;
 } 
 body {  
    min-height: 100%;     
    display: flex;     
    flex-direction: column;
 } 
 #content {     
     flex: 1;
 }
  #footer { 
      line-height: $footer-height;     
      text-align: center; }

超寬的背景圖片居中

一些傳統的門戶網站,它們的主內容區寬度大致為 980px 或 1000px 這樣的經典寬度。有時候,會把較寬的圖片作為整體背景圖,居中放置,并且不要橫向滾動軸,可以這么做:

.wrapper {     min-width: 1000px;     height: 800px;     background: url(test.jpg) no-repeat center top; } .mainContent {     position: relative;     width: 1000px;     margin: 0 auto; } 復制代碼

::after 實現水平垂直居中

偽元素也能用來實現居中么?當時看到的一感覺就覺得挺神奇的,看下面這個例子:

<div class="wrapper">   
  <img src="test.png"> 
</div>
.wrapper { 
    width: 300px;     
    height: 300px;     
    border: 1px solid #ccc;     
    text-align: center; }
 .wrapper::after {
      content: '';     
      display: inline-block;     
      vertical-align: middle;     
      height: 100%;
      } 
  .wrapper > img {
       vertical-align: middle;
        }

水平方向很好理解。垂直方向,可以理解為 ::after 把 img 往下拉到了中間。





編輯:--史志成

球探体育即时比分 福彩3d模拟投注复试 打龙虎300快怎么赢2000 非凡炸金花玩的人多吗 一分快三稳赢技巧口诀 欢乐麻将二人雀神过胡 哪个手机炸金花能赢钱 北京pk10玩法规则 吉林时时玩法说明 福安徽时时 超级大乐透中奖规则图 北京福彩网pk10走势图 重庆时时彩龙虎预测计划 怎么买时时彩 在线棋牌下载送10元 uu捕鱼手机版