常用的10個CSS技巧總結
CSS是網(wǎng)頁設計師的基礎，對CSS的了解能使他們能夠設計出更加美觀別致的網(wǎng)頁。使用CSS技巧來巧妙地處理CSS是非常令設計師著迷的事情。在CSS的深海世界里有很多有意思的東西，你只需要找到最適合你的就好。當然我們不可能一下子就記住所有CSS的規(guī)則和語法，但為了以后的發(fā)展我們還是應該記住那些非常有用的CSS技巧。今天我們精心準備了10條對網(wǎng)頁設計師最有用的CSS技巧，如果你想設計出獨一無二脫穎而出的網(wǎng)頁你必須得好好注意了。這篇博客是在與一家提供高質量印刷服務的在線印刷公司“ Business Card Printing”合作時寫的。
1. @font-face
一種用其他服務器上的字體的好方法。很明顯，如果你不能在托管服務器上找到你需要的字體，你可以在樣式中使用這個方法來引入你需要的字體。
CSS Code復制內(nèi)容到剪貼板 @font-face{ font-family:Blackout; src:url("assests/blackout.ttf")format("truetype"); }
2..clearfix
如果你沒法清除元素的浮動，這是清除浮動一種方法。你可以對任何HTML元素單獨使用這種方法。
CSS Code復制內(nèi)容到剪貼板 .clearfix:after{ content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
3. @media
@media 可以設置你當前響應網(wǎng)站的媒介，它能幫助你根據(jù)用戶的顯示器調(diào)整網(wǎng)站的寬度。
CSS Code復制內(nèi)容到剪貼板 @mediascreenand(max-width:960px){ }
4. transform: rotate(30deg);
結合這些轉換屬性和CSS轉場效果來創(chuàng)造有意思的動態(tài)效果。
CSS Code復制內(nèi)容到剪貼板 .title{ transform:rotate(40deg); }
5. background-size
這條規(guī)則幫助你在網(wǎng)站中適應全屏幕背景。這不像之前的CSS版本必須寫很笨重的代碼。
CSS Code復制內(nèi)容到剪貼板 body{ background:url(image.jpg)no-repeat; background-size:100%; }
6. input[type="text"]
這個input[type="text"]選擇器和其他高級選擇器把你從一般水平帶到高級水平非常有幫助。使用屬性選擇器來控制輸入元素的提交版本或為一個外鏈增加一個圖標這樣很不錯吧？
CSS Code復制內(nèi)容到剪貼板 input[type="text"]{ width:250px; }
7. margin: 0 auto;
很奇怪，沒有任何特定的標準來使塊級元素居中。這個方法可以使塊級元素在父元素中居中。
CSS Code復制內(nèi)容到剪貼板 #container{ margin:0auto; }
8. a {outline: none;}
在瀏覽你的網(wǎng)站的時候，點一個鏈接一個巨大的虛線框就橫跨整個網(wǎng)頁這將嚴重影響用戶的心情。這個“a {outline: none;}”聲明將移除這個，但為了易用性別忘了給你的鏈接也加上:focus狀態(tài)。
CSS Code復制內(nèi)容到剪貼板 a{outline:none;}
9. overflow: hidden
這是最好的清除還沒加載到你CSS里面的元素浮動的方法。使用它使網(wǎng)站的響應速度更快。
CSS Code復制內(nèi)容到剪貼板 .container{ overflow:hidden; }
10. color: rgba();
PNG圖片因為它的透明性使它在網(wǎng)頁設計中很流行并廣泛使用，但是現(xiàn)在你可以使用下面這種方法同樣實現(xiàn)透明。它使用紅、綠、藍三通道并設置其不透明度值來實現(xiàn)透明，像0.5對應%50的不透明度。
CSS Code復制內(nèi)容到剪貼板 .btn{ color:rgba(0,0,0,0.5); }
- 相關推薦
【常用的10個CSS技巧總結】相關文章：
css的調(diào)試方法與經(jīng)驗總結03-20
計算機常用小技巧總結12-20
文案撰寫的技巧總結11-16
總結10采購技巧03-20
坡道定點的技巧總結03-19
捕捉強莊股的技巧總結02-22
酒店酒水推銷的技巧總結03-28
寫作技巧各種總結03-20
老司機總結的開車省油技巧03-19
彎道行車技巧總結03-19