九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
網(wǎng)頁設(shè)計(jì)師必備的10個(gè)CSS技巧

英文原文:10 essential css rules for web designers,翻譯:曾沙@oschina

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

1. @font-face

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

1
2
3
4
@font-face {
    font-family: Blackout;
    src: url("assests/blackout.ttf") format("truetype");
}

2. .clearfix

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

1
2
3
4
5
6
7
8
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

3. @media

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

 

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

 

4. transform: rotate(30deg); 結(jié)合這些轉(zhuǎn)換屬性和CSS轉(zhuǎn)場效果來創(chuàng)造有意思的動(dòng)態(tài)效果。

1
2
3
.title {
    transform: rotate(40deg);
}

5. background-size

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

1
2
3
4
body {
    background: url(image.jpg) no-repeat;
    background-size: 100%;
}

6. input[type="text"]

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

1
2
3
input[type="text"] {
    width: 250px;
}

7. margin: 0 auto;

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

1
2
3
#container {
    margin: 0 auto;
}

8. a {outline: none;}

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

1
 a {outline: none;}

9. overflow: hidden

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

1
2
3
.container {
    overflow: hidden;
}

10. color: rgba();

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

1
2
3
.btn {
    color: rgba(0,0,0,0.5);
}

 

1 收藏 評(píng)論
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
剖析標(biāo)注HTML元素時(shí)class比id所具有的優(yōu)勢
CSS2.0中最常用的十八般兵器(4)
CSS 選擇器參考手冊(cè)
css選擇器
一個(gè)好玩的網(wǎng)站
Python爬蟲入門,快速抓取大規(guī)模數(shù)據(jù)(第二部分)
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服