CSS是網(wǎng)頁設(shè)計師的基礎(chǔ)，對CSS的了解能使他們能夠設(shè)計出更加美觀別致的網(wǎng)頁。使用CSS技巧來巧妙地處理CSS是非常令設(shè)計師著迷的事情。在CSS的深海世界里有很多有意思的東西，你只需要找到最適合你的就好。當然我們不可能一下子就記住所有CSS的規(guī)則和語法，但為了以后的發(fā)展我們還是應(yīng)該記住那些非常有用的CSS技巧。今天我們精心準備了10條對網(wǎng)頁設(shè)計師最有用的CSS技巧，如果你想設(shè)計出獨一無二脫穎而出的網(wǎng)頁你必須得好好注意了。 1. @font-face 一種用其他服務(wù)器上的字體的好方法。很明顯，如果你不能在托管服務(wù)器上找到你需要的字體，你可以在樣式中使用這個方法來引入你需要的字體。 @font-face { font-family: Blackout; src: url("assests/blackout.ttf") format("truetype"); } 2. .clearfix 如果你沒法清除元素的浮動，這是清除浮動一種方法。你可以對任何HTML元素單獨使用這種方法。 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 3. @media @media 可以設(shè)置你當前響應(yīng)網(wǎng)站的媒介，它能幫助你根據(jù)用戶的顯示器調(diào)整網(wǎng)站的寬度。 @media screen and (max-width: 960px) { }

4. transform: rotate(30deg); 結(jié)合這些轉(zhuǎn)換屬性和CSS轉(zhuǎn)場效果來創(chuàng)造有意思的動態(tài)效果。 .title { transform: rotate(40deg); } 5. background-size 這條規(guī)則幫助你在網(wǎng)站中適應(yīng)全屏幕背景。這不像之前的CSS版本必須寫很笨重的代碼。 body { background: url(image.jpg) no-repeat; background-size: 100%; } 6. input[type="text"] 這個input[type="text"]選擇器和其他高級選擇器把你從一般水平帶到高級水平非常有幫助。使用屬性選擇器來控制輸入元素的提交版本或為一個外鏈增加一個圖標這樣很不錯吧？ input[type="text"] { width: 250px; } 7. margin: 0 auto; 很奇怪，沒有任何特定的標準來使塊級元素居中。這個方法可以使塊級元素在父元素中居中。 #container { margin: 0 auto; } 8. a {outline: none;} 在瀏覽你的網(wǎng)站的時候，點一個鏈接一個巨大的虛線框就橫跨整個網(wǎng)頁這將嚴重影響用戶的心情。這個“a {outline: none;}”聲明將移除這個，但為了易用性別忘了給你的鏈接也加上:focus狀態(tài)。 a {outline: none;} 9. overflow: hidden 這是最好的清除還沒加載到你CSS里面的元素浮動的方法。使用它使網(wǎng)站的響應(yīng)速度更快。 .container { overflow: hidden; } 10. color: rgba(); PNG圖片因為它的透明性使它在網(wǎng)頁設(shè)計中很流行并廣泛使用，但是現(xiàn)在你可以使用下面這種方法同樣實現(xiàn)透明。它使用紅、綠、藍三通道并設(shè)置其不透明度值來實現(xiàn)透明，像0.5對應(yīng)%50的不透明度。 .btn { color: rgba(0,0,0,0.5); }

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

新聞名稱：制作網(wǎng)站必備的10個CSS使用技巧
網(wǎng)頁URL：http://m.2m8n56k.cn/news8/320158.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、手機網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)