cssdiv初級教程(編輯修改稿)
2024-09-26 15:27 本頁面
【文章內容簡介】 a:link,a:visited {fontsize:12px。textdecoration:none。} a:hover {} 這兩項分別是控制頁面中超鏈接的樣式，具體我就不說明了，請大家參閱手冊。 container {width:800px。margin:10px auto} 指定整個頁面的顯示區(qū)域。 width:800px 指定寬度為 800 像素，這里根據實際所需設定。 margin:10px auto，則是頁面上、下邊距為 10 個像素，并且居中顯示。 上一章中我們講過， 對層的 margin 屬性的左右邊距設置為 auto 可以讓層居中顯示 。 接下來，我們開始 制作 TOP 部分， TOP 部分包括了 LOGO、 菜單 和 Banner，首先我們要做的就是對設計好的圖片進行切片，以下是在 FW 下完成的切片： 我將 TOP 部分切片為兩部分，第一部分包括了 LOGO 和一條橫線。由于 LOGO 圖片并沒有太多的顏色，這里我于是將這一部分保存為 GIF 格式，調色板選擇為精確，選擇 Alpha 透明度，色版為白色 (此處顏色應與背景色相同 )，導出為 ，圖像寬度為 800px。 到這里，有的朋友就說了， * 為什么要使用 GIF 格式？使用 JPEG 不是更好嗎？ 因為 GIF 格式的圖片文件更小，這樣能使頁面載入的速度更快，當然使用此格式之前必須確定圖片并沒有使用太多的顏色，當我們使用了 GIF 格式時，從肉眼上并不能看出圖片有什么太大的變化，因此這是可行的。 * 接下來的 Banner 部分還能使用 GIF 格式嗎？ 答案是不能，因為 Banner 部分是一個細致的圖片，如果使用 GIF 格式 顏色會有太大的損失，所以必須使用 JPEG 格式，將文件導出為 。 * 合理的切片是非常之重要的，因為切片的方法正確與否決定了 CSS 書寫的簡易程度以及頁面載入速度。 切好片后，我們還需要對 TOP 部分進行分析并將 DIV 結構寫入 Header 中代碼如下： 程序代碼 div id=menu ul lia href=首頁 /a/li li class=menuDiv/li lia href=博客 /a/li li class=menuDiv/li lia href=設計 /a/li li class=menuDiv/li lia href=相冊 /a/li li class=menuDiv/li lia href=論壇 /a/li li class=menuDiv/li lia href=關于 /a/li /ul /div div id=banner /div 為什么要這么寫呢，因為對菜單使用列表 li形式，可以在以后方便對菜單定制樣式。 而為什么要添加以下代碼呢？ li class=menuDiv/li 插入這一段代碼是可以方便地對菜單選項之間插入一些分隔樣式，例如預覽圖中的 豎線 分隔 。 然后我們在 中再寫入以下樣式： 程序代碼 /*頁面頭部 */ header {background:url() norepeat} 樣式說明： header {background:url() norepeat} 給頁面頭部分加入一個背景圖片 LOGO，并且不作填充。 這里，我們沒有指定 header 層的高度，為什么不指定呢？ 因為 header 層中還有菜單和 banner 項，所以層的高度暫時是未知的，而層的屬性又可以讓層根據內容自動設定調整，因此我們并不需要指定高度。 * 接下來，我們開始制作菜單，留到下一章，教程中相關文件請到下一章下載！ 三、頁面頂部制作 (2)使用列表 li制作菜單 開始此節(jié)的學習前，請確認你已經參照之前的幾節(jié)內容寫入了 DIV、 CSS 到 和 文件中。 這一節(jié)我將告訴大家如何用列表 li來制作菜單。 程序代碼 div id=menu ul lia href=首頁 /a/li li class=menuDiv/li lia href=博客 /a/li li class=me
醫(yī)療健康相關推薦
鄂ICP備17016276號-1