CSS100個(gè)動(dòng)作是指一項(xiàng)特別有用的CSS技能,可以讓你在網(wǎng)頁(yè)設(shè)計(jì)中變得更加專業(yè)。下面是100個(gè)讓你掌握CSS技能的具體動(dòng)作:
1. 讓圖片居中。 img {display:block; margin:0 auto;} 2. 讓div居中。 div {display:inline-block; margin:0 auto;} 3. 統(tǒng)一字體樣式。 body {font-size:1em; line-height:1.2; font-family:"Arial",sans-serif;} 4. 修改鏈接樣式。 a {text-decoration:none; color:#000;} 5. 讓列表居中。 ul {text-align:center;} 6. 讓元素位置顯示在頁(yè)面中央。 position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); 7. 統(tǒng)一段落行間距。 p {line-height:1.5;} 8. 讓單個(gè)元素字體加粗。 font-weight:bold; 9. 調(diào)整列表項(xiàng)的間隔。 li {margin:10px;} 10. 在頁(yè)面上居中顯示一行文本。 text-align:center; line-height:100vh; display:flex; justify-content:center; align-items:center; 11. 讓圖片自適應(yīng)尺寸。 img {max-width:100%; height:auto;} 12. 自定義表格樣式。 table {width:100%; border-collapse:collapse;} td, th {border:1px solid #ccc; padding:5px;} 13. 刪除所有表格的第一行。 tr:first-child {display:none;} 14. 設(shè)置元素的最小高度。 min-height:400px; 15. 設(shè)置背景色。 background-color:#ccc; 16. 設(shè)置背景圖。 background-image:url('example.jpg'); 17. 設(shè)定背景位置。 background-position:center center; 18. 將域名鏈接在新標(biāo)簽頁(yè)中打開。 a[target='_blank'] {text-decoration:none;} 19. 將所有a標(biāo)簽的下劃線刪除。 a {text-decoration:none;} 20. 讓所有鏈接在鼠標(biāo)移動(dòng)到上面時(shí),變?yōu)椴煌念伾? a:hover {color:red;}