cssdiv初級教程-免費(fèi)閱讀
【正文】 而之后添加的 overflow:hidden 則可以 使內(nèi)容太長（例如圖片）的部 份自動被隱藏 。 /*浮動居左 */ clear:left。 /*畫一條淺灰色實線 */ clear:both /*清除浮動 */ } 通過 border 很容易就繪制出一條實線了，并且減少了圖片下載所占用的網(wǎng)絡(luò)資源，使得頁面載入速度變得更快。 效果基本上已經(jīng)實現(xiàn)了，剩下的就是修改菜單的超鏈接樣式，在 中添加以下代碼： 程序代碼 menu ul li a:link,menu ul li a:visited {fontweight:bold。 按照上面說的方法，我們再添加以下代碼： 程序代碼 .menuDiv {width:1px。 到這一步，建議大家先保存預(yù)覽一下效果，我們再添加下面的內(nèi)容，效果如下： 這時，列表內(nèi)容是排列在一行，我們在 menu ul li {}再加入代碼 margin:0 10px： 程序代碼 menu ul {liststyle:none。margin:0px。 * 接下來，我們開始制作菜單，留到下一章，教程中相關(guān)文件請到下一章下載！ 三、頁面頂部制作 (2)使用列表 li制作菜單 開始此節(jié)的學(xué)習(xí)前，請確認(rèn)你已經(jīng)參照之前的幾節(jié)內(nèi)容寫入了 DIV、 CSS 到 和 文件中。由于 LOGO 圖片并沒有太多的顏色，這里我于是將這一部分保存為 GIF 格式，調(diào)色板選擇為精確，選擇 Alpha 透明度，色版為白色 (此處顏色應(yīng)與背景色相同 )，導(dǎo)出為 ，圖像寬度為 800px。textdecoration:none。 在上一章中我們寫入了一些樣式，那些樣式是為了預(yù)覽結(jié)構(gòu)而寫入的，我們把 中的樣式全部清除掉，重新寫入以下樣式代碼： 程序代碼 /*基本信息 */ body {font:12px Tahoma。 表示 X 座標(biāo)為 20 像素， Y 座標(biāo)為 100 像素的精確定位； repeat/norepeat/repeatx/repeaty 分別表示 填充滿整個層 / 不填充 / 沿 X 軸填充 / 沿 Y 軸填充。 textalign:center 文字對齊方式，可以設(shè)置為左、右、中，這里我將它設(shè)置為居中對齊。margin:0 auto。background:FFF。 下面，我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局，仔細(xì)分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以 下幾個部分： 頂部部分，其中又包括了 LOGO、 MENU 和一幅 Banner 圖片； 內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容； 底部，包括一些版權(quán)信息。在下面的文章中我們將會用到一些有關(guān)于 HTML 的基本知識，而在你學(xué)習(xí)這篇入門教程之前，請確定你已經(jīng)具有了一定的 HTML基礎(chǔ)。 下面，我們在 body/body標(biāo)簽對中寫入 DIV 的基本結(jié)構(gòu)，代碼如下： 程序代碼 div id=container!頁面層容器 div id=Header!頁面頭部 /div div id=PageBody!頁面主體 div id=Sidebar!側(cè)邊欄 /div div id=MainBody!主體內(nèi)容 /div /div div id=Footer!頁面底部 /div /div 為了使以后閱讀代碼更簡易，我們應(yīng)該添加相關(guān)注釋，接下來打開 文件，寫入 CSS 信息，代碼如下： 程序代碼 /*基本信息 */ body {font:12px Tahoma。margin:0 auto。marginright:0px。 top/right/left/bottom/center 用于定位背景圖片，分別表示 上 / 右 / 下 / 左 / 中；還可以使用 background:url(39。 通過 margin:auto 我們就可以輕易地使層自 動居中了。textdecoration:none。 margin:10px auto，則是頁面上、下邊距為 10 個像素，并且居中顯示。 而為什么要添加以下代碼呢？ li class=menuDiv/li 插入這一段代碼是可以方便地對菜單選項之間插入一些分隔樣式，例如預(yù)覽
醫(yī)療健康相關(guān)推薦
鄂ICP備17016276號-1