html5学习之路_003
生活随笔
收集整理的這篇文章主要介紹了
html5学习之路_003
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
html布局
<div>元素布局
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>div布局</title><link rel="stylesheet" type="text/css" href="mycss03.css"> </head> <body><div id="container"><div id="heading">頭部</div><div id="content_menu">內容菜單</div><div id="content_body">內容主體</div><div id="footing">底部</div></div> </body> </html> <div id="container"> 設置div布局，給一個id為"container"；接下去設置div頭部、內容菜單、內容主體、底部；
<link rel="stylesheet" type="text/css" href="mycss03.css"> ，引入css樣式。
body{margin: 0px; } div#container{width: 100%;height: 950px;background-color: green; } div#heading{width: 100%;height: 10%;background-color: red; } div#content_menu{width: 30%;height: 80%;background-color: yellow;float: left; } div#content_body{width: 70%;height: 80%;background-color: firebrick;float: left; } div#footing{width: 100%;height: 10%;background-color: black;clear: both; } 在這里設置各個部位的寬、高、背景顏色。
body{ margin: 0px; }的作用是去空邊，使背景能充滿全屏；
float: left 的作用是加浮動，形成從左到右的排列方式；
clear: both 作用是清除浮動。運行之后可以看到效果，如圖：
table元素布局
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>table布局</title> </head> <body marginheight="0px"><table width="100%" height="700px" style="background: green"><tr><td colspan="2" width="100%" height="10%" style="background: yellow">頭部</td></tr><tr><td width="30%" height="80%" style="background: fixed;"><ol><li>蘋果</li><li>香蕉</li></ol></td><td width="70%" height="80%" style="background: magenta;">底部</td></tr><tr><td colspan="2" width="100%" height="10%" style="background: honeydew">底部</td></tr></table> </body> </html> marginheight="0px" 去空邊，填充全屏；
table width="100%" height="700px" style="background: green"> 設置table寬高及背景顏色；
<td colspan="2" width="100%" height="10%" style="background: yellow">頭部</td> ，其中colspan="2"表示兩個方格合并成一個，設置寬高及背景顏色；
第二個<tr></tr>為表格第二行，有兩列；第三個<tr></tr>為表格第三行,同樣合并兩個方格，只有一列。
如此布局運行之后得出的結果為下圖：
?
本站文章為?寶寶巴士 SD.Team?原創，轉載務必在明顯處注明：（作者官方網站：?寶寶巴士?)?
轉載自【寶寶巴士SuperDo團隊】?原文鏈接:?http://www.cnblogs.com/superdo/p/4754342.html
轉載于:https://www.cnblogs.com/superdo/p/4754342.html
總結
以上是生活随笔為你收集整理的html5学习之路_003的全部內容，希望文章能夠幫你解決所遇到的問題。
