suchen

Heim >Web-Frontend >HTML-Tutorial >简单div+css布局之二_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:32:001077Durchsuche

 

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



无标题文档


 





Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：DIV+CSS 斜线效果_html/css_WEB-ITnoseNächster Artikel：div+css+html学习笔记（1）_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen