Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > 简单的div+css布局之一_html/css_WEB-ITnose

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

WBOY
Freigeben： 2016-06-24 12:31:01
Original
918 Leute haben es durchsucht

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


   

     


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

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


           

           

           


             查看详细信息
               


           

           

           
 

 

 

        

Verwandte Etiketten：
简单的div+css布局之一
Quelle：php.cn
Vorheriger Artikel：div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome方法_html/css_WEB-ITnose Nächster Artikel：div+css 你知道多少？值得一看_html/css_WEB-ITnose
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Der Flex-Abstand ist fehlerhaft, wenn versucht wird, das HTML-Tag <pre><code> überlaufen zu lassen, anstatt es umzubrechen Ich wende CSS auf den Vorcode-Selektor an, um gestaltete Codeblöcke zu erstellen, wie Sie ...
Aus 2024-04-01 12:22:06
0
1
296
Kann CSS Gitterlinien anzeigen? Ich habe angefangen, das CSS-Rasterlayout zu lernen. In einer idealen Welt wäre ich in der...
Aus 2024-03-31 20:38:21
0
2
395
Flexbox-Elemente laufen über den Container hinaus, wenn das Fenster zu kurz ist und die Seitenleiste die untere Ausrichtung nicht beibehalten kann Ich versuche, ein einfaches Flex-Layout zu verwenden, das aus einer Kopfzeile, einem 2x2-I...
Aus 2024-03-31 00:03:58
0
1
355
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage