本篇文章介绍了使用 CSS 样式给导航条做竖线的方法, 具有一定的参考价值, 感兴趣的同学可以看看.
两种方法
1, 带竖线的字, 在每个导航标记后面加入 '|'这个就是竖线 (shift + 回车上方的按键)
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- ul{ display: flex; justify-content: center; list-style: none; padding:
- 0; margin: 0; } li{ padding: 4px; } li i{ color: red; font-style: normal;
- }
- </style>
- </head>
- <body>
- <ul>
- <li>
- 导航 1
- <i>
- |
- </i>
- </li>
- <li>
- 导航 2
- <i>
- |
- </i>
- </li>
- <li>
- 导航 3
- </li>
- </ul>
- </body>
- </HTML>
效果:
(推荐学习: CSS 视频教程 https://www.html.cn/css/ )
2, 直接用边框
单个导航的样式加上: border-right:1px solid red;
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- ul{ display: flex; justify-content: center; list-style: none; padding:
- 0; margin: 0; } li{ padding: 4px; border-right: 1px solid red; } li:last-child{
- border: none; }
- </style>
- </head>
- <body>
- <ul>
- <li>
- 导航 1
- </li>
- <li>
- 导航 2
- </li>
- <li>
- 导航 3
- </li>
- </ul>
- </body>
- </HTML>
效果:
来源: http://www.css88.com/qa/css3/15536.html