第一次用div+css布局

主页面index.html源代码如下：

 

<! 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=gb2312"   />
< title > 无标题文档 </ title >

< link  href ="css.css"  rel ="stylesheet"  type ="text/css"   />

< link  href ="nav.css"  rel ="stylesheet"  type ="text/css"   />
</ head >

< body >
< div  id ="main" >
     < div  id ="head" ></ div >
     < div  id ="nav" >
        < ul >
          < li >< a  href ="a" >< span > 首页 </ span ></ a ></ li >  |
          < li >< a  href ="b" >< span > 新闻 </ span ></ a ></ li >  |
          < li >< a  href ="c" >< span > 体育 </ span ></ a ></ li >  |
          < li >< a  href ="d" >< span > 明星 </ span ></ a ></ li >  |
          < li >< a  href ="e" >< span > 博客 </ span ></ a ></ li >  |
          < li >< a  href ="f" >< span > 科技 </ span ></ a ></ li >  |
          < li >< a  href ="g" >< span > 大唐豪侠 </ span ></ a ></ li >  |
          < li >< a  href ="h" >< span > 女人 </ span ></ a ></ li >
        </ ul >
     </ div >
     < div  id ="left" >
       < table >
         < tr >< td  class ="tdleft" > 用户名： </ td >< td  class ="tdright" >< input  type ="text"  size ="15"  maxlength ="20"  style ="height:15px"   /></ td ></ tr >
         < tr >< td  class ="tdleft" > 密  码： </ td >< td  class ="tdright" >< input  type ="password"  size ="15"  maxlength ="20"  style ="height:15px"   /></ td ></ tr >
         < tr >< td  colspan ="2" >< input  type ="submit"  value ="提交"  style ="border:1px" />
          < input  type ="reset"  value ="重置"  style ="border: 1px"   /></ td ></ tr >
       </ table >
     </ div >
     < div  id ="right" ></ div >
     < div  id ="foot" ></ div >
</ div >
</ body >
</ html >

css.css源代码如下：

 

/**/ /* CSS Document */
* {...} {
   padding:0;
   margin:1px;
  }
body {...} {
  text-align:center;
  font:"新宋体";
  font-size:12px;
  }
#main {...} {
   
   width:800px;
   }
   
#head {...} {
   width:798px;
   height:100px;
   border:1px #FF99FF solid;
   margin-bottom:3px;
   background:url(Logo.gif) center repeat  fixed;
   }
   
#nav {...} {
  width:798px;
  background:#CCCCCC;
  border:1px #FF99FF solid;
  margin-bottom:5px;
  text-align:left;
    }
#left {...} {
   width:180px;
   border:1px #FF99FF solid;
   float:left;
   margin-right:3px;
   }
#right {...} {
   width:auto;
   border:1px #FF99FF solid;
   float:right;
   }
#foot {...} {
   width:798px;
   border:1px #FF99CC solid;
   margin-top:5px;
   clear:both;
   }

nav.css源代码如下：

 

/**/ /* CSS Document */

#nav  li {...} {
    list-style-type:none;
    display:inline;
    font:"新宋体";
    font-size:15px;
    font-weight:bold;
    }

 a:link,a:visited  {...} {
    text-decoration:none;
    color:#000000;
    }
    
 a:hover  {...} {
    text-decoration:underline;
    
    color:blue;
    }