- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
一个自适应的宽度的两列网页布局，含头部和尾部，也是比较经典的二栏风格设计，在本例中，网页左栏是自适应宽度的，不论你的浏览器窗口大小，它都不会出现滚动条，你完全可以把它拷贝回去做为一个模板来用，也是学习CSS布局的一个好范例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" /> <title>绝对定位:一栏固定,一栏自适应</title> <style type="text/css"> <!-- * { margin:0; padding:0; } body { background:#fff; font:12px normal Arial #444; line-height:18px; text-align:center; } #box { width:100%; height:500px; margin:0 auto; background:#f2f2f2; } .header { width:100%; height:30px; background:#39c; } .right { width:240px; height:400px; background:#fff; position:absolute; right:20px; top:50px; } .left { margin-right:280px; margin-top:20px; background:#fff; margin-left:40PX; height:400px; } .mrc { width:96%; height:300px; margin:0 auto; background:#444; } .footer { width:100%; height:100px; background:#f2f2f2; } p { padding:10px 10px; font-size:16px; font-weight:bold; color:#39C; line-height:22px; } // --> </style> </head> <body> <div id="box"> <div class="header"><span style="color:#fff; font-size:14px;font-weight:bold; line-height:28px;">头部自适Div</span></div> <div class="left"> <p>左则自适应缩放</p> <div class="mrc"> <p>内容区块,相对父元素按百分比适应</p> </div> </div> <div class="right"> <p>绝对固宽定位的右侧栏> </div> <div class="footer"> <p>底部自适应</p> </div> </div> </body> </html>