首页 >web前端 >html教程 >简单div+css布局之二_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 12:32:001084浏览

 

续简单的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;

}

 

 

 

     

      

      

Page Content

   

          

               这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中

           

           

           

           

      

           

      

      

Page Content1

   

          

               这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中

           

           

           

           

      

   

   

         

 

         

             

                    

                    

Page Side

                 

          

               这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中

           

           

           

           

                    

                    

Page Side3

                 

          

               这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中

           

           

           

           

           

           

           

      

      

Page Side2

   

          

               这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中

           

           

           

           

           

      

 

 

        

p4

实例 4 代码:

 


固定宽度  相对定位

 



 
 

  

 

 

Page Content


   

     


         这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中
           


           

           
           

 

 

 

Page Contentb


   

     


         这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中
           


           

           
           

 

   
   
           

 

 

Page Content1


   

     


         这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中
           


           

           
           

 

   
   
         
 
  

   

   

Page Side


      

     


         这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中
           


           

           
           

           
           

 

 

Page Side2


   

     


         这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中
           


           

           
           

           
 

 

 

Page Side3


   

     


         这是一行文本,这里作为样例,显示在布局框中

            这是一行文本,这里作为样例,显示在布局框中
           


           

           
           

           
 

   

 

 

        

p5

实例 5 代码:



无标题文档


 





声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn