before伪类的超有用应用技巧——水平菜单竖线分隔符
生活随笔
收集整理的這篇文章主要介紹了
before伪类的超有用应用技巧——水平菜单竖线分隔符
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方法一、li前面加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>menu1</li><li><a href="http://www.cnblogs.com/rubylouvre/">menu2</a></li><li>menu3</li><li>menu4</li></ul></body> </html>二、或利用相鄰選擇符加after偽類
<!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>menu1</li><li><a href="http://www.cnblogs.com/rubylouvre/">menu2</a></li><li>menu3</li><li>menu4</li></ul></body> </html>三、或利用相鄰選擇符加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>menu1</li><li><a href="http://www.cnblogs.com/rubylouvre/">menu2</a></li><li>menu3</li><li class="last">menu4</li></ul></body> </html>轉載自：http://www.cnblogs.com/rubylouvre/archive/2009/07/28/1532757.html
轉載于:https://www.cnblogs.com/JoannaQ/p/3161942.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的before伪类的超有用应用技巧——水平菜单竖线分隔符的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c++中利用sizeof运算符计算结构体
- 下一篇： 驱动中使用GUID