用于響應(yīng)式設(shè)計(jì)的9個(gè)CSS技巧

2013-04-07 10:11:28來(lái)源：CSDN作者：

CSS已成為Web發(fā)展不可或缺的部分，開發(fā)人員可以使用它來(lái)改變網(wǎng)頁(yè)元素的樣式。而隨著響應(yīng)式設(shè)計(jì)越來(lái)越流行，CSS在響應(yīng)式設(shè)計(jì)中已扮演著舉足輕重的角色，在進(jìn)行響應(yīng)式設(shè)計(jì)時(shí)，倘若你能掌握一些CSS技巧，將大大提高你的

CSS已成為Web發(fā)展不可或缺的部分，開發(fā)人員可以使用它來(lái)改變網(wǎng)頁(yè)元素的樣式。而隨著響應(yīng)式設(shè)計(jì)越來(lái)越流行，CSS在響應(yīng)式設(shè)計(jì)中已扮演著舉足輕重的角色，在進(jìn)行響應(yīng)式設(shè)計(jì)時(shí)，倘若你能掌握一些CSS技巧，將大大提高你的工作效率。

本文將介紹一些CSS設(shè)計(jì)技巧，包括取消下劃線、設(shè)計(jì)響應(yīng)式視頻、背景圖片的設(shè)置以及相對(duì)值等。

1.取消下劃線

現(xiàn)在越來(lái)越多的網(wǎng)站文本鏈接已取消下劃線，而這已成為一種Web設(shè)計(jì)趨勢(shì)，尤其是在做響應(yīng)式網(wǎng)站時(shí)。下面提供一段簡(jiǎn)單的CSS代碼，可以輕松取消文本鏈接下劃線：

<style type=”text/css”>

a {

text-decoration:none;

}

</style>

2.響應(yīng)式視頻

在網(wǎng)頁(yè)中嵌入視頻，里面提供了許多CSS技巧，幫助你在頁(yè)面中嵌入響應(yīng)式視頻（ DEMO）。

.video {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

}

.video iframe,

.video object,

.video embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

3.Rollover文本鏈接

越來(lái)越多的人喜歡在手機(jī)上瀏覽網(wǎng)頁(yè)，這使得Rollover鏈接變得越來(lái)越流行。想要實(shí)現(xiàn)該效果一點(diǎn)都不難，代碼也非常簡(jiǎn)單。

<style type="text/css">

a:hover{

color:red;

}

</style>

4.最大、最小寬度

最大最小寬度可以幫助頁(yè)面元素設(shè)置邊界線，其最基本的目的是使所有頁(yè)面元素都能在邊界范圍之內(nèi)。下面提供一段代碼，你也可以根據(jù)需要進(jìn)行修改：

.container {

width: 800px;

max-width: 90%;

}

下面這段代碼將會(huì)根據(jù)邊界線自動(dòng)調(diào)整圖片大小：

img {

max-width: 100%;

height: auto;

}

上面這段代碼僅適用于IE 7和9，對(duì)于IE 8需要作出以下修改：

@media \0screen {

img {

width: auto;/* for ie 8 */

}

最小寬度設(shè)定

5.背景圖片

一些開發(fā)人員喜歡給table或者block設(shè)置背景圖片，CSS有一段代碼是專門設(shè)置背景圖片的：

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>

<div style="background-image: url(../images/test-background.gif);height: 200px; width: 400px; border: 1px solid black;"> </div>

6.相對(duì)值

相對(duì)值是響應(yīng)式設(shè)計(jì)中非常重要的部分，如果你想要獲得最佳效果，你就應(yīng)該知道如何使用這些值，這對(duì)網(wǎng)站的布局是非常重要的。