版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
1、 運(yùn)用 DIV+CSS網(wǎng)頁布局的方法摘 要:在網(wǎng)頁設(shè)計中網(wǎng)頁各元素的布局是一項十分重要的內(nèi) 容之一,在傳統(tǒng)的網(wǎng)頁布局中是運(yùn)用 table 進(jìn)行調(diào)理網(wǎng)頁各元素, 而對于復(fù)雜的布局來說,它遠(yuǎn)遠(yuǎn)不能適應(yīng)網(wǎng)頁設(shè)計的要求 , 由此 div+css技術(shù)就可以很好的解決復(fù)雜網(wǎng)頁的布局。關(guān)鍵詞: div; css ;布局0 引言在傳統(tǒng)的網(wǎng)頁制作方法中是運(yùn)用 table 進(jìn)行布局,它學(xué)習(xí)起來方 便而且很簡單,并且布局具有搭建速度快、容易控制的特點,所以 現(xiàn)在對于網(wǎng)頁制作初學(xué)者來說, table 布局仍然是一種很好的方式。 但是如今的網(wǎng)頁設(shè)計的布局都十分的復(fù)雜,并且適應(yīng)網(wǎng)頁的美觀 度,運(yùn)用 div+css進(jìn)行網(wǎng)頁
2、布局比運(yùn)用 table 布局有很多的優(yōu)勢。 可是由于 css 對于不同的瀏覽器存在著兼容性問題,所以在運(yùn)用 div+css設(shè)計網(wǎng)頁時可能會出現(xiàn)這樣或那樣的問題,為此在這里給 討論幾點運(yùn)用 div+css設(shè)計網(wǎng)面的方法。1 網(wǎng)頁中的列布局在網(wǎng)頁設(shè)計的過程中,列的布局是十分重要的,它布局是否合理 是斷定網(wǎng)頁是否美觀的一項重要的要素之一。1.1 一列固定寬度在網(wǎng)頁中一列的固定是最簡單的布局方式,在插入一個 div 標(biāo)簽 之后運(yùn)用 css 代碼就可以控制 div 標(biāo)簽的樣式。css 代碼:#linewidth:500px;height:700px; background-color:#00ee00;b
3、order:1px solid#88cc88;1.2 一列固定寬度居中在以往的頁面設(shè)計中, 運(yùn)用 table 來進(jìn)行居中布局時, 運(yùn)用 table 中的屬性 align=” center ”來實現(xiàn),而 css 中的 margin 屬性來設(shè) 計就可以解決這一問題。在網(wǎng)頁中插入一個 div 標(biāo)簽之后運(yùn)用 css 代碼就可以控制 div 標(biāo)簽的樣式。采用如下代碼來實現(xiàn):css 代碼:#line width: 500px; height: 700px; background- color: #00ee00; border: 1px solid #88cc88;margin: auto; 1.3 一列自
4、適應(yīng)寬度由于瀏覽器的大小不同,所以設(shè)計出的網(wǎng)頁也應(yīng)該適應(yīng)瀏覽器的 大小,在網(wǎng)頁設(shè)計中也是一項重要的內(nèi)容。 div+css中的自適應(yīng)的 布局能夠根據(jù)瀏覽器窗口的大小自動改變其寬度和高度值,是網(wǎng)頁 設(shè)計中一種非常靈活的布局形式,在網(wǎng)頁中插入一個 div 標(biāo)簽之后 運(yùn)用 css 代碼就可以控制 div 標(biāo)簽的樣式。css 代碼:#line width: 80%; height: 95%; background- color: #00ee00; border: 1px solid #88cc88;1.4 一列、多塊布局一般的網(wǎng)頁布局分為上中下結(jié)構(gòu),即:頭部、中間主體和腳部。 我們可以用三塊 div 來
5、對網(wǎng)頁進(jìn)行劃分,分別給它們起名為:頭部 (header 、主體(maincontent 、腳部(footer 。css 代碼:#header margin:5px auto; width:500px; height:80px; background:#00ee00;#main margin:5px auto;width:500px; height:400px;background:#00ee00;#footer margin:5px auto;width:500px; height:80px; background: #00ee00; 這里只說明了這四種常用的布局方法,但不管多么復(fù)雜的頁面設(shè)
6、計,運(yùn)用 div+css網(wǎng)頁布局中,均是以 div 為基礎(chǔ),通過一列、二 列、多列這些基礎(chǔ)的布局方法的相互組合和嵌套使用來實現(xiàn)復(fù)雜的 布局。使得網(wǎng)頁的布局更加的合理和美觀。2 運(yùn)用 css 來兼容不同的瀏覽器由于瀏覽器層出不窮, css 在不同瀏覽器就會出現(xiàn)存在兼容性的問 題,所以在使用 div+css布局中,可能導(dǎo)致相同的內(nèi)容在不同瀏覽 器中出現(xiàn)不同的顯示效果,為解決這些方面的問題,提出以下幾點 解決方法。2.1 運(yùn)用 !important 來實現(xiàn) ie 和 firefox 的 css 的兼容相同寬度和高度的層在有邊框的情況下,其顯示方式就有區(qū)別。 在 ie 瀏覽器中顯示為 css 所定義的
7、寬度和高度,而 firefox 中顯 示的是 css 中定義的寬度和高度加上邊框的大小, css 代碼如下: #wrapperwidth:100px!important;/*ie7+firfox*/width:80px;/*ie6*/這樣就可以解 決 ie 和 firfox 的兼容問題。2.2 頁面居中問題在 ie 瀏覽器下, 頁面居中可以通過 bodytext- align: center; 來實現(xiàn)或者在 div 中設(shè)置 align屬性來設(shè)置, 而 firefox 瀏覽器下 此屬性就失效了, 可以通過 margin 來設(shè)置頁面的居中。 css 代碼如 下:body text-align: c
8、enter;#center margin-right: auto; margin-left: auto; 2.3 運(yùn)用 javascript 判斷瀏覽器來選擇不同的 css 文件用戶在瀏覽網(wǎng)頁時會選擇不同的瀏覽器,所以對于網(wǎng)頁設(shè)計者就 必須考慮使用什么樣的 css 樣式來滿足不同的瀏覽器。用戶使用不 同的瀏覽器查看網(wǎng)頁時,只需根據(jù)設(shè)計者提供的樣式表文件來達(dá)到 理想的顯示效果,但這對設(shè)計者來說卻不是件輕松的事,可以在網(wǎng) 頁文件的 html 代碼中之間加上判斷語句:2.4 padding屬性對于不同的瀏覽器其顯示也不一樣,當(dāng)設(shè)置 div 的 padding 屬性 后,在 firefox 瀏覽器中會
9、導(dǎo)致 width 和 height 增加,原因如以 第一個問題一樣即 div 的實際寬度 =div寬 +padding,但在 ie 瀏覽 器中 width 和 height 不會增加,這就導(dǎo)致相同的內(nèi)容在不同瀏覽 器中出現(xiàn)不同的顯示效果。 解決辦法:可以為 div 設(shè)定 ie 、 firefox 兩個寬度,在 ie 的寬度前加上 ie 特有標(biāo)記” *”號。例如: #divwidthpadding:5px;width:100px; *width:105px;這比 !important 更安全可靠。2.5 關(guān)于手形光標(biāo) 要將頁面內(nèi)容的光標(biāo)顯示為手形,通常的做法是使 css 屬性 cursor:ha
10、nd; 但這于做法只適用于 ie 解決辦法:cursor:pointer。2.6 浮動 ie6產(chǎn)生的雙倍距離例如:#boxfloat:left; width:100px; margin:0 0 0 100px;這種情況之下 ie6會產(chǎn)生 200px 的距離。解決辦法:在以上屬性的 基礎(chǔ)上,加上 display:inline,使浮動忽略。2.7 ul和 form 標(biāo)簽的 padding 與 margin ul標(biāo)簽在 firefox 中默認(rèn)是有 padding 值的 , 而在 ie 中只有 margin 默認(rèn) 有值。 form 標(biāo)簽在 ie 中 , 將會自動 margin 一些邊距 , 而在 firefox 中 margin 則是 0;解決辦法:css 中首先都使用這樣的樣式 ul,formmargin:0;padding:0;。3 總結(jié)以上討論的 div+css網(wǎng)頁布局的方法只是在網(wǎng)頁設(shè)計中所遇到的 常見問題。在網(wǎng)頁設(shè)計的過程中運(yùn)用各種方法來實現(xiàn)網(wǎng)頁的合理布 局是網(wǎng)站建設(shè)過程中的重要內(nèi)容之一。如何更有效、更合理的運(yùn)用 web2.0設(shè)計標(biāo)準(zhǔn), 這需要很
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年井下支護(hù)工技能鑒定考試題庫-上(單選題)
- 2024年變頻器柜體系統(tǒng)項目提案報告模板
- 2024年地板護(hù)理品項目規(guī)劃申請報告模板
- 家用超聲波消毒器市場環(huán)境與對策分析
- 2024年休閑肉制品項目規(guī)劃申請報告模板
- 復(fù)位鉗項目評價分析報告
- 2024年雙氰胺項目申請報告模板
- 心電圖紙項目評價分析報告
- 2024年抗輻射光學(xué)石英玻璃項目提案報告模板
- 2024年城市市容管理服務(wù)項目規(guī)劃申請報告模板
- 中藥材及中藥飲片知識培訓(xùn)培訓(xùn)課件
- 管理學(xué)課件:11 領(lǐng)導(dǎo)概論
- GB/T 6728-2017結(jié)構(gòu)用冷彎空心型鋼
- GB/T 21010-2007土地利用現(xiàn)狀分類
- GB/T 19868.4-2005基于預(yù)生產(chǎn)焊接試驗的工藝評定
- GB/T 10125-2021人造氣氛腐蝕試驗鹽霧試驗
- GA/T 1049.2-2013公安交通集成指揮平臺通信協(xié)議第2部分:交通信號控制系統(tǒng)
- 首次入院護(hù)理評估單相關(guān)的量表及存在問題講解學(xué)習(xí)
- 2023年上海市松江區(qū)城管協(xié)管員招聘筆試題庫及答案解析
- 中心靜脈導(dǎo)管(CVC)課件
- AFTN和SITA報文簡介資料課件
評論
0/150
提交評論