制作水平导航栏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了制作水平导航栏相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <title>制作水平导航栏</title> 9 <style type="text/css"> 10 ul{ 11 list-style-type:none;/*无下划线*/ 12 13 } 14 a{ 15 display: block;/*记得把a标签设置成block块元素*/ 16 height:30px; 17 line-height:30px;/*文字正中间*/ 18 width: 100px; 19 float:left; 20 text-align:center; 21 /*text-indent: 5px;如果不想让文字居中，可以选着缩进*/ 22 } 23 ul a:link, ul a:visited { 24 font-size: 16px; 25 color: black; 26 text-decoration: none;/*超链接无下划线*/ 27 28 } 29 ul a:hover, ul a:active { 30 font-size: 16px; 31 background-color: #be3948; 32 text-decoration: none; 33 } 34 35 </style> 36 </head> 37 38 <body> 39 <h3>课程难度</h3> 40 <ul> 41 <li><a href="#">全部</a></li> 42 <li><a href="#">初中</a></li> 43 <li><a href="#">中级</a></li> 44 <li><a href="#">高级</a></li> 45 </ul> 46 </body> 47 </html>
以上是关于制作水平导航栏的主要内容，如果未能解决你的问题，请参考以下文章