代码如下：
| <html> |
| <head> |
| <style type="text/css"> |
| <!-- |
| body { |
| margin:0px; |
| font-size:13px; |
| font-family:Arial; |
| } |
| #container{ |
| position:relative; |
| width:100%; |
| } |
| #banner{ |
| height:80px; |
| border:1px solid #000000; |
| text-align:center; |
| background-color:#a2d9ff; |
| padding:10px; |
| margin-bottom:2px; |
| } |
| #content{ |
| float:left; |
| text-align:center; |
| padding-right:200px; /* 内容往回挤200px */ |
| } |
| #links{ |
| float:right; |
| width:200px; |
| border:1px solid #000000; |
| margin-left:-200px; /* 强行往左拉回200px */ |
| text-align:center; |
| } |
| #footer{ |
| clear:both; /* 不受float影响 */ |
| text-align:center; |
| height:30px; |
| border:1px solid #000000; |
| } |
| --> |
| </style> |
| <title>CSS排版</title><body> |
| <div id="container"> |
| <div id="banner">banner</div> |
| <div id="content"> |
| <div class="blog"> |
| <div class="date">date</div> |
| <div class="blogcontent"> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| content content content content content content content content content content<br> |
| </div> |
| </div> |
| <div class="others">others</div> |
| </div> |
| <div id="links"> |
| <div class="calendarhead">links<br>links<br>links<br>links</div> |
| <div class="calendartable">links<br>links<br>links<br>links</div> |
| <div class="side">links<br>links<br>links<br>links</div> |
| <div class="syndicate">links<br>links<br>links<br>links</div> |
| <div class="friends">links<br>links<br>links<br>links</div> |
| </div> |
| <div id="footer">footer</div> |
| </div> |
| </body> |
| </html> |
运行效果如下：
<html> <head> <style type="text/css"> <!-- body { margin:0px; font-size:13px; font-family:Arial; } #container{ position:relative; width:100%; } #banner{ height:80px; border:1px solid #000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; } #content{ float:left; text-align:center; padding-right:200px; /* 内容往回挤200px */ } #links{ float:right; width:200px; border:1px solid #000000; margin-left:-200px; /* 强行往左拉回200px */ text-align:center; } #footer{ clear:both; /* 不受float影响 */ text-align:center; height:30px; border:1px solid #000000; } --> </style> <title>CSS排版</title><body> <div id="container"> <div id="banner">banner</div> <div id="content"> <div class="blog"> <div class="date">date</div> <div class="blogcontent"> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> </div> </div> <div class="others">others</div> </div> <div id="links"> <div class="calendarhead">links<br>links<br>links<br>links</div> <div class="calendartable">links<br>links<br>links<br>links</div> <div class="side">links<br>links<br>links<br>links</div> <div class="syndicate">links<br>links<br>links<br>links</div> <div class="friends">links<br>links<br>links<br>links</div> </div> <div id="footer">footer</div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
本文转自钢钢博客园博客，原文链接：http://www.cnblogs.com/xugang/archive/2010/08/07/1794729.html，如需转载请自行联系原作者
