suchen

Heim >Web-Frontend >HTML-Tutorial >Ul li 竖排 菜单_html/css_WEB-ITnose

Ul li 竖排 菜单_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:55:451739Durchsuche

  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

 

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：求大神帮忙找下不同浏览器css兼容性问题，附网址，代码，在线等_html/css_WEB-ITnoseNächster Artikel：iframe中包含页面中的联动菜单不显示数据？_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen