（學習自CSDN）
本文将介紹一些CSS設計技巧，包括取消下劃線、設計響應式視訊、背景圖檔的設定以及相對值等。這些技巧可以适用于各種類型的網站，而且對于後期的網站維護也十分友善。
CSS已成為Web發展不可或缺的部分，開發人員可以使用它來改變網頁元素的樣式。而随着響應式設計越來越流行，CSS在響應式設計中已扮演着舉足輕重的角色，在進行響應式設計時，倘若你能掌握一些CSS技巧，将大大提高你的工作效率。
本文将介紹一些CSS設計技巧，包括取消下劃線、設計響應式視訊、背景圖檔的設定以及相對值等。
1.取消下劃線
現在越來越多的網站文本連結已取消下劃線，而這已成為一種Web設計趨勢，尤其是在做響應式網站時。下面提供一段簡單的CSS代碼，可以輕松取消文本連結下劃線：
<style type="text/css">
a{
text-decoration:none;
}
</style>
2.響應式視訊
在網頁中嵌入視訊，這裡介紹tjkdesign.com給大家，裡面提供了許多CSS技巧，幫助你在頁面中嵌入響應式視訊（ 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文本連結
越來越多的人喜歡在手機上浏覽網頁，這使得Rollover連結變得越來越流行。想要實作該效果一點都不難，代碼也非常簡單。
<style type="text/css">
a:hover{
color:red;
}
</style>
4.最大、最小寬度
最大最小寬度可以幫助頁面元素設定邊界線，其最基本的目的是使所有頁面元素都能在邊界範圍之内。下面提供一段代碼，你也可以根據需要進行修改：
.container{
width:800px;
max-width:90%;
}
下面這段代碼将會根據邊界線自動調整圖檔大小：
img{
max-width:100%;
height;auto;
}
上面的這段代碼僅适用于IE7和9，對于IE8需要作出以下修改：
@media \0screen{
img{
width;auto;
/*for ie 8*/
}
}
最小寬度設定
5.背景圖檔
一些開發人員喜歡給table或者block設定背景圖檔，CSS有一段代碼是專門設定背景圖檔的：
<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);
height:200px;
width:400px;
border:1px solid black;">
</div>
6.相對值
相對值是響應式設計中非常重要的部分，如果你想要獲得最佳效果，你就應該知道如何使用這些值，這對網站的布局是非常重要的。
Relative Font Size
在設定字型相對大小時，需要根據父元素進行設定：
相對比例填充
7.突出邊界
border-bottom: 2px solid #427AA8;
8. Word-Break
下面這段代碼可以很好的實作文本換行：
.break-word{
word-wrap:break-word;
}
9.CSS溢出：隐藏技巧
visible的相對值預設情況下是隐藏的，如下圖所示，超出box部分的内容就被隐藏起來了。
總結：
以上都是用于響應式設計的最簡單的技巧，并且可以被普遍使用于各種網站上，對于後期的網站維護也十分友善。