伸縮佈局flex、背景縮放例項、字型陰影—攜程網手機app
阿新 • • 發佈：2018-11-01
要點：
1.將需要伸縮佈局的父級元素新增display:flex顯示效果，在子級元素中設定flex的值，然後按比例分。如一個子集元素是1，另一個是2，則一個佔三分之一，另一個三分之二。
2.字型陰影非常佔記憶體，不建議使用
3.背景圖片的縮放，可以為px和百分比（如果自定義一個，另一個按原來圖片的比例等比列縮放）
另兩個特殊的屬性值，cover將圖片等比例縮放，直到圖片的高跟盒子的高一致
contain跟盒子的寬一致
html程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } html,body{ min-width: 320px; max-width: 540px; margin:0 auto; } header img{ height: 108px; width: auto; } nav{ border: 1px solid #ccc; padding: 4px; } nav a,nav em{ text-decoration: none; font-size: 14px; text-shadow: 0 2px 1px rgba(0,0,0,.2); color: #fff; /*非常佔記憶體*/ } .row{ height: 90px; display: flex; /*為父級盒子新增flex，可以完成伸縮佈局*/ border-radius: 5px; /*為父盒子新增圓角*/ overflow: hidden; /*子元素會繼續冒出來，要隱藏*/ margin-bottom: 5px; } .row div{ height: 100%; flex: 1; /*為父級盒子新增flex屬性後，下面的子盒子每個佔一份*/ background-color: #ff697a; border-right: 1px solid #fff; } .row div:nth-child(3){ border-right: 0; } .row div a{ display: block; width: 100%; height: 100%; overflow: hidden; } .row em{ display: block; height: 45px; text-align: center; line-height: 45px; font-style: normal; } .row i{ display: block; width: 43px; height: 43px; margin: -5px auto 0; background:url(img/ctrip.png) no-repeat 0 -127px; /*-webkit-background-size:104px;*/ background-size: 104px; /*寬度改為原來的一半，第二項自動等比例縮放*/ } .row div a .jipiao{ background-position: 0 -288px; } .row div a .ggg{ background-position: 0 -190px; } .row3{ display: flex; flex-direction: column; /*垂直動態分佈*/ } .row3 a{ flex: 1; /*上下兩個各佔一半*/ text-align: center; line-height: 45px; color: #fff; } .row3 a:first-child{ border-bottom: 1px solid #fff; } </style> </head> <body> <header> <img src="img/banner.jpg"> </header> <nav> <div class="row"> <div> <a href="#"> <em>酒店</em> <i></i> </a> </div> <div class="row3"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="row3"> <a href="#">團購</a> <a href="#">特色民宿</a> </div> </div> <div class="row"> <div> <a href="#"> <em>酒店</em> <i class="jipiao"></i> </a> </div> <div class="row3"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="row3"> <a href="#">團購</a> <a href="#">特色民宿</a> </div> </div> <div class="row"> <div> <a href="#"> <em>酒店</em> <i class="ggg"></i> </a> </div> <div class="row3"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="row3"> <a href="#">團購</a> <a href="#">特色民宿</a> </div> </div> <div class="row"> <div class="row3"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="row3"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="row3"> <a href="#">團購</a> <a href="#">特色民宿</a> </div> </div> </nav> </body> </html>
效果;
