zoukankan      html  css  js  c++  java
  • 一个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伪类。

    或利用相邻选择符加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-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>
    

  • 相关阅读:
    代码重构技术方法
    《算法导论》为什么经典
    BeagleBone Black教训四局:简单LED对照实验
    linux(Ubuntu)安装QQ2013
    ubuntu卸载qq2012
    android弧形进度条,有详细注释的,比较简单
    Android自定义进度条
    AndroidのUI设计研究(一)——自定义ProgressBar
    介绍几个工作开发中封装的好用的android自定义控件
    android自定义viewgroup之我也玩瀑布流
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1532757.html
Copyright © 2011-2022 走看看