CSS是網(wǎng)頁(yè)設(shè)計(jì)師的基礎(chǔ)，對(duì)CSS的了解能使他們能夠設(shè)計(jì)出更加美觀別致的網(wǎng)頁(yè)。使用CSS技巧來(lái)巧妙地處理CSS是非常令設(shè)計(jì)師著迷的事情。在CSS的深海世界里有很多有意思的東西，你只需要找到最適合你的就好。當(dāng)然我們不可能一下子就記住所有CSS的規(guī)則和語(yǔ)法，但為了以后的發(fā)展我們還是應(yīng)該記住那些非常有用的CSS技巧。今天我們精心準(zhǔn)備了10條對(duì)網(wǎng)頁(yè)設(shè)計(jì)師最有用的CSS技巧，如果你想設(shè)計(jì)出獨(dú)一無(wú)二脫穎而出的網(wǎng)頁(yè)你必須得好好注意了。這篇博客是在與一家提供高質(zhì)量印刷服務(wù)的在線印刷公司“ Business Card Printing”合作時(shí)寫(xiě)的。

1. @font-face

一種用其他服務(wù)器上的字體的好方法。很明顯，如果你不能在托管服務(wù)器上找到你需要的字體，你可以在樣式中使用這個(gè)方法來(lái)引入你需要的字體。

1@font-face {

2 font-family: Blackout;

3 src: url("assests/blackout.ttf") format("truetype");

4}

2. .clearfix

如果你沒(méi)法清除元素的浮動(dòng)，這是清除浮動(dòng)一種方法。你可以對(duì)任何HTML元素單獨(dú)使用這種方法。

1.clearfix:after {

2 content: ".";

3 display: block;

4 clear: both;

5 visibility: hidden;

6 line-height: 0;

7 height: 0;

8}

3. @media

@media 可以設(shè)置你當(dāng)前響應(yīng)網(wǎng)站的媒介，它能幫助你根據(jù)用戶的顯示器調(diào)整網(wǎng)站的寬度。

1@media screen and (max-width: 960px) {

2}

4. transform: rotate(30deg);

結(jié)合這些轉(zhuǎn)換屬性和CSS轉(zhuǎn)場(chǎng)效果來(lái)創(chuàng)造有意思的動(dòng)態(tài)效果。

1.title {

2

3 transform: rotate(40deg);

4}

5. background-size

這條規(guī)則幫助你在網(wǎng)站中適應(yīng)全屏幕背景。這不像之前的CSS版本必須寫(xiě)很笨重的代碼。

1body {

2 background: url(image.jpg) no-repeat;

3 background-size: 100%;

4}

6. input[type="text"]

這個(gè)input[type="text"]選擇器和其他高級(jí)選擇器把你從一般水平帶到高級(jí)水平非常有幫助。使用屬性選擇器來(lái)控制輸入元素的提交版本或?yàn)橐粋€(gè)外鏈增加一個(gè)圖標(biāo)這樣很不錯(cuò)吧？

1input[type="text"] {

2 width: 250px;

3}

7. margin: 0 auto;

很奇怪，沒(méi)有任何特定的標(biāo)準(zhǔn)來(lái)使塊級(jí)元素居中。這個(gè)方法可以使塊級(jí)元素在父元素中居中。

1#container {

2 margin: 0 auto;

3}

8. a {outline: none;}

在瀏覽你的網(wǎng)站的時(shí)候，點(diǎn)一個(gè)鏈接一個(gè)巨大的虛線框就橫跨整個(gè)網(wǎng)頁(yè)這將嚴(yán)重影響用戶的心情。這個(gè)“a {outline: none;}”聲明將移除這個(gè)，但為了易用性別忘了給你的鏈接也加上:focus狀態(tài)。

1a {outline: none;}

9. overflow: hidden

這是最好的清除還沒(méi)加載到你CSS里面的元素浮動(dòng)的方法。使用它使網(wǎng)站的響應(yīng)速度更快。

1.container {

2 overflow: hidden;

3}

10. color: rgba();

PNG圖片因?yàn)樗耐该餍允顾诰W(wǎng)頁(yè)設(shè)計(jì)中很流行并廣泛使用，但是現(xiàn)在你可以使用下面這種方法同樣實(shí)現(xiàn)透明。它使用紅、綠、藍(lán)三通道并設(shè)置其不透明度值來(lái)實(shí)現(xiàn)透明，像0.5對(duì)應(yīng)%50的不透明度。

1.btn {

2 color: rgba(0,0,0,0.5);

3}

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁(yè)制作,對(duì)塔吊租賃等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)seo優(yōu)化排名優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

當(dāng)前標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)師必備的10個(gè)CSS技巧
瀏覽地址：http://aaarwkj.com/article10/esdsdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、網(wǎng)站改版、網(wǎng)站內(nèi)鏈、網(wǎng)站排名

廣告

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