网页制作学习经典案例.doc

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title清华大学/title style type=text/css body,dt,dd{ margin:0; padding:0; } #logo{ margin-top:-9px; padding-top:; margin-left:175px; background:#7f42ad; text-align:center; width:1000px; height:8px; } #title{ font-family:Verdana, Geneva, sans-serif,微软雅黑; width:1350px; height:121px; background:url(logo1.PNG) no-repeat; background-position:175px 21px; background-color:#e1e1e1; border-bottom:3px solid #7f42ad; } #title ul{ float:right; padding-right:175px; } #title ul li{ padding-top:25px; list-style:none; margin-top:0px; } #title ul li a{ text-decoration:none; padding-left:100px; color:#5c307d; } #menu{ margin-top:-12px; } #menu ul{ width:1200px; height:150px; margin-left:110px; } #menu ul a{ display:block; height:32px; } #menu dl dt a{ font-family:微软雅黑; font-size:15px; text-decoration:none; color:#303; } #menu dl dd a{ font-family:微软雅黑; font-size:11px; text-decoration:none; color:#FFF; } #menu li{ float:left; width:100px; padding:0; list-style-type:none; } #menu li dt{ text-align:center; } #menu li dd{ width:100%; display:none; text-align:center; } #menu li:hover dd{ display:block; } #menu li a:hover{ background:#7f42ad; color:white; } #menu dl:hover{ background:#7f42ad; } #exhi{ background:url(logo2.PNG) no-repeat; width:1350px; height:401px; background-position:100px; margin-top:-120px } #content{ margin-left:175px; } h3{ font-family:微软雅黑; font-weight:500; } h4{ font-family:微软雅黑; font-weight:500; } #left{ width:320px; height:218px; float:left; font-size:16px; font-family:Verdana, Geneva, sans-serif,宋体; font-weight:100; color:#333; border-bottom:#b685f7 solid 3px; border-top:#5b317d solid 3px; background-color:#edeaf1; } #center{ width:320px; height:218px; float:left; font-size:16px; font-family:Verdana,