1、.：.； HYPERLINK javaeye/news/3176 l # 35頂 HYPERLINK javaeye/news/3176 l # 1踩 HYPERLINK javaeye/news/3176 o 最常用和適用的CSS技巧 最常用和適用的CSS技巧1.重置閱讀器的字體大小 重置閱讀器的默許值 ，然后 HYPERLINK peakflowdesign/wordpress/essential-wordpress-toolkit-for-creating-new-themes/ t _blank 重設(shè)閱讀器的字體大小他可以運(yùn)用 HYPERLINK developer.yahoo/yui

2、/reset/ t _blank 雅虎的用戶界面重置的CSS方案 ，假設(shè)他不想下載9MB的文件，代碼如下： Java代碼 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,tdmargin:0;padding:0; tableborder-collapse:collapse;border-spacing:0; fieldset,imgborder:0; address,caption,cite,code,dfn,em,strong,th,varfont-s

3、tyle:normal;font-weight:normal; ol,ullist-style:none; caption,thtext-align:left; h1,h2,h3,h4,h5,h6font-size:100%;font-weight:normal; q:before,q:aftercontent:; abbr,acronymborder:0;body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td margin:0; padding:0; ta

4、ble border-collapse:collapse; border-spacing:0; fieldset,img border:0; address,caption,cite,code,dfn,em,strong,th,var font-style:normal; font-weight:normal; ol,ul list-style:none; caption,th text-align:left; h1,h2,h3,h4,h5,h6 font-size:100%; font-weight:normal; q:before,q:after content:; abbr,acrony

5、m border:0; 其次，我們重設(shè)閱讀器字體的大小為10像素，運(yùn)用如下： Java代碼 htmlfont-size:62.5%;html font-size: 62.5%;這個(gè)大小根本適宜，然后您可以根據(jù)本人的需求調(diào)整大小，如 標(biāo)題1為120像素: Java代碼 h1font-size:2em;h1 font-size: 2em;2.設(shè)置程度居中 大多數(shù)的網(wǎng)站目前都是固定寬度的。CSS代碼如下： Java代碼 div#containermargin:0auto;div#container margin: 0 auto;3.控制位置：絕對(duì)位置，相對(duì)位置 假設(shè)有兩個(gè)div Java代碼 div

6、有l(wèi)eft和top屬性,是用來(lái)定位的. 假設(shè)內(nèi)層的div的position屬性是absolute.那他就是相對(duì)于文檔的左上角的位置. 假設(shè)內(nèi)層的div(id為son的那個(gè))position屬性為relative,那它的left和top值就是相對(duì)于外層的div的左上角的間隔 . 4.將重要元素放置在屏幕中央 假設(shè)他希望將您想要的東西放在最中央，可以運(yùn)用以下CSS： Java代碼 div.popupheight:400px;width:500px;position:absolute;top:50%;left:50%; div.popupmargin-top:-200px;margin-left:-

7、250px;div.popup height:400px; width:500px; position: absolute; top: 50%; left: 50%;div.popup margin-top: -200px; margin-left: -250px;您必需明確的指定寬度和高度，再把top和left屬性設(shè)為他們的一半，這樣就可以是這個(gè)部分回到屏幕的中心。 5.可以反復(fù)利用的規(guī)那么 Java代碼 .leftfloat:left; .rightfloat:right; img.leftborder:2pxsolid#aaaaaa;margin:010px00; img.rightbo

8、rder:2pxsolid#aaaaaa;margin:00010px;padding:1px;.left float: left;.right float: right;img .left border:2px solid #aaaaaa; margin: 0 10px 0 0;img .right border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;設(shè)置本人的CSS款式表，就可以在您需求的時(shí)候直接的添加標(biāo)志即可。 6. 處理IE6 的浮動(dòng)元素的雙倍邊距問(wèn)題 對(duì)一個(gè)div設(shè)置了float:left 和 margin-left:

9、100px 那么在IE6中，這個(gè)bug就會(huì)出現(xiàn)。您只需求多設(shè)置一個(gè)display即可，代碼如下： Java代碼 divfloat:left;margin:40px;display:inline;div float:left;margin:40px;display:inline;7.簡(jiǎn)單的導(dǎo)航菜單 在您的設(shè)計(jì)中預(yù)設(shè)一個(gè)導(dǎo)航欄是非常有益的?？梢宰屗藢?duì)他網(wǎng)頁(yè)的主要內(nèi)容有一個(gè)大致的了解。第一次來(lái)的XHTML： Java代碼 PeakflowDesign Google ZenHabits Peakflow DesignGoogleZen HabitsCSS代碼： Java代碼 #navbarullid

10、isplay:inline;margin:010px00; #navbarulliacolor:#333;display:block;float:left;padding:5px; #navbarullia:hoverbackground:#eee;color:black;#navbar ul li display:inline;margin:0 10px 0 0;#navbar ul li a color: #333;display:block;float:left;padding:5px;#navbar ul li a:hover background:#eee;color:black;

11、8.不運(yùn)用table的form表單 正如我們?nèi)缃襁M(jìn)展網(wǎng)站設(shè)計(jì)的table-free，把重點(diǎn)是放在運(yùn)用DIVs上。不再對(duì)表的列和域進(jìn)展約束，所以我們需求一些好用的CSS，在 HYPERLINK jeffhowden/code/css/forms/ t _blank JeddHowden 發(fā)現(xiàn) Java代碼 XHTML: PersonalInformation FirstName: LastName: Zip/PostalCode: XHTML:Personal InformationFirst Name:Last Name:Zip/Postal Code:Java代碼 CSS: formdivc

12、lear:left;display:block;width:400px;zoom:1;margin:5px000;padding:1px3px; formdivlabeldisplay:block;float:left;width:130px;padding:3px5px;margin:005px0;text-align:right;CSS:form div clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;form div label display:block;float:left;wi

13、dth:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;9.讓footer總是停留在頁(yè)面的底部 在網(wǎng)頁(yè)的底部總是保管著公司的版本信息，如何是這部分信息來(lái)實(shí)現(xiàn)呢？這是一個(gè)很古老的技術(shù)，這都要?dú)w功于 HYPERLINK themaninblue/writing/perspective/2005/08/29/ t _blank The Man in Blue 。 Java代碼 XHTML： *Placeallpagecontenthere* *Placeanythingyouwantinyourfooterhere* XHTML： *

14、Place all page content here* *Place anything you want in your footer here*Java代碼 CSS: html,bodyheight:100%; #nonFooterposition:relative;min-height:100%; *html#nonFooterheight:100%; #contentpadding-bottom:9em; #footerposition:relative;margin-top:-7.5em;CSS:html, body height: 100%; #nonFooter position: relative; min-height: 100%; * html #nonFooter height: 100%; #content padding-bottom: 9em; #footer position: relative; margin-top: -7.5em; 10.在