網(wǎng)頁(yè)制作學(xué)習(xí)心得

加入收藏<aonClick="window.external.AddFavorite(location.href,document.title)"style="cursor:hand;color:blue"><fontcolor="blue"size=2>加入收藏</font></a>一、在CSS中定義Li為：

li{

background:url(icon1.gif)no-repeat5px7px;

}li的背景圖片為icon1.gif

no-repeat的意思是背景不重復(fù)

5px7px意思是背景圖片從相對(duì)litop:5pxleft:7px的位置開(kāi)始顯示。二、網(wǎng)頁(yè)中加入豎線的方法<liclass="menuDiv"></li>.menuDiv{width:1px;height:28px;background:#999}三、表格里加入虛線的方法<td><divstyle="border-bottom:1pxdashed#ccc"></div></td>margin:auto;/*層居中*/border-bottom:5pxsolid#EFEFEF;/*畫(huà)一條淺灰色實(shí)線*/clear:both/*清除浮動(dòng)*/另一個(gè)要說(shuō)明的就是clear:both，表示清除左、右所有的浮動(dòng)，在接下來(lái)的布局中我們還會(huì)用這個(gè)屬性：clear:left/right。在這里添加clear:both是由于之前的ul、li元素設(shè)置了浮動(dòng)，如果不清除則會(huì)影響banner層位置的設(shè)定。float:left;/*浮動(dòng)居左*/clear:left;/*不允許左側(cè)存在浮動(dòng)*/overflow:hidden;/*超出寬度部分隱藏*/添加overflow:hidden則可以使內(nèi)容太長(zhǎng)（例如圖片）的部份自動(dòng)被隱藏。通常我們會(huì)看到一些網(wǎng)頁(yè)在載入時(shí)，由于圖片太大，導(dǎo)致布局被撐開(kāi)，直到頁(yè)面下載完成才恢復(fù)正常，通過(guò)添加overflow:hidden就可以解決這個(gè)問(wèn)題。四、浮動(dòng)IE6文本產(chǎn)生3象素的bug時(shí)指挨著浮動(dòng)元素的文本會(huì)神奇的被踢出去3像素，好像浮動(dòng)元素的周?chē)幸粋€(gè)奇怪的力場(chǎng)一樣。解決辦法：原代碼：

<divclass="box1"><divclass="box1_2">float:left;width:200px;height:100px;background-color:green;</di><divclass="box1_3">margin-left:200px;width:150px;height:100px;background-color:red;</div></div>

改后代碼：

<divclass="box1"><divclass="box1_4">margin-right:-3px;float:left;width:200px;height:100px;background-color:green;</div><divclass="box1_3">width:150px;height:100px;background-color:red;</div></div>

DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例3：設(shè)置層的透明度f(wàn)ilter:alpha(opacity=70);

opacity:0.7;

DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例7：取消class和id前的元素限定當(dāng)你寫(xiě)給一個(gè)元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁(yè)面里是唯一的，而class可以在頁(yè)面中多次使用。你限定某個(gè)元素毫無(wú)意義。例如：

div#content{/*declarations*/}

fieldset.details{/*declarations*/}

可以寫(xiě)成

#content{/*declarations*/}

.details{/*declarations*/}

這樣可以節(jié)省一些字節(jié)。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例12：使用子選擇器使用子選擇器(descendantselectors)

CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節(jié)約大量的class定義。我們來(lái)看下面這段代碼：

<divid="subnav">

<ul>

<liclass="subnavitem"><ahref="#"class="subnavitem">Item1</a></li>>

<liclass="subnavitemselected"><ahref="#"class="subnavitemselected">Item1</a></li>

<liclass="subnavitem"><ahref="#"class="subnavitem">Item1</a></li>

</ul>

</div>

這段代碼的CSS定義是：

div#subnavul{/*Somestyling*/}

div#subnavulli.subnavitem{/*Somestyling*/}

div#subnavulli.subnavitema.subnavitem{/*Somestyling*/}

div#subnavulli.subnavitemselected{/*Somestyling*/}

div#subnavulli.subnavitemselecteda.subnavitemselected{/*Somestyling*/}

你可以用下面的方法替代上面的代碼

<ulid="subnav">

<li><ahref="#">Item1</a></li>

<liclass="sel"><ahref="#">Item1</a></li>

<li><ahref="#">Item1</a></li>

</ul>

樣式定義是：

#subnav{/*Somestyling*/}

#subnavli{/*Somestyling*/}

#subnava{/*Somestyling*/}

#subnav.sel{/*Somestyling*/}

#subnav.sela{/*Somestyling*/}

用子選擇器可以使你的代碼和CSS更加簡(jiǎn)潔、更加容易閱讀。alt屬性指定了當(dāng)圖片不能顯示的時(shí)候就顯示供替換文本<imgsrc="logo.gif"alt="互動(dòng)力工作室標(biāo)志，點(diǎn)擊返回首頁(yè)">另外注意UL定義中的DISPLAY:inline;一句表示將li強(qiáng)制作為內(nèi)聯(lián)對(duì)象呈遞，從對(duì)象中刪除行，通俗講就是li不換行。實(shí)現(xiàn)橫向排列。你也可以象例子中定義每個(gè)子菜單的寬度，控制菜單的間隔。四.取消class和id前的元素限定當(dāng)你寫(xiě)給一個(gè)元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁(yè)面里是唯一的，而class可以在頁(yè)面中多次使用。你限定某個(gè)元素毫無(wú)意義。例如：div#content{/*declarations*/}fieldset.details{/*declarations*/}可以寫(xiě)成#content{/*declarations*/}.details{/*declarations*/}這樣可以節(jié)省一些字節(jié)。Overflow可能的值值描述visible默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。hidden內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。scroll內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。auto如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。inherit規(guī)定應(yīng)該從父元素繼承overflow屬性的值。設(shè)置overflow屬性：div{width:150px;height:150px;overflow:scroll;}九.使用子選擇器(descendantselectors)CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節(jié)約大量的class定義。我們來(lái)看下面這段代碼：<divid="subnav"><ul><liclass="subnavitem"><ahref="#"class="subnavitem">Item1</a></li><liclass="subnavitemselected"><ahref="#"class="subnavitemselected">Item1</a></li><liclass="subnavitem"><ahref="#"class="subnavitem">Item1</a></li></ul></div>這段代碼的CSS定義是：div#subnavul{/*Somestyling*/}div#subnavulli.subnavitem{/*Somestyling*/}div#subnavulli.subnavitema.subnavitem{/*Somestyling*/}div#subnavulli.subnavitemselected{/*Somestyling*/}div#subnavulli.subnavitemselecteda.subnavitemselected{/*Somestyling*/}你可以用下面的方法替代上面的代碼<ulid="subnav"><li><ahref="#">Item1</a></li><liclass="sel"><ahref="#">Item1</a></li><li><ahref="#">Item1</a></li></ul>樣式定義是：#subnav{/*Somestyling*/}#subnavli{/*Somestyling*/}#subnava{/*Somestyling*/}#subnav.sel{/*Somestyling*/}#subnav.sela{/*Somestyling*/}用子選擇器可以使你的代碼和CSS更加簡(jiǎn)潔、更加容易閱讀。十五.導(dǎo)入(Import)和隱藏CSS因?yàn)槔习姹緸g覽器不支持CSS，一個(gè)通常的做法是使用@import技巧來(lái)把CSS隱藏起來(lái)。例如：@importurl("main.css");然而，這個(gè)方法對(duì)IE4不起作用，這讓我很是頭疼了一陣子。后來(lái)我用這樣的寫(xiě)法：@import"main.css";這樣就可以在IE4中也隱藏CSS了，呵呵，還節(jié)省了5個(gè)字節(jié)呢。想了解@import語(yǔ)法的詳細(xì)說(shuō)明，可以看這里《centricle’scssfilterchart》文字的橫排與豎排writing-mode屬性有兩個(gè)值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。比如：p{writing-mode:tb-rl;/*豎排版文字*/}4、項(xiàng)目符號(hào)的問(wèn)題——使用list-style在CSS里項(xiàng)目符號(hào)有disc（實(shí)心圓點(diǎn)）、circle（空心圓圈）、square（實(shí)心方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫(xiě)羅馬數(shù)字）、upper-roman（大寫(xiě)羅馬數(shù)字）、lower-alpha（小寫(xiě)英文字母）、upper-alpha（大寫(xiě)英文字母）、none（無(wú)）。比如設(shè)定一個(gè)列表（ul或ol）的項(xiàng)目符號(hào)為方塊，如：

li{

list-style:square;

}

另外list-style還有一些值，比如可以采用一些小圖片作為項(xiàng)目符號(hào)，在list-style下直接寫(xiě)url(“圖片地址”)就可以了。注意如果一個(gè)項(xiàng)目列表的左外補(bǔ)丁（margin-left）設(shè)為零的時(shí)候，list-style-position:outside（默認(rèn)是outside）的項(xiàng)目符號(hào)不會(huì)顯示。可惜的是上述的項(xiàng)目符號(hào)似乎并不能設(shè)定大小，圓點(diǎn)和方塊始終是那么點(diǎn)。并且不能設(shè)定垂直方向上的對(duì)齊單選默認(rèn)設(shè)置<inputtype="radio"name="state"value="男"checked="checked"/>男默認(rèn)為男<inputtype="radio"name="state"value="nv"/>女border-bottom:1pxsolid#005aa7; /*下劃線效果*/ color:#005aa7; border-top:0px;border-left:0px; border-right:0px;background-color:transparent; /*背景色透明*/a:link,a:visited{ /*超鏈接