自己第一个正儿八经的div+css页面

虽然很简单，但毕竟是自己第一次按照web标准画的页面，呵呵。
这是一个简单的两行三列的大表格布局。以后设计简单页面就可以“照方吃炒肉”了。

代码如下：

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 收藏本站 </ title >
< style  type ="text/css" >
    #main {
        width : 100% ;
        height : 100% ;
        height : 800px ;
     }

    #left {
    width : 150px ;
    height : 100% ;
    background : gray ;
    float : left ;
     }
        #function {
            width : 100% ;
            height : 79% ;
            background : orange ;
         }
        
        #status {
            width : 100% ;
            height : 165px ;
            background : silver ;
            margin-top : 2px ;
            
         }
    
    #middle {
    width : 700px ;
    height : 100% ;
    margin-left : 5px ;
    margin-top : 0px ;
    background-color : fuchsia ;
    float : left ;
     }
        #map {
            width : 100% ;
            height : 79% ;
            background : aqua ;
         }
        
        #search {
            width : 100% ;
            height : 165px ;
            background : blue ;
            margin-top : 2px ;
            
         }


    #right {
    width : 200px ;
    height : 100% ;
    margin-top : 0px ;
    background : lime ;
    float : left ;
    margin : 0px 0px 0px 5px ;
     }
    
        #list {
            width : 100% ;
            height : 79% ;
            background : orange ;
         }
        
        #detail {
            width : 100% ;
            height : 165px ;
            background : silver ;
            margin-top : 2px ;
            
         }

}
</ style >
</ head >

< body >
< div  id ="main"   >
     < div  id ="left"    >
         < div  id ="function" ></ div >
         < div  id ="status" ></ div >
     </ div >
     < div  id ="middle"   >
         < div  id ="map" ></ div >
         < div  id ="search" ></ div >
     </ div >
     < div  id ="right"   >
         < div  id ="list" ></ div >
         < div  id ="detail" ></ div >
     </ div >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/xingyukun/archive/2008/12/08/1350551.html