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>

  • 相关阅读:
    .net持续集成cake篇之使用vs或者vscode来辅助开发cake脚本
    Redis集合类型
    Git如何合并Commit
    Redis列表类型
    Redis散列表类型
    Redis字符串类型
    2. 引用计数法(Reference Counting)
    调皮的控制台
    Python str与bytes之间的转换
    安全速查
  • 原文地址:https://www.cnblogs.com/weixiao/p/2229762.html
Copyright © 2011-2022 走看看