相信CSS對網站設計高手來說都不是一個陌生的詞匯,CSS的出現使得我們的網站設計更容易被閱讀,為網站建設行業的發展注入了血液。成創網絡今天就來講一講CSS在網站設計中的常用技巧。
第一點,網站設計中Block和inline元素對比
其實,所有的HTML元素都屬于block和inline兩者中之一,但BLOCK和INLINE又各自有著不同的特點。
block的特點主要體現在以下幾個方面:
1、block總是在新行上開始;
2、block的高度,行高以及頂和底邊距都可控制;
3、block的寬度缺省是它的容器的100%,除非設定一個度
而INLINE元素在網站設計中的特點則主要表現在如下幾個方面:
1、inline總是和其他元素在一行上;
2、inline的高,行高及頂和底邊距不可改變;
3、inline的寬度就是它的文字或圖片的寬度,不可改變
第二點,網站設計中的box黑客方法
網站設計中之所以會存在如此多的box黑客方法,主要是因為在IE6之前的IE瀏覽器對box的理解跟別人都不一樣,它的寬度要包含邊線寬和空白。
要想讓IE5同其他瀏覽器保持一致,成創網絡建議大家可以使用以下辦法:
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一個寬度是所有瀏覽器都能讀懂的指令,但IE5.x卻不能讀懂第2行的寬度設置,因為那一行上有空白的注釋符號,所以IE5.x就用20減掉一些空白,而其他瀏覽器則會用14作為寬度,因為它是第2行,會覆蓋掉第1行。
第三點,網站設計中的頁面最小寬度
成創網絡認為min-width是個非常方便的CSS命令,它可以指定頁面的最小寬度,保證排版的高準確率,可惜的是IE無法理解它的意思,而把width當成是最小寬度使用,為了解決IE的這一現狀問題,在網站設計中可以使用以下CSS指令:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
實際上也就是讓IE通過Javascript的判定最小寬度。
網站設計IE實現最大寬度CSS指令同理可寫為:
#container
{
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}
第四點,網站設計要區分大小寫
當我們在XHTML中使用CSS時,CSS里定義的元素名稱是區分大小寫的。為了避免類似錯誤的出現,成創網絡建議所有的定義名稱都可以采用小寫。
第五點,網站設計時可取消class和id前的元素限定
當我們給一個元素定義class或者id時,成創網絡建議大家可以省略前面的元素限定,因為在網站設計中ID是一個頁面里唯一的,而class則可以在頁面中多次使用,限定某個元素毫無意義。