欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

要知道的10個(gè)CSS技巧

  發(fā)布時(shí)間：2013-04-09 14:19:59   作者：佚名   我要評(píng)論
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)頁你必須得好好注意了。

1. @font-face

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


復(fù)制代碼
代碼如下:

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

2. .clearfix

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


復(fù)制代碼
代碼如下:

.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)站的寬度。


復(fù)制代碼
代碼如下:

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

4. transform: rotate(30deg);

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


復(fù)制代碼
代碼如下:

.title {</p> <p>transform: rotate(40deg);
}

5. background-size

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


復(fù)制代碼
代碼如下:

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ò)吧？


復(fù)制代碼
代碼如下:

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

7. margin: 0 auto;

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


復(fù)制代碼
代碼如下:

#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)。


復(fù)制代碼
代碼如下:

a {outline: none;}

9. overflow: hidden

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


復(fù)制代碼
代碼如下:

a {outline: none;}

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的不透明度。


復(fù)制代碼
代碼如下:

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

相關(guān)文章

  • 10個(gè)必備的CSS技巧總結(jié)

    這篇文章主要介紹了10個(gè)必備的CSS技巧總結(jié),隨看隨記,敬請(qǐng)收藏~需要的朋友可以參考下
    2015-06-29

  • 最常用和實(shí)用的CSS技巧

    最常用和實(shí)用的CSS技巧，不論是前臺(tái)美工還是后臺(tái)成員人員都需要注意的地方。
    2010-01-05

  • 21個(gè)神奇的CSS技巧

    層疊樣式表（CSS）是現(xiàn)代的網(wǎng)站設(shè)計(jì)不可或缺的重要組成部分，就像10年前那樣，沒有它網(wǎng)站就會(huì)顯得是丑陋的。隨著時(shí)間的推移，網(wǎng)絡(luò)中的CSS的教程質(zhì)量已有顯著的提高。
    2009-10-27

  • 網(wǎng)頁制作中應(yīng)用的50個(gè)CSS技巧(國外)

    幾乎可以肯定的CSS是最好的一個(gè)網(wǎng)頁設(shè)計(jì)的發(fā)展，因?yàn)榈谝淮螆D形的Web瀏覽器通過了關(guān)于大規(guī)模，凡表創(chuàng)建笨重，緩慢加載網(wǎng)頁，創(chuàng)建的CSS更加精簡和實(shí)用的網(wǎng)頁。
    2009-08-03

  • CSS技巧：IE6用import導(dǎo)入CSS的問題

    網(wǎng)頁制作Webjx文章簡介：本文描述了一個(gè)在IE6下用import導(dǎo)入CSS的問題！ 在ie 6中可以先寫CSS再加import比如 p {} @import url("base.css");
    2009-04-02

  • 書寫CSS的5個(gè)小技巧讓你的樣式更規(guī)范

    CSS在書寫過程中會(huì)一些小技巧，會(huì)省時(shí)省力，比如按字母順序來排列css、先標(biāo)記 后css等等，本文整理了一些，感興趣的朋友可以參考下希望對(duì)大家書寫css有所幫助
    2013-08-13

  • CSS Hack技術(shù)介紹及常用的Hack技巧集錦

    這篇文章主要介紹了CSS Hack技術(shù)介紹及常用的Hack技巧集錦,本文講解了什么是CSS Hack、常用的CSS Hack、IE6對(duì)!important的支持、IE6下的多選擇符等內(nèi)容,需要的朋友可以參考
    2014-10-08

  • CSS hack技巧之IE6，IE7，firefox顯示不同效果

    區(qū)別不同瀏覽器的CSS hack寫法
    2010-03-06

  • IE6、IE7和FF的最簡單的hack技巧-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)

    　　關(guān)于CSS HACK的文章在webjx.com中提及的也很多。 　　CSSer必須掌握的關(guān)于IE6、IE7和FF的最簡單的hack技巧。 FF瀏覽器 .test{ height:20px; background-co
    2008-10-17

  • CSS常用技巧之CSS書寫技巧和CSS HACK技巧

    不同的瀏覽器對(duì)CSS的解析結(jié)果是不同的，因此會(huì)導(dǎo)致相同的CSS輸出的頁面效果不同，這就需要CSS Hack來解決瀏覽器局部的兼容性問題，本文給大家分享CSS常用技巧之CSS書寫技巧
    2016-01-12

最新評(píng)論