Maison > interface Web > tutoriel HTML > 简单的div+css布局之一_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 12:31:01
original
926 Les gens l'ont consulté

简单的div+css的实例布局,利用图片进行布局,首先要准备5张图片。

left-top.gif                    right-top.gif

right.gif                          left-bottom.gif

right-bottom.gif

p1

实例1代码:



固定宽度  相对定位

 



 
 

  

 

 

Page Content


   

     


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

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


           

           
           

 

           

 

 

Page Content1


   

     


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

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


           

           
           

 

   
   
         
 
  

   

   

Page Side


      

     


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

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


           

           
           

           
           

 

 

Page Side


   

     


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

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


           

           
           

           
 

 

 

        

p2

实例2 代码:

 



固定宽度  相对定位

 



 

 

  


  

 

 

Page Content


   

     


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

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


           

           
           

 

           

 

 

Page Content1


   

     


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

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


           

           
           

 

   
   
         
 
  

   

   

Page Side


      

     


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

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


           

           
           

           
           

 

 

Page Side


   

     


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

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


           

           
           

           
 

 

 

        

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal