visiting index CSS/HTML动态

 html的代码。

< html >
< head >
< title > visiting index
</ title >
< link  rel ="stylesheet"  href ="visiting index.css"  type ="text/css"   />
</ head >
< body >
<!-- ----------header -->
< div  id ="header" >
< h3 >  OHIO University Visiting </ h3 >
< div >< A  href ="#" > homepages </ A > | < a  href ="#" > OHIO University </ a > | < A  href ="#" > our visiting </ A > | < A  href ="#" > photoes </ A > | < a  href ="#" > time table </ a ></ div >
</ div >
< div  id ="mid" >
<!-- --------nav -->
< div  id ="nav-left" >< ul  id ="ul-nav" >
< li >< A  href ="#" > accommodation </ A ></ li >
< li >< A  href ="#" > dining </ A ></ li >
< li >< A  href ="#" > course </ A ></ li >
< li >< A  href ="#" > enjoyment </ A ></ li >
</ ul ></ div >
<!-- ----------content- -->
< div  id ="content" >
< h4 >  OHIO University location </ h4 >
< img  src ="../PHPLEARING/pictures/MM_3.jpg"   />
< p > Visitors arriving via U.S. Route 33 or U.S.Route 50are advised to take the Athens exit for tate Route 682(North).At the traffic light,
turn right onto Richland Avenue. </ p >
< p > For diections to specific destinations, stop at the Ohio University Visitors Center,the log structure located on our left at the corner of Ricchland Avenue and South Shafer Street. </ p >
< p > To reach the college Green, follow Richland Avenue to the second traffec light and turn left onto Court Street to the second intersection and turn right onto Washington Street where you'll find the Athens City Parking Garage.A short walk south on Court Street or College Street will bring you to the College Green. </ p >
</ div >
</ div >
<!-- ---------footer- -->
< div  id ="fonter" > copyrigt@2007-2008 </ div >

</ body >
</ html >

 

css文件代码保存为visiting index.css

 

body {...} {margin:0; font:14px Arial, Helvetica, sans-serif; color:#222020; text-align:center; }
/**/ /***header*****************************/
#header {...} {width:800px; float:left; clear:both; overflow:auto; background-color:#d0d0f0;
border-bottom:5px solid #aaaaaa;}
#header a {...} {text-decoration:none;}
#header a:hover {...} {display:inline; text-decoration:none; color:white; background-color:olive;}
/**/ /***mid-div****************************/
#mid {...} {width:800px; float:left; clear:both; overflow:auto;}
/**/ /***nav***********************************/
#nav-left {...} {padding-top:44px; width:170px; height:456px; float:left; background-color:#555555; color:#ffffff; line-height:1.5em; text-align:center;}
#ul-nav {...} { list-style-type:none; margin:0px;}
#nav-left li a {...} {display:block; border-bottom:2px solid #207020; height:28; color:#207020; text-decoration:none; background-color:#eeeeee;}
#nav-left li a:hover {...} {color:#ffffff; background-color:#207020;}
/**/ /***content***********************************/
#content {...} {width:630px; height:500px; float:right; text-align:left; background-color:#ffaf60;}
#content h4 {...} {margin:10px; color:#207020;}
#content p {...} {margin:20px; line-height:1.2em; font-size:14px; color:#207020; text-indent:2em;}
#content img {...} {margin-right:20px; float:left; border-right:5px solid #207020;}
/**/ /***fonter**********************************/
#fonter {...} {width::800px; float:left; font-family:"Times New Roman", Times, serif; background-color:#dddddd; color:#101010; clear:both; font-size:12px; border-bottom:1px solid #aaaaaa;}