首页 > 代码库 > Ul li 横排 菜单
Ul li 横排 菜单
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>CSS练习</title> 6 <style type="text/css"> 7 #nav{ 8 width:400px;·/* 控制导航总宽度 */ 9 }10 11 /* 取消列表样式，内外补间为零 */12 #nav ul{13 list-style:none;14 margin:0;15 padding:0;16 }17 18 /* 横排：控制导航高度 ，使用float 指定每个li的宽度和高度 */19 #nav li{20 float:left;21 width:100px;22 height:30px;23 line-height:30px; /* 文字垂直居中 指定行高为li高度 自动垂直居中 */ 24 }25 26 /* 将a标签区块化就可以指定高度 */27 #nav a{28 display:block;29 height:100%;30 text-decoration:none; /* 取消a标签下划线 */31 text-align:center; /* 文字水平居中显示 */32 background-color:#000;33 color:#fff;34 }35 36 /* 鼠标放上效果 */37 #nav a:hover{38 background-color:#eee;39 color:#000;40 }41 </style>42 </head>43 44 <body> 45 <div id="nav">46 <ul>47 <li><a href="#">首页</a></li>48 <li><a href="#">个人介绍</a></li>49 <li><a href="#">作品展示</a></li>50 <li><a href="#">联系我们</a></li>51 </ul>52 </div> 53 </body>54 </html>
Ul li 横排 菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。