cssdiv初級教程-wenkub
2022-09-01 15:27:37 本頁面
【正文】 background 可以用來給指定的層填充背景色、背景圖片，以后我們將用到如下格式： background:ccc url(39。marginbottom:0px。background:00FFFF} 把以上文件保存，用瀏覽器打開，這時(shí)我們已經(jīng)可以看到基礎(chǔ)結(jié)構(gòu)了，這個(gè)就是頁面的框架了。height:400px。margin:0 auto。margin:0px。 DIV 結(jié)構(gòu)如下： │ body {} /*這是一個(gè) HTML 元素，具體我就不說明了 */ └ Container {} /*頁面層容器 */ ├ Header {} /*頁面頭部 */ ├ PageBody {} /*頁面主體 */ │ ├ Sidebar {} /*側(cè)邊欄 */ │ └ MainBody {} /*主體內(nèi)容 */ └ Footer {} /*頁面底部 */ 至此，頁面布局與規(guī)劃已經(jīng)完成，接下來我們要做的就是開始書寫 HTML 代碼和 CSS。下面我們就開始一步一步使用 DIV+CSS 進(jìn)行網(wǎng)頁布局設(shè)計(jì)吧。CSS+DIV 初級教程 一、頁面布局與規(guī)劃 一、頁面布局與規(guī)劃 好久沒有認(rèn)真寫點(diǎn)東西了，想起最近這些時(shí)間經(jīng)常有朋友問到我有關(guān)于 DIV+CSS 布局的問題，其實(shí)歸根結(jié)底還是由于沒有入門造成的。 所有的設(shè)計(jì)第一步就是構(gòu)思，構(gòu)思好了，一般來說還需要用 PhotoShop 或 FireWorks(以下簡稱 PS 或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來，以下是我構(gòu)思好的界面布局圖。 二、寫入整體層結(jié)構(gòu)與 CSS 接下來我們在桌面新建一個(gè)文件夾，命名為 “DIV+CSS布局練習(xí) ”，在文件夾下新建兩個(gè)空的記事本文檔，輸入以下內(nèi)容： 程序代碼 !DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns= head meta equiv=ContentType content=text/html。textalign:center。height:100px。background:CCFF00} /*頁面底部 */ Footer {width:800px。 關(guān)于以上 CSS 的說明（詳細(xì)請參考 中文手冊，網(wǎng)上有下載）： 請養(yǎng)成良好的注釋習(xí)慣，這是非常重要的； body 是一個(gè) HTML 元素，頁面中所有的內(nèi)容都應(yīng)該寫在這標(biāo)簽對之內(nèi)，我就不多說了； 講解一些常用的 CSS 代碼的含義： font:12px Tahoma； 這里使用了縮寫，完整的代碼應(yīng)該是： fontsize:12px。marginleft:0px 或 margin:0px 0px 0px 0px 順序是 上 / 右 / 下 / 左，你也可以書寫為 margin:0(縮寫 )； 以上樣式說明 body 部分對上右下左 邊距為 0 像素，如果使用 auto 則是自動(dòng)調(diào)整邊距， 另外還有以下幾種寫法： margin:0px auto； 說明上下邊距為 0px，左右為自動(dòng)調(diào)整； 我們以后將使用到的 padding 屬性和 margin 有許多相似之處，他們的參數(shù)是一樣的， 只不過各自表示的含義不相同， margin 是外部距離，而 padding 則是內(nèi)部距離。39。) 20px 100px。 按照前面的說明，可以知道，表示上下邊距為 0，左右為自動(dòng)，因此該層就會(huì)自動(dòng)居中了。 三、頁面頂部制作 (1) 當(dāng)我們寫好了頁面大致的 DIV 結(jié)構(gòu)后，我們就可以開始細(xì)致地對每一個(gè)部分進(jìn)行制作了。background:FFF。margin:10px auto} 樣式說明： a:link,a:visited {fontsize:12px。margin:10px auto} 指定整個(gè)頁面的顯示區(qū)域。 接下來，我們開始 制作 TOP 部分， TOP 部分包括了 LOGO、 菜單 和 Banner，首先我們要做的就是對設(shè)計(jì)好的圖片進(jìn)行切片，以下是在 FW 下完成的切片： 我將 TOP 部分切片為兩部分，第一部分包括了 LOGO 和一條橫線。 * 合理的切片是非常之重要的，因?yàn)榍衅姆椒ㄕ_與否決定了 CSS 書寫的簡易程度以及頁面載入速度。 這里，我們沒有指
醫(yī)療健康相關(guān)推薦
鄂ICP備17016276號-1