实现多个div组合成页面
实现多个div组合成的页面,要分析每个div的页面布局。实现一个如下图所示的div组成的页面
- 写入标签
<div id="header">此处显示 id "header" 的内容</div> <div id="nav">此处显示 id "nav" 的内容</div> <div id="maincontent"> <div id="main">此处显示 id "main" 的内容</div> <div id="side">此处显示 id "side" 的内容</div> </div> <div id="footer">此处显示 id "footer" 的内容</div>
2.如果设置所有内容居中,可以在所有div外加一个父级div,设置宽度居中会使代码更有规范。
<div id="container"> <div id="header">此处显示 id "header" 的内容</div> <div id="nav">此处显示 id "nav" 的内容</div> <div id="maincontent"> <div id="main">此处显示 id "main" 的内容</div> <div id="side">此处显示 id "side" 的内容</div> </div> <div id="footer">此处显示 id "footer" 的内容</div>
3.设置css样式
<style type="text/css"> body{margin:0 auto;} #container { width:900px; margin:0 auto;} #header{height:80px; background:#009900; width:900px;} #nav{height:100px; background:#0033CC;width:900px;} #main{float:left;width:600px;height:500px; background:#FFFF00;} #side{width:300px;height:500px; background:#9900FF; margin-left:600px;} #footer{height:100px; background:#FF9900;} </style>
在选择样式表的时候分三种方式:
- 样式表中用“#”,则在标签中设置id为#
- 样式表中用“.” ,则在标签中添加属性class选择
- 样式表中可以直接用标签名设置标签的属性
在设置居中时可以使用margin属性设置为自动居中,也可以设置position属性来固定位置
4.网页效果
网页的内容与上边框之间队友一个距离,如果不想显示与顶端的空白可以设置body的属性margin为0来删去空白