读书人

普普通通三列布局

发布时间: 2012-11-04 10:42:41 作者: rapoo

普通三列布局
1.采用固定宽度

#wrapper{width:85%;margin:0 auto;background:#999 url(img/bg.gif) repeat-y 23% 0;}#header{height:100px;background-color:#ccc;}#nav{width:23%;/*background-color:#999;*/float:left;}#content{width:75%;float:right;background-color:#362219;background:#666 url(img/bg.gif) repeat-y 77% 0;}#bigger{width:66%;/*padding:10px 20px;*/float:left;background-color:#063;}#smaller{width:31%;/*padding:10px 10px;*/float:right;background-color:#666;}#footer{clear:both;background-color:#333;}<div id="wrapper"><div id="header">header</div><div style="wraper2"><div id="nav">Direct child selectors ...example of a direct child selector.</div><div id="content"><div id="bigger">Direct c...hildren of the ele-ment. This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector.</div><div id="smaller">Direct c...selector. Figure 3-20 is an example of a direct child selector.</div></div><div><div id="footer">foot</div></div>

读书人网 >Web前端

热点推荐