cssdiv初級教程-文庫吧資料
2024-08-29 15:27本頁面
【正文】 這里，我們沒有指定 header 層的高度，為什么不指定呢？ 因為 header 層中還有菜單和 banner 項，所以層的高度暫時是未知的，而層的屬性又可以讓層根據(jù)內容自動設定調整，因此我們并不需要指定高度。 而為什么要添加以下代碼呢？ li class=menuDiv/li 插入這一段代碼是可以方便地對菜單選項之間插入一些分隔樣式，例如預覽圖中的 豎線 分隔 。 * 合理的切片是非常之重要的，因為切片的方法正確與否決定了 CSS 書寫的簡易程度以及頁面載入速度。 到這里，有的朋友就說了， * 為什么要使用 GIF 格式？使用 JPEG 不是更好嗎？ 因為 GIF 格式的圖片文件更小，這樣能使頁面載入的速度更快，當然使用此格式之前必須確定圖片并沒有使用太多的顏色，當我們使用了 GIF 格式時，從肉眼上并不能看出圖片有什么太大的變化，因此這是可行的。 接下來，我們開始 制作 TOP 部分， TOP 部分包括了 LOGO、 菜單 和 Banner，首先我們要做的就是對設計好的圖片進行切片，以下是在 FW 下完成的切片： 我將 TOP 部分切片為兩部分，第一部分包括了 LOGO 和一條橫線。 margin:10px auto，則是頁面上、下邊距為 10 個像素，并且居中顯示。margin:10px auto} 指定整個頁面的顯示區(qū)域。} a:hover {} 這兩項分別是控制頁面中超鏈接的樣式，具體我就不說明了，請大家參閱手冊。margin:10px auto} 樣式說明： a:link,a:visited {fontsize:12px。textdecoration:none。background:FFF。margin:0px。 三、頁面頂部制作 (1) 當我們寫好了頁面大致的 DIV 結構后，我們就可以開始細致地對每一個部分進行制作了。 通過 margin:auto 我們就可以輕易地使層自 動居中了。 按照前面的說明，可以知道，表示上下邊距為 0，左右為自動，因此該層就會自動居中了。 height / width / color 分 別表示高度 (px)、寬度 (px)、字體顏色 (HTML 色系表 )。) 20px 100px。 top/right/left/bottom/center 用于定位背景圖片，分別表示 上 / 右 / 下 / 左 / 中；還可以使用 background:url(39。39。 background:FFF 設置背景色為白色，這里顏色使用了縮寫，完整的應該是 background:FFFFFF。marginleft:0px 或 margin:0px 0px 0px 0px 順序是 上 / 右 / 下 / 左，你也可以書寫為 margin:0(縮寫 )； 以上樣式說明 body 部分對上右下左 邊距為 0 像素，如果使用 auto 則是自動調整邊距， 另外還有以下幾種寫法： margin:0px auto； 說明上下邊距為 0px，左右為自動調整； 我們以后將使用到的 padding 屬性和 margin 有許多相似之處，他們的參數(shù)是一樣的， 只不過各自表示的含義不相同， margin 是外部距離，而 padding 則是內部距離。marginright:0px。 關于以上 CSS 的說明（詳細請參考 中文手冊，網上有下載）： 請養(yǎng)成良好的注釋習慣，這是非常重要的； body 是一個 HTML 元素，頁面中所有的內容都應該寫在這標簽對之內，我就不多說了； 講解一些常用的 CSS 代碼的含義： font:12px Tahoma； 這里使用了縮寫，完整的代碼應該是： fontsize:12px。height:50px。background:CCFF00} /*頁面底部 */ Footer {width:800px。margin:0 auto。height:100px。} /*頁面層容器 */ container {width:100%} /*頁面頭部 */ Header {width:800px。textalign:center。 下面，我們在 body/body標簽對中寫入 DIV 的基本結構，代碼如下： 程序代碼
醫(yī)療健康相關推薦
鄂ICP備17016276號-1