9個非常有用的CSS網(wǎng)頁設(shè)計技巧
CSS也叫層疊樣式表，它現(xiàn)在是web開發(fā)不可或缺的一部分。開發(fā)者可以對任何頁面中的任意元素使用CSS，使之前認(rèn)為不可能的效果成為可能。如果你有正確的源代碼，你可以輕易改變本空間、下劃鏈接和其他一些之前認(rèn)為是不可改變的一些東西。隨著移動瀏覽的流行，響應(yīng)式設(shè)計也變得流行起來。這里，我們會討論一些最常用的CSS技巧，這些都在網(wǎng)頁設(shè)計的開發(fā)和設(shè)計中發(fā)揮著重要作用。作為開發(fā)者都知道維護網(wǎng)站比設(shè)計網(wǎng)站更難，所以開發(fā)者必須懂得網(wǎng)頁布局平衡的藝術(shù)并得確保任何元素或鏈接都是好的。
下面讓我們來看看那些在網(wǎng)頁設(shè)計中扮演重要角色的幾個簡單易用的CSS吧。
1、消除下劃線
我們都知道，CSS的進入使網(wǎng)頁開發(fā)有了很多改變。所有文本鏈接的下劃線將不復(fù)存在。從網(wǎng)頁盛行，如果你瀏覽網(wǎng)頁時也應(yīng)該注意到了其實文本鏈接標(biāo)注下劃線也就為了突出他們。不過現(xiàn)在由于CSS代碼的出現(xiàn)，文本鏈接的下劃線可以通過很簡單的代碼就去掉。
下面是去除下劃線的簡單代碼：
| 1 | <style type=”text/css”> |
| 2 | a { |
| 3 | text-decoration:none; |
| 4 | } |
| 5 | </style> |
應(yīng)用這段代碼，便可去除文本鏈接中的下劃線。我個人認(rèn)為，沒有下劃線的文本鏈接好看多了。當(dāng)然，這只是個人喜好并非最新趨勢或是網(wǎng)頁設(shè)計的要求。帶下劃線的文本鏈接也是可以的。
2、響應(yīng)視頻
為了嵌入視頻并使其自適應(yīng)長寬，我們?yōu)樗虚_發(fā)人員準(zhǔn)備了一個非常有用的CSS技巧。在進一步講解之前，介紹這個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、鏈接變色
鏈接變色最近獲得很高的人氣特別是在移動瀏覽盛行之后。創(chuàng)建一個滾動的效果也并不難，只需要幾行代碼。這段代碼不僅從整體上修飾了代碼，還讓當(dāng)鼠標(biāo)經(jīng)過時文字變色。
| 1 | <style type="text/css"> |
| 2 | a:hover{ |
| 3 | color:red; |
| 4 | } |
| 5 | </style> |
只是更進一步說，之前提到的消除下劃線的那段代碼和上面的代碼都需要加入頭部信息。還有，如果你想用你選擇的顏色，你用你想要的顏色替換掉‘red’就可以了。
4、最小寬度和最大寬度
最大寬度屬性幫助開發(fā)者限制文本或其他元素的寬度。最大寬度的目的是把你的元素限制在邊界線以內(nèi)。使用下面的代碼就可以限制最大寬度，你還可以根據(jù)你的需要改變數(shù)值。
| 1 | .container { |
| 2 |
| 3 | width: 800px; |
| 4 | max-width: 90%; |
| 5 | } |
- 自適應(yīng)圖片大小
下面的代碼可以幫你根據(jù)限制的寬度自動調(diào)節(jié)圖片大小。你需要做的就是設(shè)最大寬度為100%高度自適應(yīng)。
| 1 | img { |
| 2 | max-width: 100%; |
| 3 | height: auto; |
| 4 | } |
不過對IE8上面的代碼需要做些許調(diào)整，因為上面的代碼只對IE7和IE9起效。對IE8如下：
| 1 | <a href="http://my.oschina.net/media" target="_blank" rel="nofollow">@media</a> \0screen { |
| 2 | img { |
| 3 | width: auto; /* for ie 8 */ |
| 4 | } |
| 5 | } |
- 最小寬度
要時刻記得最大寬度和最小寬度的區(qū)別。最大寬度把所有元素限制在框內(nèi)，而最小寬度為文本或其他元素設(shè)置最小寬度。不過應(yīng)用這個樣式，到達最小寬度后你的網(wǎng)頁不會更進一步按比例縮小。
5、CSS設(shè)置背景圖片
一些開發(fā)者喜歡通過表格來設(shè)置背景圖片或塊級元素。如果你也是這樣你應(yīng)該很樂意知道用CSS代碼使塊級元素包括任一方形區(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、相對值
相對值在響應(yīng)式的網(wǎng)頁設(shè)計（所謂響應(yīng)式網(wǎng)頁設(shè)計之前圖趣教程講解過。）中相當(dāng)有用。如果你想得到最好的效果，你應(yīng)該知道什么時候使用這些值讓它發(fā)揮最大益處。這樣它將幫你得到最好的布局效果。
- 相對字體大小
對字體大小，你要做的就是使用相對單位像em或百分值（%）。這樣很容易控制字體大小、行距和行高的多少。這樣你想做任何調(diào)整只需要改變父級元素便可。
- 相對百分比內(nèi)邊距
通過下面的截圖，你會理解使用百分值的內(nèi)邊距要比固定內(nèi)邊距要好得多。它可以根據(jù)你的每一次調(diào)整做出相應(yīng)改變，這就是為什么百分值的內(nèi)邊距會更有效。
7、有趣的邊框
下面另一個好用的CSS技巧是幫你無時的變化邊框。如果你想高亮你的邊框，用用下面的代碼吧。
| 1 | border-bottom: 2px solid #427AA8; |
你可以根據(jù)你的需求改變值。
8、斷字
CSS技巧也包括包住一個文本讓它不出現(xiàn)在一行，因為這樣實在不好看。下面的代碼幫你行內(nèi)斷字。
| 1 | .break-word { |
| 2 | word-wrap:break-word; |
| 3 | } |
9、overflow hidden屬性技巧
默認(rèn)顯示相反的就是隱藏。它會隱藏超出盒子的任何東西。
總結(jié)
這里有對響應(yīng)式網(wǎng)頁設(shè)計最有用的CSS技巧。這些技巧應(yīng)用到你的網(wǎng)頁中確實會有幫助。有了CSS，你不必堅持你之前開發(fā)的東西，你可以通過簡單的代碼做出改變。
本文地址：http://m.likemindfilms.com/tutorial/tutorial1194.html
