一个before伪类的超有用应用
就是在水平菜单的选择项中间加上一竖线当作分隔符。
<!doctype html> <html dir= "ltr" lang= "zh-CN" > <head> <meta charset= "utf-8" /> <meta http-equiv= "X-UA-Compatible" content= "IE=Edge" > <title>菜单</title> <style type= "text/css" title= "default" media= "screen" > ul { padding : 0 ; margin : 0 ; font : 0.9em Verdana ; } li { display : inline ; color : green ; } li~li:before { content : "|" ; padding-right : 5px ; color : red ; } li a{ display : block ; text-decoration : none ; background : #CC99CC ;} li a{ display : inline ;} </style> </head> <body> <ul> <li>menu 1 </li> <li><a href= "http://www.cnblogs.com/rubylouvre/" >menu 2 </a></li> <li>menu 3 </li> <li>menu 4 </li> </ul> </body> </html> |
或利用相邻选择符加after伪类。
或利用相邻选择符加after伪类。
由于IE6不支持,我们可以利用负margin技术变通一下,但还是要多添加一个类……
<!doctype html> <html dir= "ltr" lang= "zh-CN" > <head> <meta charset= "utf-8" /> <meta http-equiv= "X-UA-Compatible" content= "IE=Edge" > <title>菜单</title> <style type= "text/css" title= "default" media= "screen" > ul { padding : 0 ; margin : 0 ; font : 0.9em Verdana ; } li { display : inline ; color : green ; padding : 0 5px ; border-right : 1px solid red ; margin-left : -1px ;} li a{ display : block ; text-decoration : none ; background : #CC99CC ;} li a{ display : inline ;} li.last { border-width : 0 ;} </style> </head> <body> <ul> <li>menu 1 </li> <li><a href= "http://www.cnblogs.com/rubylouvre/" >menu 2 </a></li> <li>menu 3 </li> <li class= "last" >menu 4 </li> </ul> </body> </html> |
如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码


机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义