cari

Rumah >hujung hadapan web >html tutorial >简单div+css布局之二_html/css_WEB-ITnose

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

WBOY
WBOYasal
2016-06-24 12:32:001077semak imbas

 

续简单的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 代码：



无标题文档


 





Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：DIV+CSS 斜线效果_html/css_WEB-ITnoseArtikel seterusnya：div+css+html学习笔记（1）_html/css_WEB-ITnose

Artikel berkaitan

Lihat lagi