本人使用的頁面常用布局及樣式代碼_Div+CSS教程
      
編輯Tag賺U幣
      




      

          
      下面的代碼是本人常用的div+css布局常用樣式，沒有測試W3C認證，應該是通不過。不足這處請大家給予糾正。
      

      
這是css代碼部分： 
      

      

      @charset "utf-8";
      
@import url("/css/global.css");
      

      
/*主體*/
      
body { background:#41bfef;}
      
#container {margin:8px auto; width:900px;}
      
a { color:#333;}
      

      
/*頂部*/
      
#header { height:100px; background:#fff; margin-bottom:5px;}
      
#header h1 { margin:15px;}
      

      
/*中間*/
      
#maincontent { margin-bottom:5px;}
      
/*中間側邊*/
      
#sidebar { float:left; width:240px;}
      
.panel { border:1px solid #ed6400; background:#fff; margin-bottom:5px;}
      
.panel h3 { background:#ff911a; border-bottom:1px solid #ed6400; color:#fff; line-height:22px; text-indent:8px;}
      
.pcontent { padding:6px;}
      
/*中間主體*/
      
#content{ margin-left:242px; height:auto; >height:100px;}
      

      
/*底部*/
      
#footer { border-top:4px solid #E1E1E1; padding:5px;}
      
#footer span { float:right;}
      
 
      

      

      這是頁面代碼部分： 
      

      

      <!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" content="text/html; charset=utf-8" />
      
<title>用戶博客主頁</title>
      
<link href="/css/userindex.css" rel="stylesheet" type="text/css" />
      
</head>
      
<body>
      
<div id="container">
      
    <div id="header">
      
        <h1>主頁名稱</h1>
      
    </div>
      
<br class="clearfloat" /><!-- 用于清除浮動的元素 -->
      
    <div id="mainContent">
      
        <div id="sidebar">
      
          <div class="panel">
      
            <h3>塊標題</h3>
      
            <div class="pcontent">此處顯示  class "pcontent" 的內容</div>
      
          </div>
      
          <div class="panel">
      
            <h3>塊標題</h3>
      
            <div class="pcontent">此處顯示  class "pcontent" 的內容</div>
      
          </div>
      
        </div>
      
      <div id="content">
      
        <div class="panel">
      
          <h3>塊標題</h3>
      
          <div class="pcontent">此處顯示  class "pcontent" 的內容</div>
      
        </div>
      
        <div class="panel">
      
          <h3>塊標題</h3>
      
          <div class="pcontent">此處顯示  class "pcontent" 的內容</div>
      
        </div>
      
      </div>
      
    </div>
      
    <br class="clearfloat" /><!-- 用于清除浮動的元素 -->
      
    <div id="footer"><span><a href="#">本站日志</a> | <a href="#">關于</a> | <a href="#">幫助</a> | <a href="#">隱私聲明</a></span>Copyright © 2007-2008   mb5u.com Inc.All rights reserved.</div>
      
</div>
      
</body>
      
</html>
      

      

      global.css部分：
      

      

      @charset "utf-8";
      
/*全局樣式*/
      
body { margin:0 auto; font:normal normal normal 12px/150% Verdana; color:#333; }
      
ul { list-style:none;margin:0;padding:0;}
      
dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form { margin:0;padding:0;}
      
/* 字體設置 */
      
a,span,em,li,dd,dt,h4,h5,h6 {font:normal normal normal 1em/150% Verdana;}
      
h1,h2 { font:normal normal bold 1.2em/150% Verdana;}
      
h3 { font:normal normal bold 1em/150% Verdana;}
      
h4 { font:normal normal normal 1em/150% Verdana;}
      
/* 其它 */
      
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
      

      

       
      


      

      



      


      來源：模板無憂//所屬分類：Div+CSS教程/更新時間：2012-06-08


      

      



      


      



      相關Div+CSS教程：