CSS菜单栏制作教程
程序员文章站
2024-01-25 16:22:04
1纵向菜单:
html:
1纵向菜单:
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>布局</title> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body> <nav class="list"><!--导航栏--> <ul> <li><a href='#'>链接1</a></li> <li><a href='#'>链接2</a></li> <li><a href='#'>链接3</a></li> <li><a href='#'>链接4</a></li> <li><a href='#'>链接5</a></li> <li><a href='#'>链接6</a></li> <li><a href='#'>链接7</a></li> </ul> </nav> </body> </html>
css:
*{ margin: 0 ; padding: 0; } nav{ width: 150px; margin: 10px; background: #ccc; } .list ul{ border: 1px solid #f00; } .list ul li{ list-style-type: none; /*去掉圆点*/ } .list li + li a{ /*非首位子元素*/ border-top:1px solid blue; } .list ul li a{ text-align: center; text-decoration: none; /*background: #ffed53;*/ color: #000; display: block; padding: 3px 10px; } .list ul li a:hover{ color: red; background: #666; cursor: pointer; /*手型*/ }
图示:
方法:
1) 添加一个普通列表;将padding和margin设为0。
2)设置css : 属性一定要对应。尽量不要设置a元素的背景颜色和padding。
2 横向菜单:
html:同上。
css:
*{ margin: 0 ; padding: 0; } nav{ text-align: center; /*margin:0px auto; /*没有宽度不能居中*/ } ul{ display: inline-block;/*ul设为内联元素便于居中*/ } .list ul li{ float: left; list-style-type: none; /*去掉圆点*/ } .list ul li + li{ border-left: 1px solid #333; } .list ul li a{ background: #999; text-align: center; text-decoration: none; color: #000; display: block; padding: 3px 10px; } .list ul li a:hover{ color: red; background: #333; cursor: pointer; }
图示:
PS:由于导航条没有设置宽,不能有 margin:0 auto;的方法。
所以使用 nav{text-align: center; } ul{display: inline-block; }。