DIV+CSS（博客框架）

txf2004

浏览: 7133752 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!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>
    <title></title>
    <link href="blog.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="container">
        <div id="header">
            <div id="menu">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li class="menugap"></li>
                    <li><a href="#">博客</a></li>
                    <li class="menugap"></li>
                    <li><a href="#">设计</a></li>
                    <li class="menugap"></li>
                    <li><a href="#">相册</a></li>
                    <li class="menugap"></li>
                    <li><a href="#">论坛</a></li>
                    <li class="menugap"></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </div>
            <div id="banner">
            </div>
        </div>
        <div id="pagebody">
            <div id="sidebar">
            </div>
            <div id="mainbody">
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

body
{
    font:12px Tahoma;
    margin:0px;
    text-align:center;
    background:#FFF;
}

#container
{
    width:100%;
}

#header
{
    width:800px;
    margin:0 auto;
    height:100px;
    background:#FFCC99;
}

#pagebody
{
    width:800px;
    margin:0 auto;
    height:400px;
    background:#CCFF00;
}

#footer
{
    width:800px;
    margin:0 auto;
    height:50px;
    background:#00FFFF;
}

#menu
{
    padding:20px 20px 0 0;
}

#menu ul
{
    list-style:none;
    margin:0px;
    float:right;
}

#menu ul li
{
    float:left;
    margin:0 10px;
    display:block;
    line-height:28px;
}

.menugap
{
    width:1px;
    height:28px;
    background:#999;
}

#menu ul li a
{
    text-decoration:none;
    font-weight:bold;
    color:#666;
}

#menu ul li a:hover
{
    color:Red;
}

#banner
{
   width:750px;
   margin:40px 20px auto;
   border-bottom: 5px solid #EFEFEF;
   clear:both;
}

#pagebody
{
    width:800px;
    margin:8px auto;
}

#sidebar
{
    width:160px;
    text-align:left;
    float:left;
    clear:left;
    overflow:hidden;
    border:1px solid #E00;
    height:100%;
}

#mainbody
{
    width:636px;
    text-align:left;
    float:right;
    overflow:hidden;
    border:1px solid gray;
    height:100%;
}

分享到：