在Web開發中,CSS是不可或缺的一部分。它可以讓網頁變得美觀、易于導航和用戶友好。在這里,我們列舉了25個強大的CSS代碼,可以幫助你增強你的網頁設計技能。
1. 針對所有元素添加樣式: * { margin: 0; padding: 0; box-sizing: border-box; } 2. 在網頁頂部固定導航欄: nav { position: fixed; top: 0; width: 100%; z-index: 999; } 3. 創建自定義滾動條: ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: #f1f1f1; } ::-webkit-scrollbar-thumb { background-color: #888; } 4. 讓圖片自適應大小: img { max-width: 100%; height: auto; } 5. 改變文本選中樣式: ::selection { background-color: #00bfff; color: #fff; } 6. 清除鏈接下劃線: a { text-decoration: none; } 7. 變換鼠標形狀: button:hover, a:hover { cursor: pointer; } 8. 文字陰影: h1 { text-shadow: 2px 2px #000; } 9. 改變文本大小寫: text-transform: uppercase; 10. 隱藏元素: display: none; 11. 塊級居中: margin: 0 auto; 12. 創建長陰影: box-shadow: 5px 5px 5px #ccc; 13. 讓文字垂直居中: display: flex; align-items: center; 14. 創建旋轉效果: transform: rotate(45deg); 15. 開啟背景圖像平鋪: background-repeat: repeat; 16. 交替行背景色: tr:nth-child(even) { background-color: #f2f2f2; } 17. 切換元素顯示: display: none; display: block; 18. 把元素移到屏幕右側: position: absolute; right: 0; 19. 居中元素: position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 20. 在元素下方添加陰影: box-shadow: 0 2px 2px #ccc; 21. 讓元素跳動: animation: jump 1s infinite; @keyframes jump { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } 22. 讓元素淡入淡出: .fade-in { animation: fadeIn ease 5s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } 23. 添加旋轉動畫: .spin { animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 24. 設置元素最小高度: min-height: 200px; 25. 控制文本溢出樣式: text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
上一篇asp中的div css
下一篇atom不顯示css樣式