Maison > interface Web > tutoriel HTML > CSS+DIV布局的测试实例_html/css_WEB-ITnose

CSS+DIV布局的测试实例_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:32:32
original
1024 Les gens l'ont consulté

最后显示效果如下图:

代码:







     Sammy Test Div title >
    
        #rtop{}{       
        margin:0 auto;
        height:30%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCCC00;
        }
        
        #rbottom{}{        
        margin:0 auto;
        height:70%;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #CCee00;
        }
        
        #left{}{        
        float:left;
        height:100%;
        width:50%;    
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;   
        background: #CCCCed;
        }
        
        #container{}{        
        width:600px;  
        height:300px;   
        vertical-align:middle; 
        text-align:center; 
        font-family:Arial; 
        font-size:x-large;  
        background-color:Green
        }
        
        #leftside{}{
        width:20%;
        height:60%;
        float:left;
        font-family:Arial; 
        font-size:x-large;
        vertical-align:middle; 
        text-align:center;
        background: gray;
        }
        
        #rightside{}{
        width:80%;
        height:60%;
        float:left;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background: #Cdfd00;
        }
        
        #foot{}{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:InactiveBorder;
        }
        #header{}{
        height:20%;
        clear:both;
        vertical-align:middle; 
        text-align:center;
        font-family:Arial; 
        font-size:x-large;
        background-color:Red
        }
       

     style >
head >

    
    
        
            header   
         div >
        
          
            leftside
           div >
                    
             
                right top
              div >
             
                 
                    left
                  div >
                 
                    right
                  div >
              div >
           div >
         div >
        
            foot           
         div >
         div >
     form >
body >
html >

É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