本人使用的页面常用布局及样式代码_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教程