案例1
<!-- html.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合使用CSS</title> <link href="ex17.css" type="text/css" rel="stylesheet"> <style type="text/css"> body{ margin: 0px; } #apTop{ position: relative; margin: auto; width: 600px; text-align: center; border: #00F 1px solid; } #apCenter{ position: relative; margin: 5px auto; width: 600px; height: 240px; border:#00F 1px solid; } #apMain{ position: relative; margin: 0px auto; width: 600px; height: 250px; border:#00F 1px solid; } #apMainLeft{ position: absolute; left:0px; bottom:0px; border:#F00 1px solid; } #apMainRight{ position: absolute; right:0px; bottom:0px; border: #F00 1px solid; } </style> </head> <body> <div id="apTop"> <embed src="images/timg.gif" height="28" width="500"> </div> <div id="apCenter"> <img src="images/green.jpg" alt="" width="600" height="240"> </div> <div id="apMain"> <div id="apMainLeft"> <table width="360" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="4"> <img src="images/1.gif" alt="" width="88" height="18"> </td> </tr> <tr class="Center"> <td> <a href="#"> <img src="images/2.gif" alt="" width="82" height="56"><br/>贺卡版 </a> </td> <td> <a href="#"> <img src="images/3.gif" alt="" width="82" height="56"><br/>贺卡版 </a> </td> <td> <a href="#"> <img src="images/4.gif" alt="" width="82" height="56"><br/>贺卡版 </a> </td> <td> <a href="#"> <img src="images/5.gif" alt="" width="82" height="56"><br/>贺卡版 </a> </td> </tr> <tr> <td colspan="4"> <img src="images/6.gif" alt="" width="78" height="17"> </td> </tr> <tr class="Center"> <td> <a href="#"> <img src="images/7.gif" alt="" width="82" height="56"><br/>贺卡版 </a> </td> <td> <a href="#"> <img src="images/8.gif" alt="" width="82" height="56"><br/>贺卡版 </a> </td> <td> <a href="#"> <img src="images/9.gif" alt="" width="82" height="56"><br/>贺卡版 </a> </td> <td> <a href="#"> <img src="images/10.gif" alt="" width="82" height="56"><br/>贺卡版 </a> </td> </tr> <tr> <td colspan="4"><img src="images/11.gif" alt="" width="69" height="18"></td> </tr> <tr> <td colspan="2"> <a href="#">森林狂想曲(推荐)</a> </td> <td colspan="2"> <a href="#">梁祝-蝴蝶梦(浪漫钢琴曲)</a> </td> </tr> <tr> <td colspan="2"><a href="#">流浪-Enya 恩雅</a></td> <td colspan="2"><a href="#">流浪-Enya 恩雅</a></td> </tr> </table> </div> <div id="apMainRight"> <table width="220" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="left"> <img src="images/12.gif" alt="" width="71" height="17"> </td> </tr> <tr> <td colspan="2" align="left"> <ul> <li><a href="#">期待世博会</a></li> <li><a href="#">期待世博会</a></li> <li><a href="#">期待世博会</a></li> <li><a href="#">期待世博会</a></li> </ul> </td> </tr> <tr> <td colspan="2" align="left"> <img src="images/13.gif" alt="" width="57" height="17"> </td> </tr> <tr class="Center"> <td> <a href="#"> <img src="images/14.gif" alt="" width="82" height="56"><br/>backkom </a> </td> <td> <a href="#"> <img src="images/15.jpg" alt="" width="82" height="56"><br/>AOA </a> </td> </tr> </table> </div> </div> </body> </html>
/* html.css */ td{ font-size: 12px; } td img{ border:0; } .Center{ text-align: center; } a:link{ color:#000; text-decoration: none; } a:visited{ text-decoration: none; } a:hover{ color:#00F; text-decoration: underline; }