怎么用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视频教程)
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>
效果:
更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!
以上就是怎么用css样式为网页做竖杠?的详细内容,更多请关注易知道|edz.cc其它相关文章!