zoukankan      html  css  js  c++  java
  • css content

    before after

    demo

    1 添加描述信息

    div1:after{conent:"天假额外的文字"}

    2 也可以显示元素的某些属性

    <a class="div1" href="http://www.baidu.com"></a>
    
    div1:after{ content:attr(href)}

    注意:当使用attr()获取标签属性名的时候,千万不要添加引号!

    3 使用计数器创建号码内容

    ol {
       list-style-type:none;        
       counter-reset:sectioncounter;
    }                      
    
    ol li:before {
       content:"计数" counter(sectioncounter) ": "; 
       counter-increment:sectioncounter;
    }

    4 为多语言内容插入正确的引号

    不同的语言使用不同的引号字符。比如英文的引号就是"",而中文引号就是“”。使用content可以使得不同的语言使用对应的一些字符。例如,我们需要对下面的些文字添加其对应语言的引号,该怎么办呢?

    <p lang="en"><q>It’s only work if somebody makes you do it.</q></p>
    <p lang="no"><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>
    <p lang="ch"><q>欢迎来到上海,欢迎参观世博会!</q></p>

    我们不妨试试下面的代码:

    /* 为不同语言指定引号的表现 */
    :lang(en) > q {quotes:'"' '"';}
    :lang(no) > q {quotes:"«" "»";}
    :lang(ch) > q {quotes:"“" "”";}
    /* 在q标签的前后插入引号 */
    q:before {content:open-quote;}
    q:after  {content:close-quote;}

    五、用图片替换文字

    您可以参见下面的代码:

    div.logo {
       content:url(logo.png);
    }

    这种图片替换技术的优点在于文字内容确实被替换了。因此,您没有必要设定高宽为图片的显示创造空间,或是使用text-indent或是padding隐藏最初的文字。

    然而,就目前而言,还是有不少需要注意的:
    1. 你不能对图片进行重复或平铺,或是使用image sprite。
    2. 目前仅在Opera 9.5+ 和 Safari 4+浏览器下起作用,因为这些浏览器支持所有元素的content方法,而不仅仅局限于:after或是:before。
    替换的图片无法应用alt属性,所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。

    摘自:http://www.zhangxinxu.com/wordpress/2010/04/css-content%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E4%BB%A5%E5%8F%8A%E5%BA%94%E7%94%A8/



  • 相关阅读:
    既可以支持整数四则运算,也可以支持分数四则运算,可定制出题数量的c语言程序
    NABCD需求分析
    求一维循环数组的最大子数组和(二人结对编程)
    返回一个二维整数数组中最大子数组的和(二人结对)
    返回一个整数数组中最大子数组的和。(二人结对编程)
    二柱子2.0编程总结
    随机生成30道小学二年级四则远算题目2.0
    随机生成30道小学二年级四则远算题目
    搜狗输入法的使用感受与评价
    第一次站立会议
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6432832.html
Copyright © 2011-2022 走看看