Ul li vertical menu_html/css_WEB-ITnose-HTML Tutorial-php.cn

Ul li vertical menu_html/css_WEB-ITnose
WBOY
Release： 2016-06-24 11:55:45
Original
1710 people have browsed it
  1 <strong>Ul li 竖排 </strong>  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
Copy after login