日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

本人使用的頁(yè)面常用布局及樣式代碼_Div+CSS教程

編輯Tag賺U幣

下面的代碼是本人常用的div+css布局常用樣式，沒(méi)有測(cè)試W3C認(rèn)證，應(yīng)該是通不過(guò)。不足這處請(qǐng)大家給予糾正。

這是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;}
/*中間側(cè)邊*/
#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;}
 

這是頁(yè)面代碼部分： 

<!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>用戶(hù)博客主頁(yè)</title>
<link href="/css/userindex.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="header">
        <h1>主頁(yè)名稱(chēng)</h1>
    </div>
<br class="clearfloat" /><!-- 用于清除浮動(dòng)的元素 -->
    <div id="mainContent">
        <div id="sidebar">
          <div class="panel">
            <h3>塊標(biāo)題</h3>
            <div class="pcontent">此處顯示  class "pcontent" 的內(nèi)容</div>
          </div>
          <div class="panel">
            <h3>塊標(biāo)題</h3>
            <div class="pcontent">此處顯示  class "pcontent" 的內(nèi)容</div>
          </div>
        </div>
      <div id="content">
        <div class="panel">
          <h3>塊標(biāo)題</h3>
          <div class="pcontent">此處顯示  class "pcontent" 的內(nèi)容</div>
        </div>
        <div class="panel">
          <h3>塊標(biāo)題</h3>
          <div class="pcontent">此處顯示  class "pcontent" 的內(nèi)容</div>
        </div>
      </div>
    </div>
    <br class="clearfloat" /><!-- 用于清除浮動(dòng)的元素 -->
    <div id="footer"><span><a href="#">本站日志</a> | <a href="#">關(guān)于</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;}
/* 字體設(shè)置 */
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;}

 

來(lái)源：模板無(wú)憂(yōu)//所屬分類(lèi)：Div+CSS教程/更新時(shí)間：2012-06-08
相關(guān)Div+CSS教程：