网页布局

<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>

原文地址:https://www.cnblogs.com/weixiao/p/2229762.html