開(kāi)始研究響應(yīng)式web設(shè)計(jì)，CSS 網(wǎng)頁(yè)布局是入門。下面由學(xué)習(xí)啦小編為大家整理的CSS網(wǎng)頁(yè)布局的方法，希望大家喜歡!

　　CSS網(wǎng)頁(yè)布局的方法

　　1、ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的，而在IE中只有margin有值。

　　2、同一個(gè)的class選擇符可以在一個(gè)文檔中重復(fù)出現(xiàn)，而id選擇符卻只能出現(xiàn)一次;對(duì)一個(gè)標(biāo)簽同時(shí)使用class和id進(jìn)行CSS定義，如果定義有重復(fù)，id選擇符做的定義有效，是因?yàn)镮D的權(quán)值要比CLASS大。

　　3、一個(gè)兼容性調(diào)整(IE和Mozilla)的笨辦法：初學(xué)可能會(huì)碰到這樣一個(gè)情況：同樣一個(gè)標(biāo)簽的屬性在IE設(shè)置成A顯示是正常的，而在Mozilla里必須要設(shè)成B才能正常顯示，或者兩個(gè)倒過(guò)來(lái)。

　　臨時(shí)解決方法：選擇符{屬性名:B !important;屬性名:A}

　　4、如果一組要嵌套的標(biāo)簽之間需要些間距的話，那就留給位于里面的標(biāo)簽的margin屬性吧，而不要去定義位于外面的標(biāo)簽的padding

　　5、li標(biāo)簽前面的圖標(biāo)推薦使用background-image，而不是list-style-image。

　　6、IE分不清繼承關(guān)系和父子關(guān)系的差別，全部都是繼承關(guān)系。

　　7、在給你的標(biāo)簽瘋狂加選擇符的時(shí)候，別忘了在CSS里給選擇符加上注釋。 等你以后修改你的CSS的時(shí)候就知道為什么要這么做了。

　　8、如果你給一個(gè)標(biāo)簽設(shè)置了一個(gè)深色調(diào)的背景圖片和亮色調(diào)的文字效果。建議這個(gè)時(shí)候給你的標(biāo)簽再設(shè)置一個(gè)深色調(diào)的背景顏色。

　　9、定義鏈接的四種狀態(tài)要注意先后順序: Link Visited Hover Active

　　10、與內(nèi)容無(wú)關(guān)的圖片請(qǐng)使用background

　　11、定義顏色可以縮寫(xiě)#8899FF=#89F

　　12、table在某些方面比其它標(biāo)簽表現(xiàn)的要好的多。請(qǐng)?jiān)谛枰袑?duì)齊的地方用它。

　　CSS簡(jiǎn)寫(xiě)的方法

　　1.色彩縮寫(xiě)

　　色彩的縮寫(xiě)最簡(jiǎn)單，在色彩值用16進(jìn)制的時(shí)候，如果每種顏色的值相同，就可以寫(xiě)成一個(gè)：

　　color：#113366

　　可以簡(jiǎn)寫(xiě)為

　　color：#136

　　所有用到16進(jìn)制色彩值的地方都可以使用簡(jiǎn)寫(xiě)，比如background-color、border-color、text-shadow、box-shadow等。

　　2.盒子大小

　　這里主要用于兩個(gè)屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個(gè)方向，每個(gè)方向都有個(gè)外邊距：

　　margin-top:1px;

　　margin-right:1px;

　　margin-botton:1px;

　　margin-left:1px;

　　3.list-style也有三個(gè)屬性：

　　list-style-type:none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman

　　list-style-position: inside || outside || inherit

　　list-style-image: (url) || none || inherit

　　CSS應(yīng)該注意哪些

　　1. CSS字體屬性簡(jiǎn)寫(xiě)規(guī)則

　　一般用CSS設(shè)定字體屬性是這樣做的：

　　font-weight: bold;

　　font-style: italic;

　　font-varient: small-caps;

　　font-size: 1em;

　　line-height: 1.5em;

　　font-family: verdana,sans-serif

　　但也可以把它們?nèi)繉?xiě)到一行上去：

　　font: bold italic small-caps 1em/1.5em verdana,sans-serif

　　真不錯(cuò)!只有一點(diǎn)要提醒的：這種簡(jiǎn)寫(xiě)方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。而且，如果你沒(méi)有設(shè)定font-weight, font-style, 以及 font-varient ，他們會(huì)使用缺省值，這點(diǎn)要記上。

　　2. 同時(shí)使用兩個(gè)類

　　一般只能給一個(gè)元素設(shè)定一個(gè)類(Class)，但這并不意味著不能用兩個(gè)。事實(shí)上，你可以這樣：

　　...

　　同時(shí)給P元素兩個(gè)類，中間用空格格開(kāi)，這樣所有text和side兩個(gè)類的屬性都會(huì)加到P元素上來(lái)。如果它們兩個(gè)類中的屬性有沖突的話，后設(shè)置的起作用，即在CSS文件中放在后面的類的屬性起作用。

　　3. CSS border的缺省值

　　通?？梢栽O(shè)定邊界的顏色，寬度和風(fēng)格，如：

　　border: 3px solid #000

　　這位把邊界顯示成3像素寬，黑色，實(shí)線。但實(shí)際上這里只需要指定風(fēng)格即可。

　　如果只指定了風(fēng)格，其他屬性就會(huì)使用缺省值。一般地，Border的寬度缺省是medium，一般等于3到4個(gè)像素;缺省的顏色是其中文字的顏色。如果這個(gè)值正好合適的話，就不用設(shè)那么多了。

　　4. CSS用于文檔打印

　　許多網(wǎng)站上都有一個(gè)針對(duì)打印的版本，但實(shí)際上這并不需要，因?yàn)榭梢杂肅SS來(lái)設(shè)定打印風(fēng)格。

　　也就是說(shuō)，可以為頁(yè)面指定兩個(gè)CSS文件，一個(gè)用于屏幕顯示，一個(gè)用于打?。?/p>

　　第1行就是顯示，第2行是打印，注意其中的media屬性。

　　但應(yīng)該在打印CSS中寫(xiě)什么東西呢?你可以按設(shè)計(jì)普通CSS的方法來(lái)設(shè)定它。設(shè)計(jì)的同時(shí)就可以把這個(gè)CSS設(shè)成顯示CSS來(lái)檢查它的效果。也許你會(huì)使用 display: none 這個(gè)命令來(lái)關(guān)掉一些裝飾圖片，再關(guān)掉一些導(dǎo)航按鈕。要想了解更多，可以看“打印差異”這一篇。

　　5. 圖片替換技巧

　　一般都建議用標(biāo)準(zhǔn)的HTML來(lái)顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時(shí)，就只能用圖片了。