zoukankan      html  css  js  c++  java
  • 网页布局

    <style type="text/css">
    body{
     background:#fff;
     font:13px/1.5 Arial, Helvetica, sans-serif;
     margin:0;
     padding:0;
    }
    .rounded{
     background:#aaa url(images/lt.gif) top left no-repeat;
     100%;
    }
    .rounded h2{
     background:url(images/rt.gif) top right no-repeat;
     padding:20px 20px 10px;
     margin:0;
    }
    .rounded .main{
     background:url(images/r.gif) top right repeat-y;
     padding:10px 20px;
     margin:-2em 0 0 0;
    }
    .rounded .footer{
     background:url(images/lb.gif) bottom left no-repeat;
    }
    .rounded .footer p{
     color:#888;
     text-align:right;
     background:url(images/rb.gif) bottom right no-repeat;
     
     display:block;
     padding:10px 20px 30px;
     margin:-2em 0 0 0;
    }
    #header,#containter,#pagefooter{
     760px;
     margin: 0 auto;
    }
    #left{
     margin-left:65px;
     float:left;
     170px;
    }
    #containter{
     float:left;
     400px;
    }
    #bar{
     170px;
    }
    </style>
    </head>

    <body>
    <div id="header">
     <div class="rounded">
     <h2>Page Header</h2>
        <div class="main">
         <p>
             这是一行文本,这里作为样例,显示在布局框中<br />
                这是一行文本,这里作为样例,显示在布局框中
                </p>
                </div>
                <div class="footer">
                <p>
                 查看详细信息
                    </p>
                </div>
                </div>
    </div>
     
    <div id="center">

    <div id="left">
     <div class="rounded">
     <h2>Left Sid</h2>
        <div class="main">
         <p>
             这是一行文本,这里作为样例,显示在布局框中<br />
                这是一行文本,这里作为样例,显示在布局框中这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布局框中这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布这是一行文本,这里作,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布这文本
                </p>
                </div>
                <div class="footer">
                <p>
                 查看详细信息
                    </p>
                </div>
                </div>
    </div>

    <div id="containter">
     <div id="content">
     <div class="rounded">
     <h2>Page Content1</h2>
        <div class="main">
         <p>
             这是一行文本,这里作为样例,显示在布局框中<br />
                这是一行文本,这里作为样例,显示在布局框中在布
                </p>
                </div>
                <div class="footer">
                <p>
                 查看详细信息
                    </p>
                </div>
                </div>
     </div>
     <div id="side">
     <div class="rounded">
     <h2>Page Content2</h2>
        <div class="main">
         <p>
             这是一行文本,这里作为样例,显示在布局框中<br />
                这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布这是一行文本,这里作为样例,显示在布例,显示在局框中
                </p>
                </div>
                <div class="footer">
                <p>
                 查看详细信息
                    </p>
                </div>
                </div>
     </div>
    </div>

    <div id="bar">
    <div id="side1">
     <div class="rounded">
     <h2>Page Sid1</h2>
        <div class="main">
         <p>
             这是一行文本,这里作为样例,显示在布局框中<br />
                这是一行文本,这里作为样例,显示在布局框中
                </p>
                </div>
                <div class="footer">
                <p>
                 查看详细信息
                    </p>
                </div>
                </div>
    </div> 
    <div id="side2">
     <div class="rounded">
     <h2>Page Sid2</h2>
        <div class="main">
         <p>
             这是一行文本,这里作为样例,显示在布局框中<br />
                这是一行文本,这里作为样例,显示在布局框中
                </p>
                </div>
                <div class="footer">
                <p>
                 查看详细信息
                    </p>
                </div>
                </div>
    </div>
    </div>
    </div>
    <div id="pagefooter">
     <div class="rounded">
     <h2>Page Pagefooter</h2>
        <div class="main">
         <p>
             这是一行文本,这里作为样例,显示在布局框中<br />
                这是一行文本,这里作为样例,显示在布局框中
                </p>
                </div>
                <div class="footer">
                <p>
                 查看详细信息
                    </p>
                </div>
                </div>
    </div> 
          
    </body>

  • 相关阅读:
    VS2012打开项目——已停止工作
    使用copydata实现进程之间数据传递
    WPF Demo20 模板
    WPF Demo19 命令、UC
    WPF Demo18 路由事件
    WPF Demo17 数据绑定
    Spark2.3.0 报 io.netty.buffer.PooledByteBufAllocator.metric
    Impala与Hive的优缺点和异同
    Hive 报错信息及解决方法
    hive表多种存储格式的文件大小差异,无重复数据
  • 原文地址:https://www.cnblogs.com/weixiao/p/2229762.html
Copyright © 2011-2022 走看看