《使用HTML5實現(xiàn)響應(yīng)式布局》第十章-頁面的布局與規(guī)劃-理論學(xué)習(xí)資料_第1頁
《使用HTML5實現(xiàn)響應(yīng)式布局》第十章-頁面的布局與規(guī)劃-理論學(xué)習(xí)資料_第2頁
《使用HTML5實現(xiàn)響應(yīng)式布局》第十章-頁面的布局與規(guī)劃-理論學(xué)習(xí)資料_第3頁
《使用HTML5實現(xiàn)響應(yīng)式布局》第十章-頁面的布局與規(guī)劃-理論學(xué)習(xí)資料_第4頁
《使用HTML5實現(xiàn)響應(yīng)式布局》第十章-頁面的布局與規(guī)劃-理論學(xué)習(xí)資料_第5頁
已閱讀5頁，還剩16頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第十章頁面的布局與規(guī)劃理論內(nèi)容流式布局表格布局div布局1.流式布局所謂流式布局，即從左到右對該容器中的控件進(jìn)行布局，當(dāng)一行不能容納時自動換行。該布局是從左到右，然后從上到下。流式布局是默認(rèn)的頁面布局方式。流式布局<body><h1>流式布局</h1><imgsrc="logo.jpg"><p><!--省略--></p></body>h1圖片段落2.表格布局HTML5的表格標(biāo)簽除以網(wǎng)格形式顯示數(shù)據(jù)外，還可以被應(yīng)用于對網(wǎng)頁內(nèi)容的布局。由于table標(biāo)簽可以在顯示時使單元格的邊框和間距為0，因此可以將網(wǎng)頁中的內(nèi)容按版式劃分放入表格的各單元格中，從而實現(xiàn)復(fù)雜的排版組合表格布局.form_table{/*省略*/}.form_tableth{/*省略*/

white-space:nowrap;}.form_tabletd{/*省略*/

text-align:left;}th中的文本在一行顯示td中內(nèi)容左邊對齊表格布局在DreamweaverCC的設(shè)計視圖中顯示了table布局效果虛線表示formtable布局3.div布局目前主流的頁面布局技術(shù)是使用div標(biāo)簽結(jié)合CSS3實現(xiàn)的使用IE瀏覽器打開游戲“劍靈”的官網(wǎng)div布局在網(wǎng)頁上點擊鼠標(biāo)右鍵，在彈出的菜單中選擇“查看源”，在彈出的窗口中可以看到“劍靈”官網(wǎng)首頁的html5的源碼，其網(wǎng)頁布局采用的是div布局div+CSS的布局div布局可以用這種方法觀察更多的網(wǎng)站，幾乎所有的知名網(wǎng)站都采用div布局制作網(wǎng)頁div布局主要分為居中布局浮動布局居中布局居中布局可以讓網(wǎng)頁以固定寬度設(shè)計，整體頁面居中。如果在高分辨率屏幕下顯示，頁面仍然居中呈現(xiàn)，頁面的兩邊留出空白區(qū)域，以保持頁面整體顯示效果如蘋果公司的官網(wǎng)左右兩邊留出空白邊距左右兩邊留出空白邊距左右兩邊留出空白邊距居中布局<styletype="text/css">#box{ margin:0auto;

/*省略*/}#box2{ /*省略*/position:relative;}</style><body><divid="box"><!--省略--></div><divid="box2"><!--省略--></div></body>左右邊距自動分配相對定位浮動布局浮動布局包括兩列固定寬度居中布局三列自適應(yīng)布局浮動布局兩列固定寬度布局下圖所示的騰訊科技的首頁內(nèi)容區(qū)域，采用的就是固定寬度的兩列布局右列部分左列部分浮動布局<styletype="text/css">#box{ margin:0auto;/*省略*/}#left{

float:left;/*省略*/}#right{

float:left;/*省略*/}</style>居中左浮動左浮動浮動布局<body><divid="box"><divid="left"></div><divid="right"></div></div></body>浮動布局三列自適應(yīng)布局三列布局常適用于排版信息量較多的頁面如下圖是新浪微博的首頁所采用的三列布局方式左列部分右列部分中間列浮動布局*{ margin:0; border:0; padding:0;}#left{ position:absolute; top:0px; left:0px; /*省略*/}清空元素的默認(rèn)邊距、填充、邊框左邊列的絕對定位#right{ position:absolute; top:0px; right:0px; /*省略*/}#main{margin:0px204px; /*省略*/}右邊列的絕對定位中間列沒有設(shè)置寬度浮動布局<body><divid="left">左列</div><divid="main">中列</div><divid="right">右列</div></body>總結(jié)本

溫馨提示

  • 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論