使用CSS 排版网页布局-白红宇

代码如下：

                 <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">  </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，如需转载请自行联系原作者