一、代码实现
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>页面布局2</title><style type='text/css'>/*下面的星号让素有元素内外边距都为0，不留空隙*/*{padding:0px;margin:0px;/*我们让整个屏幕都有一种淡淡的背景色*/}body{background-color:lightcyan;}/*下面这个box是承载全部网页内容的容器样式，是下面所有div元素的父级元素的样式，注意一定要先将字号设为0，否则主体和页脚之间会有一条白色缝隙*/#box{width:900px;margin:0 auto;font-size:0;}#logo{height:100px;background-color:orange;}#nav{display:inline-block;width:200px;height:600px;background-color:lightseagreen;}#main{display:inline-block;width:700px;height:600px;background-color:lightgoldenrodyellow;float:right;}#footer{height:40px;background-color:darkgrey;}</style></head><body><div id='box'><div id='logo'><span style="font-size:60px;margin-left:300px;">logo区域</span></div><div id='nav'><ul type='none' style="font-size:60px;margin-left:50px;margin-top:100px;"><li>导</li><li>航</li><li>区</li><li>域</li></ul></div><div id='main'><p style='font-size:60px;margin-left:200px;margin-top:200px;'>主体区域</p></div><div id='footer'><span style='font-size:20px;margin-left:400px;'>页脚区域</span></div></div></body></html>
