1 Ul li 竖排 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>CSS练习</title> 8 9 <style type="text/css"> 10 <style type="text/css"> 11 /*--------------------------公共样式------------------*/ 12 .com-left 13 { 14 float: left; 15 } 16 /*公用分割线 宽度自行指定*/ 17 .com_divhr_solid 18 { 19 margin: 10px; 20 height: 1px; 21 border-top: 1px solid #D2CFCA; 22 margin-top: 0px; 23 } 24 /*公用分割线虚线 宽度自行指定*/ 25 .com_div_dashedhr 26 { 27 margin: 10px; 28 height: 1px; 29 border-top: 1px dashed #D2CFCA; 30 margin-top: 0px; 31 } 32 33 .align-center 34 { 35 margin: 0 auto; /* 居中 这个是必须的，，其它的属性非必须 */ 36 width: 1024px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */ 37 margin-top: 70px; 38 margin-bottom: 10px; /*text-align:center; 文字等内容居中 */ 39 } 40 .nav 41 { 42 width: 180px; /* 控制导航总宽度 */ 43 } 44 /* 取消列表样式，内外补间为零 */ 45 .nav ul 46 { 47 list-style: none; 48 margin: 0; 49 padding: 0; 50 } 51 /* 竖排：控制导航高度*/ 52 .nav li 53 { 54 height: 35px; 55 line-height: 35px; /* 文字垂直居中 指定行高为li高度 自动垂直居中 */ 56 } 57 /* 鼠标放上效果 */ 58 59 .nav a:hover 60 { 61 background-color: #007ACC; 62 color: #FFFFFF; 63 cursor: hand; 64 } 65 66 67 /* 将a标签区块化就可以指定高度 */ 68 .nav a 69 { 70 display: block; 71 height: 100%; 72 text-decoration: none; /* 取消a标签下划线 */ 73 background-color: #fff; 74 color: #000; 75 text-align: left; /* 文字水平居中显示 */ 76 } 77 .nav a span 78 { 79 text-align: left; /* 文字水平居中显示 */ 80 margin-left: 20px; 81 font-size: 14px; 82 font-family: '微软雅黑'; 83 } 84 /*-点击后选中-*/ 85 li.current a 86 { 87 background-color: #007ACC; 88 color: #FFFFFF; 89 cursor: hand; 90 } 91 </style> 92 </head> 93 94 <script type="text/javascript"> 96 $(function () { 98 $("#ulMenu> li").click(function () { 100 $("#ulMenu> li.current").attr("class", "") 102 $(this).attr("class", "current") 104 /*-设置要显示的DIV链接-*/ 106 // $("div[name='" + div.attr('id') + "']").show(); 108 }); 110 }); 112 </script> 113 114 <body> 115 <div class="align-center"> 117 <div class="nav"> 119 <ul id="ulMenu"> 121 <li class="current"><a href="#"><span>导航1</span></a></li> 123 <li><a href="#"><span>导航2</span></a></li> 125 <li><a href="#"><span>导航3</span></a></li> 127 <li><a href="#"><span>导航4</span></a></li> 129 <li><a href="#"><span>导航5</span></a></li> 131 <li><a href="#"><span>导航6</span></a></li> 133 <li><a href="#"><span>导航7</span></a></li> 135 <li><a href="#"><span>导航8</span></a></li> 137 <li><a href="#"><span>导航9</span></a></li> 141 </ul> 143 </div> 145 <div> 147 </div> 149 </div> 150 </body> 151 </html> 152 153