和风细雨

世上本无难事，心以为难，斯乃真难。苟不存一难之见于心，则运用之术自出。

Blogjava的CSS实现

效果：


CSS页面设置代码：
body{
    margin:0 auto;
    text-align:center;
    min-width:760px;
    background:#e6e6e6;
}

#bodyDiv{
    width:924px;
    margin:0 auto;
    text-align:left;
    background:#eefaec;
}

#header{
    width:924px;
    height:132px;
    background:#ffffff;
}

#sidebar{
    margin:2px;
    width:170px;
    height:560px;
    float:right;
    background:#ffffff;
    border-style:dashed;
    border-color:#b9ecae;
    border-width:1px;
    padding-top:20px;
    padding-bottom:20px;
}

#sidebar li{
    padding-left:20px;
    padding-right:20px;
}

#content{
    margin:2px;
    width:740px;
    height:560px;
    float:left;
    border-style:dashed;
    border-color:#b9ecae;
    border-width:1px;
    background:#f8f8f8;
    padding-top:20px;
}

#footer{
    clear:both;
    background:#eefaec;
}

ul{
    margin:0;
    padding:0;
    list-style-type:none;
}

a:link {
    color: #6fbc4c;
    text-decoration: none;
}
a:active {
    color: #6fbc4c;
}
a:visited {
    color: #6fbc4c;
}
a:hover {
    color: #646464;
}

h1 {
    font-size: 18px; 
    margin: 10px 0px 5px; 
    color: #666666; 
    text-align: center;
}
h2 {
    font-size: 16px; 
    margin: 10px 0px 5px; 
    color: #666666; 
    text-align: center;
}
h3 {
    font-size: 14px; 
    margin: 10px 0px 5px; 
    color: #666666; 
    text-align: center;
}

页面代码：
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Bug管理布局示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/bugmngLayout.css"
    type="text/css" />
</head>

<body>
<div id="bodyDiv">
<div id="header">
    <jsp:include page="/web/page/branch/header2.jsp"/>
</div>
<div id="sidebar">
    <jsp:include page="/web/page/branch/sidebar.jsp"/>
</div>
<div id="content">
    <jsp:include page="/web/page/branch/content.jsp"/>
</div>
<div id="footer">
    <jsp:include page="/web/page/branch/footer.jsp"/>
</div>
</div>
</body>
</html>





posted on 2008-03-17 22:06 和风细雨 阅读(346) 评论(0)  编辑  收藏 所属分类: CSS


只有注册用户登录后才能发表评论。
网站导航: