ul涓殑li璁剧疆绛夊楂榗ss

Posted 2021-03-02

鏍囩锛?a href='http://www.mamicode.com/so/1/%e5%9b%be%e7%89%87' title='鍥剧墖'>鍥剧墖   浠ｇ爜   code   pad   lock   color   over   璁剧疆   add   

鍝嶅簲寮忓竷灞€涓搴︿笌楂樺害鐩稿悓

绾痗ss鏂规硶璁剧疆ul涓璴i瀹介珮鐩哥瓑

鍏抽敭璇嶏細VW / VH

vw锛氳绐楃殑瀹藉害

vh锛氳绐楃殑楂樺害

鎬濊矾锛氭牴鎹畍w鑾峰彇瑙嗗浘瀹藉害浠庤€岃缃甽i鐨勫搴︾瓑浜庨珮搴?/p>

浠ｇ爜锛?/p>

<li>
  <div class="test">
       <img src="../images/hm1.png" >
       <div>
         <h3>Sponge material</h3>
       </div>
  </div>
</li>               

銆€銆€璁剧疆锛?/p>

li涓殑绗竴涓洅瀛愯缃楂樼敤鏉ユ拺璧烽珮搴?.test: {
width: 18vw;
height 18vw;
margin: auto;
}

鍥剧墖璁剧疆涓€涓珮搴︼紝姣斿鐩掑瓙灏忥紝鏄撶湅
img {
padding-top: 3vw;
height 12vw;
margin: auto;
}

杩欓噷鐨則est鐢ㄦ潵瑙﹀彂鑳屾櫙鏄剧ず
.test:hover {
border-radius: 50%;
background-color: #c3dfff;
}

 

娉ㄦ剰锛歷w鍜寁h鏈夊吋瀹规€э紝鏀寔IE9+锛孖E9浠ヤ笅杩樻槸鐢↗S鍘昏幏鍙栧搴﹀惂

涓婁竴寮犳晥鏋滃浘锛?/p>

娴呰摑鑹茶儗鏅槸 .test  锛岄噷闈㈡斁浜嗕竴寮犲浘鐗囷紝鍥剧墖璁剧疆浜嗛珮搴︺€傞珮搴﹀皬浜巐i鐨勯珮搴?/p>