实现多个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来删去空白