DIV+CSS實力學(xué)習(xí).ppt

DIV CSS 所有的設(shè)計第一步就是構(gòu)思 構(gòu)思好了 一般來說還需要用PhotoShop或FireWorks 以下簡稱PS或FW 等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來 以下是一個構(gòu)思好的界面布局圖 下面 我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局 仔細(xì)分析一下該圖 我們不難發(fā)現(xiàn) 圖片大致分為以下幾個部分 1 頂部部分 其中又包括了LOGO MENU和一幅Banner圖片 2 內(nèi)容部分又可分為側(cè)邊欄 主體內(nèi)容 3 底部 包括一些版權(quán)信息 有了以上的分析 我們就可以很容易的布局了 我們設(shè)計層如下圖 根據(jù)上圖 給出一個實際的頁面布局圖 說明一下層的嵌套關(guān)系 這樣理解起來就會更簡單了 DIV結(jié)構(gòu)如下 body 這是一個HTML元素 Container 頁面層容器 Header 頁面頭部 PageBody 頁面主體 Sidebar 側(cè)邊欄 MainBody 主體內(nèi)容 Footer 頁面底部 至此 頁面布局與規(guī)劃已經(jīng)完成 接下來我們要做的就是開始書寫HTML代碼和CSS 接下來我們在桌面新建一個文件夾 命名為 DIV CSS布局練習(xí) 在文件夾下新建兩個空的記事本文檔 輸入以下內(nèi)容 無標(biāo)題文檔這是XHTML的基本結(jié)構(gòu) 將其命名為index htm 另一個記事本文檔則命名為css css 下面 在標(biāo)簽對中寫入DIV的基本結(jié)構(gòu) 代碼如下 color aaaaaa color color aaaaaa color color aaaaaa color color aaaaaa color color aaaaaa color color aaaaaa color 為了使以后閱讀代碼更簡易 我們應(yīng)該添加相關(guān)注釋 接下來打開css css文件 寫入CSS信息 代碼如下 基本信息 body font 12pxTahoma margin 0px text align center background FFF 頁面層容器 container width 100 頁面頭部 Header width 800px margin 0auto height 100px background FFCC99 頁面主體 PageBody width 800px margin 0auto height 400px background CCFF00 頁面底部 Footer width 800px margin 0auto height 50px background 00FFFF font 12pxTahoma 這里使用了縮寫 完整的代碼應(yīng)該是 font size 12px font family Tahoma 說明字體為12像素大小 字體為Tahoma格式 margin 0px 也使用了縮寫 完整的應(yīng)該是 margin top 0px margin right 0px margin bottom 0px margin left 0px或margin 0px0px0px0px順序是上 右 下 左 你也可以書寫為margin 0 縮寫 以上樣式說明body部分對上右下左邊距為0像素 如果使用auto則是自動調(diào)整邊距 另外還有以下幾種寫法 margin 0pxauto 說明上下邊距為0px 左右為自動調(diào)整 我們以后將使用到的padding屬性和margin有許多相似之處 他們的參數(shù)是一樣的 只不過各自表示的含義不相同 margin是外部距離 而padding則是內(nèi)部距離 text align center文字對齊方式 可以設(shè)置為左 右 中 這里我將它設(shè)置為居中對齊 background FFF設(shè)置背景色為白色 這里顏色使用了縮寫 完整的應(yīng)該是background FFFFFF background可以用來給指定的層填充背景色 背景圖片 以后我們將用到如下格式 background cccurl bg gif topleftno repeat 表示 使用 CCC 灰度色 填充整個層 使用bg gif做為背景圖片 topleft表示圖片位于當(dāng)前層的左上端 no repeat表示僅顯示圖片大小而不填充滿整個層 top right left bottom center用于定位背景圖片 分別表示上 右 左 下 中 還可以使用 background url bg gif 20px100px 表示X座標(biāo)為20像素 Y座標(biāo)為100像素的精確定位 repeat no repeat repeat x repeat y分別表示填充滿整個層 不填充 沿X軸填充 沿Y軸填充 height width color分別表示高度 px 寬度 px 字體顏色 HTML色系表 4 如何使頁面居中 大家將代碼保存后可以看到 整個頁面是居中顯示的 那么究竟是什么原因使得頁面居中顯示呢 是因為我們在 container中使用了以下屬性 margin 0auto 按照前面的說明 可以知道 表示上下邊距為0 左右為自動 因此該層就會自動居中了 如果要讓頁面居左 則取消掉auto值就可以了 因為默認(rèn)就是居左顯示的 通過margin auto我們就可以輕易地使層自動居中了 在前面寫入了一些樣式 那些樣式是為了預(yù)覽結(jié)構(gòu)而寫入的 我們把css css中的樣式全部清除掉 重新寫入以下樣式代碼 基本信息 body font 12pxTahoma margin 0px text align center background FFF a link a visited font size 12px text decoration none a hover 頁面層容器 container width 800px margin 10pxauto container width 800px margin 10pxauto 指定整個頁面的顯示區(qū)域 width 800px指定寬度為800像素 這里根據(jù)實際所需設(shè)定 margin 10pxauto 則是頁面上 下邊距為10個像素 并且居中顯示 上一章中我們講過 對層的margin屬性的左右邊距設(shè)置為auto可以讓層居中顯示 將TOP部分切片為兩部分 第一部分包括了LOGO和一條橫線 由于LOGO圖片并沒有太多的顏色 這里我于是將這一部分保存為GIF格式 調(diào)色板選擇為精確 選擇Alpha透明度 色版為白色 此處顏色應(yīng)與背景色相同 導(dǎo)出為logo gif 圖像寬度為800px 到這里 有的朋友就說了 為什么要使用GIF格式 使用JPEG不是更好嗎 因為GIF格式的圖片文件更小 這樣能使頁面載入的速度更快 當(dāng)然使用此格式之前必須確定圖片并沒有使用太多的顏色 當(dāng)我們使用了GIF格式時 從肉眼上并不能看出圖片有什么太大的變化 因此這是可行的 接下來的Banner部分還能使用GIF格式嗎 答案是不能 因為Banner部分是一個細(xì)致的圖片 如果使用GIF格式顏色會有太大的損失 所以必須使用JPEG格式 將文件導(dǎo)出為banner jpg 合理的切片是非常之重要的 因為切片的方法正確與否決定了CSS書寫的簡易程度以及頁面載入速度 切好片后 我們還需要對TOP部分進行分析并將DIV結(jié)構(gòu)寫入Header中代碼如下 首頁博客設(shè)計相冊論壇關(guān)于為什么要這么寫呢 因為對菜單使用列表形式 可以在以后方便對菜單定制樣式 而為什么要添加以下代碼呢 插入這一段代碼是可以方便地對菜單選項之間插入一些分隔樣式 例如預(yù)覽圖中的豎線分隔 然后我們在css css中再寫入以下樣式 頁面頭部 header background url logo gif no repeat 而為什么要添加以下代碼呢 插入這一段代碼是可以方便地對菜單選項之間插入一些分隔樣式 例如預(yù)覽圖中的豎線分隔 然后我們在css css中再寫入以下樣式 頁面頭部 header background url logo gif no repeat 樣式說明 header background url logo gif no repeat 給頁面頭部分加入一個背景圖片LOGO 并且不作填充 這里 我們沒有指定header層的高度 為什么不指定呢 因為header層中還有菜單和banner項 所以層的高度暫時是未知的 而層的屬性又可以讓層根據(jù)內(nèi)容自動設(shè)定調(diào)整 因此我們并不需要指定高度 頁面頂部制作 使用列表制作菜單 用列表來制作菜單 首頁博客設(shè)計相冊論壇關(guān)于注意 自定義樣式menuDiv用于加入菜單分割線 其定義見幻燈片29 需要注意的是 當(dāng)在HTML中定義為id divID 時 在CSS對應(yīng)的設(shè)置語法則是 divID 如果在HTML中定義為class divID 時 則在CSS中對應(yīng)的設(shè)置語法是 divID 見用戶自定義樣式的定義和套用相關(guān)內(nèi)容 另外 HTML中的一切元素都是可以定義的 例如table tr td th form img input 等等 如果你要在CSS中設(shè)置它們 則直接寫入元素的名稱加上一對大括號 就可以了 所有的CSS代碼都應(yīng)該寫在大括號 中 按照上面的介紹 在css css中寫入以下代碼 menuul list style none margin 0px menuulli float left 解釋一下 menuul list style none margin 0px list style none 這一句是取消列表前點 因為我們不需要這些點 margin 0px 這一句是刪除UL的縮進 這樣做可以使所有的列表內(nèi)容都不縮進 menuulli float left 這里的float left的左右是讓內(nèi)容都在同一行顯示 因此使用了浮動屬性 float 效果圖 在css css中修正寫入以下代碼 menuul list style none margin 0px menuulli float left margin 010px 這里 margin 010px的作用就是讓列表內(nèi)容之間產(chǎn)生一個20像素的距離 左 10px 右 10px 預(yù)覽的效果如下 在css css中繼續(xù)修正加入以下代碼 利用padding 20px20px00來固定菜單位置 menu padding 20px20px00 添加了float right使得菜單位于頁面右側(cè) menuul float right list style none margin 0px menuulli float left margin 010px 菜單選項之間加一條豎線 menuDiv width 1px height 28px background 999 效果圖 文字偏上 在css css中繼續(xù)修正加入以下代碼 菜單文字上下居中 menuulli float left margin 010px display block line height 28px 菜單的超鏈接樣式 menuullia link menuullia visited font weight bold color 666 menuullia hover 效果圖 Head的banner制作 用好border和clear程序代碼以上代碼便可以實現(xiàn)設(shè)計草圖中的banner 在css css中寫入以下代碼 banner background url banner jpg 030pxno repeat 加入背景圖片 width 730px 設(shè)定層的寬度 margin auto 層居中 height 240px 設(shè)定高度 border bottom 5pxsolid EFEFEF 畫一條淺灰色實線 clear both 清除浮動 至此 頭部菜單部分設(shè)計完成 pagebody制作 pagebody width 730px 設(shè)定寬度 margin 8pxauto 居中 sidebar width 160px 設(shè)定寬度 text align left 文字左對齊 float left 浮動居左 clear left 不允許左側(cè)存在浮動 overflow hidden 超出寬度部分隱藏 mainbody width 570px text align left float right 浮動居右 clear right 不允許右側(cè)存在浮動 overflow hidden 超出寬度部分隱藏 為了可以查看到效果 建議在 sidebar和 mainbody中加入以下代碼 預(yù)覽完成后可以刪除這段代碼 border 1pxsolid E00 height 200px保存預(yù)覽效果 可以發(fā)現(xiàn)這兩個層完美的浮動 在達到了我們布局的目的 而兩個層的實際寬度應(yīng)該160 2 border 570 2 734px 已經(jīng)超出了父層的寬度 由于cle