南寧達(dá)內(nèi)：9個(gè)非常有用的CSS網(wǎng)頁設(shè)計(jì)技巧

CSS也叫層疊樣式表，它現(xiàn)在是web開發(fā)不可或缺的一部分。開發(fā)者可以對(duì)任何頁面中的任意元素使用CSS，使之前認(rèn)為不可能的效果成為可能。如果你有正確的源代碼，你可以輕易改變本空間、下劃鏈接和其他一些之前認(rèn)為是不可改變的一些東西。隨著移動(dòng)瀏覽的流行，響應(yīng)式設(shè)計(jì)也變得流行起來。這里，我們會(huì)討論一些最常用的CSS技巧，這些都在網(wǎng)頁設(shè)計(jì)的開發(fā)和設(shè)計(jì)中發(fā)揮著重要作用。作為開發(fā)者都知道維護(hù)網(wǎng)站比設(shè)計(jì)網(wǎng)站更難，所以開發(fā)者必須懂得網(wǎng)頁布局平衡的藝術(shù)并得確保任何元素或鏈接都是好的。

下面讓我們來看看那些在網(wǎng)頁設(shè)計(jì)中扮演重要角色的幾個(gè)簡(jiǎn)單易用的CSS吧。

1、消除下劃線
我們都知道，CSS的進(jìn)入使網(wǎng)頁開發(fā)有了很多改變。所有文本鏈接的下劃線將不復(fù)存在。從網(wǎng)頁盛行，如果你瀏覽網(wǎng)頁時(shí)也應(yīng)該注意到了其實(shí)文本鏈接標(biāo)注下劃線也就為了突出他們。不過現(xiàn)在由于CSS代碼的出現(xiàn)，文本鏈接的下劃線可以通過很簡(jiǎn)單的代碼就去掉。

下面是去除下劃線的簡(jiǎn)單代碼：

1 <style type=”text/css”>

2 a {

3 text-decoration:none;

4 }

5 </style>

應(yīng)用這段代碼，便可去除文本鏈接中的下劃線。我個(gè)人認(rèn)為，沒有下劃線的文本鏈接好看多了。當(dāng)然，這只是個(gè)人喜好并非最新趨勢(shì)或是網(wǎng)頁設(shè)計(jì)的要求。帶下劃線的文本鏈接也是可以的。

2、響應(yīng)視頻
為了嵌入視頻并使其自適應(yīng)長(zhǎng)寬，我們?yōu)樗虚_發(fā)人員準(zhǔn)備了一個(gè)非常有用的CSS技巧。在我進(jìn)一步之前，我想引入介紹這個(gè)CSS技巧并幫助很多開發(fā)者嵌入交互視頻的網(wǎng)站tjkdesign.com

01 .video {

02 position: relative;

03 padding-bottom: 56.25%;

04 height: 0;

05 overflow: hidden;

06 }

07  

08 .video iframe,

09 .video object,

10 .video embed {

11 position: absolute;

12 top: 0;

13 left: 0;

14 width: 100%;

15 height: 100%;

16 }

3、鏈接變色
鏈接變色最近獲得很高的人氣特別是在移動(dòng)瀏覽盛行之后。創(chuàng)建一個(gè)滾動(dòng)的效果也并不難，只需要幾行代碼。這段代碼不僅從整體上修飾了代碼，還讓當(dāng)鼠標(biāo)經(jīng)過時(shí)文字變色。

1 <style type="text/css">

2 a:hover{

3 color:red;

4 }

5 </style>

只是更進(jìn)一步說，之前提到的消除下劃線的那段代碼和上面的代碼都需要加入頭部信息。還有，如果你想用你選擇的顏色，你用你想要的顏色替換掉‘red’就可以了。

 4、最小寬度和最大寬度
最大寬度屬性幫助開發(fā)者限制文本或其他元素的寬度。最大寬度的目的是把你的元素限制在邊界線以內(nèi)。使用下面的代碼就可以限制最大寬度，你還可以根據(jù)你的需要改變數(shù)值。

1 .container {

2  

3 width: 800px;

4 max-width: 90%;

5 }

- 自適應(yīng)圖片大小

下面的代碼可以幫你根據(jù)限制的寬度自動(dòng)調(diào)節(jié)圖片大小。你需要做的就是設(shè)最大寬度為100%高度自適應(yīng)。

1 img {

2 max-width: 100%;

3 height: auto;

4 }

不過對(duì)IE8上面的代碼需要做些許調(diào)整，因?yàn)樯厦娴拇a只對(duì)IE7和IE9起效。對(duì)IE8如下：

1 <a href target="_blank" rel="nofollow">@media</a>  \0screen {

2 img {

3 width: auto; /* for ie 8 */

4 }

5 }

- 最小寬度

要時(shí)刻記得最大寬度和最小寬度的區(qū)別。最大寬度把所有元素限制在框內(nèi)，而最小寬度為文本或其他元素設(shè)置最小寬度。不過應(yīng)用這個(gè)樣式，到達(dá)最小寬度后你的網(wǎng)頁不會(huì)更進(jìn)一步按比例縮小。

5、CSS設(shè)置背景圖片
一些開發(fā)者喜歡通過表格來設(shè)置背景圖片或塊級(jí)元素。如果你也是這樣你應(yīng)該很樂意知道用CSS代碼使塊級(jí)元素包括任一方形區(qū)域加上背景圖片。它是可以是段落或者標(biāo)題。同樣的，加入你想要的背景圖片你只需要加入以下代碼：

1 <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>

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

6、相對(duì)值
相對(duì)值在響應(yīng)式的網(wǎng)頁設(shè)計(jì)中相當(dāng)有用。如果你想得到最好的效果，你應(yīng)該知道什么時(shí)候使用這些值讓它發(fā)揮最大益處。這樣它將幫你得到最好的布局效果。

- 相對(duì)字體大小

對(duì)字體大小，你要做的就是使用相對(duì)單位像em或百分值（%）。這樣很容易控制字體大小、行距和行高的多少。這樣你想做任何調(diào)整只需要改變父級(jí)元素便可。

- 相對(duì)百分比內(nèi)邊距

通過下面的截圖，你會(huì)理解使用百分值的內(nèi)邊距要比固定內(nèi)邊距要好得多。它可以根據(jù)你的每一次調(diào)整做出相應(yīng)改變，這就是為什么百分值的內(nèi)邊距會(huì)更有效。

7、有趣的邊框
下面另一個(gè)好用的CSS技巧是幫你無時(shí)的變化邊框。如果你想高亮你的邊框，用用下面的代碼吧。

1 border-bottom: 2px solid #427AA8;

 你可以根據(jù)你的需求改變值。

 8、斷字
CSS技巧也包括包住一個(gè)文本讓它不出現(xiàn)在一行，因?yàn)檫@樣實(shí)在不好看。下面的代碼幫你行內(nèi)斷字。

1 .break-word {

2 word-wrap:break-word;

3 }

9、overflow hidden屬性技巧
默認(rèn)顯示相反的就是隱藏。它會(huì)隱藏超出盒子的任何東西。

總結(jié)
這里有對(duì)響應(yīng)式網(wǎng)頁設(shè)計(jì)最有用的CSS技巧。這些技巧應(yīng)用到你的網(wǎng)頁中確實(shí)會(huì)有幫助。有了CSS，你不必堅(jiān)持你之前開發(fā)的東西，你可以通過簡(jiǎn)單的代碼做出改變。