简单div+css布局之二_html/css_WEB-ITnose

 

续简单的div+css的布局之一

 

left-top.gif                    right-top.gif

 

right.gif                          left-bottom.gif

 

 

right-bottom.gif

 

p3

实例 3 代码：

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;

       width: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,#pagefooter,#containter{

       width:760px;

       margin: 0 auto;

}

 

#content{

       width:497px;

       float:left;

       position:relative;

       top:20px;

      

}

#content1{

       width:260px;

}

#side{

      

       width:248px;

       float:left;

}

#side1{

       width:248px;

       float:left;

}

#side2{

       width:260px;

}

 

 

 

   

   

         

 

 

        

p4

实例 4 代码：

 

 

 
 
   
   
         
 

 

        

p5

实例 5 代码：