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; }
来源: https://www.2cto.com/kf/201802/721509.html