before伪类的超有用应用技巧——水平菜单竖线分隔符

最新推荐文章于 2024-05-07 14:54:05 发布

weixin_33904756

最新推荐文章于 2024-05-07 14:54:05 发布

阅读量749

点赞数

方法一、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

weixin_33904756

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
before伪类的超有用应用技巧——水平菜单竖线分隔符

方法一、li前面加before伪类&lt;!doctype html&gt;&lt;html dir="ltr" lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;meta http-equiv="X-UA-Compatible&qu
复制链接

扫一扫