从零开始HTML（二2016/9/20）

1.布局

① 使用

元素的 HTML 布局，

元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

   DOCTYPE html  > 
   html  > 

   head  > 
   style  >  
#header   {  
    background-color  :  black  ;  
    color  :  white  ;  
    text-align  :  center  ;  
    padding  :  5px  ; 
 }  
把div理解成一个盒子，设置了盒子的高和宽，后面的盒子就自动跑到前面盒子没占的地方
#nav   {  
    line-height  :  30px  ;  
    background-color  :  #eeeeee  ;  
    height  :  300px  ;         
    width  :  100px  ;  
    float  :  left  ;  
    padding  :  5px  ;           
 }  
#section   {  
    width  :  350px  ;  
    float  :  left  ;  
    padding  :  10px  ;           
 }  
#footer   {  
    background-color  :  black  ;  
    color  :  white  ;  
    clear  :  both  ;          清除前面float(浮动)的影响
    text-align  :  center  ;  
   padding  :  5px  ;           
 } 
   style  > 
   head  > 

   body  > 

   div   id  ="header"  > 
   h1  > City Gallery   h1  > 
   div  > 

   div   id  ="nav"  >  
London    br  >  
Paris    br  >  
Tokyo    br  > 
   div  > 

   div   id  ="section"  > 
   h2  > London   h2  > 
   p  >  
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
    p  > 
   p  >  
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
    p  > 
   div  > 

   div   id  ="footer"  >  
Copyright ? W3Schools.com
    div  > 

   body  > 
   html  >  

查看更多关于从零开始HTML（二2016/9/20）的详细内容...