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%;
    }


  • 相关阅读:
    测试开发题目整理(二)
    测试开发题目整理(一)
    Python + request接口测试中Cookie和Session的获取和使用
    requests发送HTTPS请求(处理SSL证书验证)
    js ES5面向对象继承 模仿ES6
    如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法
    javascript对象创建及继承
    观察者模式及事件与委托的区别-20171215内训会
    html5悬浮球效果
    文本框高度自适应不出滚动条
  • 原文地址:https://www.cnblogs.com/wjchang/p/3671552.html
Copyright © 2011-2022 走看看