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
时间： 2024-10-13 20:19:20