• 使用CSS 排版网页布局

     

    代码如下：

     

    <html>
    <head>
    <style type="text/css">
    <!--
    body {
        margin:0px;
        font-size:13px;
        font-family:Arial;
    } 
    #container{
        position:relative;
        width:100%;
    }
    #banner{
        height:80px;
        border:1px solid #000000;
        text-align:center;
        background-color:#a2d9ff;
        padding:10px;
        margin-bottom:2px;
    }
    #content{
        float:left;
        text-align:center;
        padding-right:200px;    /* 内容往回挤200px */
    }
    #links{
        float:right;
        width:200px;
        border:1px solid #000000;
        margin-left:-200px;        /* 强行往左拉回200px */
        text-align:center;
    }
    #footer{
        clear:both;                /* 不受float影响 */
        text-align:center;
        height:30px;
        border:1px solid #000000;
    }
    -->
    </style>
    <title>CSS排版</title><body>
    <div id="container">
        <div id="banner">banner</div>
        <div id="content">
            <div class="blog">
                <div class="date">date</div>
                <div class="blogcontent">
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
    content content content content content content content content content content<br>
                </div>
            </div>
            <div class="others">others</div>
        </div>
        <div id="links">
            <div class="calendarhead">links<br>links<br>links<br>links</div>
            <div class="calendartable">links<br>links<br>links<br>links</div>
            <div class="side">links<br>links<br>links<br>links</div>
            <div class="syndicate">links<br>links<br>links<br>links</div>
            <div class="friends">links<br>links<br>links<br>links</div>
        </div>
        <div id="footer">footer</div>
    </div>
    </body>
    </html>

     

    运行效果如下：


    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

    作者： XuGang   网名：钢钢
    出处： http://xugang.cnblogs.com
    声明： 本文版权归作者和博客园共有。转载时必须保留此段声明，且在文章页面明显位置给出原文连接地址！
  • 相关阅读:
    数据访问层之Repository
    IIS执行原理
    异常分析
    Logger
    JSTL
    Kubernetes
    NET Core WordPress
    net平台的rabbitmq
    MySQL can’t specify target table for update in FROM clause
    EqualsBuilder和HashCodeBuilder
  • 原文地址：https://www.cnblogs.com/xugang/p/1794729.html
Copyright © 2020-2023  润新知