zoukankan      html  css  js  c++  java
  • DIV+CSS(博客框架)

    <!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
    {
        100%;
    }
    
    #header
    {
        800px;
        margin:0 auto;
        height:100px;
        background:#FFCC99;
    }
    
    #pagebody
    {
        800px;
        margin:0 auto;
        height:400px;
        background:#CCFF00;
    }
    
    #footer
    {
        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
    {
        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
    {
       750px;
       margin:40px 20px auto;
       border-bottom: 5px solid #EFEFEF;
       clear:both;
    }
    
    #pagebody
    {
        800px;
        margin:8px auto;
    }
    
    #sidebar
    {
        160px;
        text-align:left;
        float:left;
        clear:left;
        overflow:hidden;
        border:1px solid #E00;
        height:100%;
    }
    
    #mainbody
    {
        636px;
        text-align:left;
        float:right;
        overflow:hidden;
        border:1px solid gray;
        height:100%;
    }


  • 相关阅读:
    AE开发中Geometry到Polyline/Polygon的转换--转载
    asp.net MVC Views-----Controller传递数据方法
    百度翻译APi接口实现
    javascript添加删除行信息
    XMLDocument
    GDI绘制图像
    测试局域网内网络数据
    HL7 V2 分隔符
    IHE-PIX 备注
    数据库关键字 (Oracle, SQL Server, DB2)
  • 原文地址:https://www.cnblogs.com/wjchang/p/3671552.html
Copyright © 2011-2022 走看看