本人使用的頁面常用布局及樣式代碼_Div+CSS教程
下面的代碼是本人常用的div+css布局常用樣式，沒有測(cè)試W3C認(rèn)證，應(yīng)該是通不過。不足這處請(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;}
這是頁面代碼部分：
<!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" /><!-- 用于清除浮動(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;}
相關(guān)Div+CSS教程：
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ)：常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- DIV相對(duì)于父DIV底部對(duì)齊的實(shí)現(xiàn)方法
- IE斷頭臺(tái)的解決辦法
- background-color奇怪的進(jìn)入相臨元素
- firefox下父容器高度不能自適應(yīng)的解決方法
- WebDesignUsabilityCheckList-Web可用性檢查列表
- 為什么IE6下容器的寬度和FF解釋不同呢
- DIV CSS的XHTML代碼結(jié)構(gòu)淺談-不要真DIV CSS了
- DIV+CSS設(shè)計(jì)的誤區(qū)
- overflow與text-indent:-9999px 字體隱藏及input value偏移
- CSS實(shí)戰(zhàn)：id是狙擊槍class是雙刃劍合則兩利分則兩敗
猜你也喜歡看這些
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- DIVCSS橫向菜單實(shí)例：簡(jiǎn)單的思路陷下的風(fēng)格不錯(cuò)的效果
- CSS菜單實(shí)例：按鈕效果跳躍的藍(lán)色精靈
- DIVCSS菜單實(shí)例：紅與黑具有立體質(zhì)感的CSS菜單
- jquery模擬瀏覽器滾動(dòng)條效果
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁布局豆瓣首頁
- CSS布局實(shí)例：CSS標(biāo)簽切換代碼實(shí)例教程
- 用css網(wǎng)站布局之十步實(shí)錄！(四)
- CSS菜單實(shí)例：極致而簡(jiǎn)約的風(fēng)格
- CSS菜單：由CSS滑動(dòng)門技術(shù)實(shí)現(xiàn)的菜單十一款
- 相關(guān)鏈接：
- 教程說明：
Div+CSS教程-本人使用的頁面常用布局及樣式代碼
。