使用 CSS 布局横向导航栏, CSS 应用给网页样式的方式, 就相当于给人怎么去穿上衣服, 不同的衣服有不同的穿法, 这里我们使用的是内联式.
1, 首先创建一个 ul 标签, 并添加若干 li 标签, 在 li 标签内写上 a 标签进行页面链接;
2, 然后设置 ul 的 list-style 为 none 将项目列表前原点去除;
3, 最后设置 li 标签 float 为 left 排列在一行显示即可.
(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- 如何使用 CSS 布局横向导航栏
- </title>
- <style type="text/css">
- body { margin:0px;padding:0px; } ul { list-style:none;/* 去除项列表前面的圆点 */
- } ul li { float:left;/** 使列表项不再遵循默认的自上而下样式, 使之变成横向列表 */ } /** 这时候的列表虽然是横着的,
- 却是一个整的像一块大饼, 所以我们要想到块状思想. 使用 display:block, 将其分割 */ ul li a { display:
- block; /* 切割完毕, 变成块状, 这下我们就可以实现内外边距, 边框背景等属性 */ width: 120px; /* 宽度设置 */
- padding-top: 10px; /* 上内边距, 通俗点讲就是导航栏离顶部的距离 */ padding-left: 10px; /* 同上
- */ padding-right: 10px; /* 同上 */ text-align: center; /* 文本居中显示 */ font-size:
- 20px; /* 设置字体的大小 */ color: red; /* 设置字体的颜色 */ text-decoration: none; /*
- 下划线设置 */ } /* 锚伪类还有 link visited hover active 分别为未访问, 已访问, 鼠标移动链接上, 选定的连接,
- 这里我只写了移动到连接的例子 */ ul li a:hover{ color:blue; /* 伪类: 指向链接时的字体颜色 */ background-color:#8DC7DD;
- /* 伪类: 指向链接时的背景色 */ text-decoration:underline; /* 伪类: 指向链接时的字体装饰 */ font-weight:bold;
- /* 伪类: 指向连接时的字体粗细 */ }
- </style>
- </head>
- <body>
- <div id="nav">
- <ul>
- <li>
- <a href="#">
- 首页
- </a>
- </li>
- <li>
- <a href="#">
- 心路
- </a>
- </li>
- <li>
- <a href="#">
- 历程
- </a>
- </li>
- <li>
- <a href="#">
- 设计
- </a>
- </li>
- <li>
- <a href="#">
- 代码
- </a>
- </li>
- <li>
- <a href="#">
- 优化
- </a>
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果:
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14623.html