学习时自娱自乐。 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="tab.css" mce_href="tab.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="selbar"> <ul> <li class="wbottom addto"><a href="#" mce_href="#">页面1</a></li> <li><a href="index2.html" mce_href="index2.html">页面2</a></li> <li><a href="index3.html" mce_href="index3.html">页面3</a></li> <li><a href="index4.html" mce_href="index4.html">页面4</a></li> <li><a href="index5.html" mce_href="index5.html">页面5</a></li> </ul> </div> <div class="content"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </div> </body> </html> tab.css --------------------------- body{ margin:10px; } .selbar { width:364px; } .content { border-bottom:1px solid #0033FF; border-left:1px solid #0033FF; border-right:1px solid #0033FF; padding:15px; width:332px; } ul { list-style-type:none; margin:0px; padding-left:10px; padding-bottom:23px; border-bottom:1px solid #0033FF; font:bold 12px verdana, arial; } li { background-color:#99CCCC; float:left; height:22px; margin:0px 3px 0px 0px; border:1px solid #0033FF; } a:link,a:visited { text-decoration:none; display:block; padding:3.5px 10px 3.5px 10px; } a:hover { background-color:#CC0000; color:#FFFFFF; } .wbottom { border-bottom-color:#FFFFFF; background-color:#FFFFFF; } .addto a:hover { background-color:#FFFFFF; color:#0033FF; text-decoration:underline; }