这是最终效果:
这是代码：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 <title>首页</title> 9 <style type ="text/css"> 10 * { 11 margin:0; 12 padding:0; 13 } 14 15 .wrap { 16 margin-top:20px; 17 border-top:1px solid #F1F1F1; 18 border-bottom:3px solid #B81D18; 19 } 20 21 .top { 22 height:43px; 23 width:990px; 24 margin:0 auto; 25 } 26 27 .top li { 28 list-style-type:none; 29 float:left; 30 line-height:43px; 31 width:110px; 32 height:43px; 33 text-align:center; 34 } 35 36 .top li a { 37 font-family:"微软雅黑"; 38 font-size:18px; 39 padding:10px 19px 12px 19px; 40 color:#B81D18; 41 } 42 43 .top li a:link,.top li a:visited { 44 text-decoration:none; 45 } 46 47 .top li a:hover, .top li a:active { 48 text-decoration:none; 49 color:#ffffff; 50 background-color:#B81D18; 51 } 52 53 .ac { 54 background-color:#B81D18; 55 } 56 57 .top li span { 58 color:#ffffff; 59 } 60 </style> 61 </head> 62 <body> 63 <div class ="wrap"> 64 <div class ="top"> 65 <ul> 66 <li><a href ="#" class ="ac"><span>短文学网</span></a></li> 67 <li><a href ="#">伤感文章</a></li> 68 <li><a href ="#">情感日志</a></li> 69 <li><a href ="#">心情日记</a></li> 70 <li><a href ="#">散文精选</a></li> 71 <li><a href ="#">诗歌大全</a></li> 72 <li><a href ="#">经典语句</a></li> 73 <li><a href ="#">好文章</a></li> 74 <li><a href ="#">投稿网址</a></li> 75 </ul> 76 </div> 77 </div> 78 </body> 79 </html>