• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章导航

                  CSS content

                  2018-8-8 10:11| 作者: admin| 查看: 782| 评论: 0|来自: 蚂蚁部落

                  此属性通常和伪对象选择器一起配合使用。

                  一.插入简单的字符串:

                  content属性可以规定要插入的字符串内容,通常要和伪类选择器一起使用。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div{
                    width:250px;
                    height:100px;
                    text-align:center;
                  }
                  div::after{
                    content:"softwhy.com";
                  }
                  </style>
                  </head>
                  <body>
                  <div>本站url地址是:</div>
                  </body>
                  </html>

                  content后面可以设定要插入的字符串内容,需要用引号进行包裹。

                  如果要插入引号之类的字符,可以使用类似于编程代码中的转义字符来实现。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div{
                    width:250px;
                    height:100px;
                    text-align:center;
                  }
                  div::after{
                    content:"\"softwhy.com\"";
                  }
                  </style>
                  </head>
                  <body>
                  <div>本站url地址是:</div>
                  </body>
                  </html>

                  上面的代码可以在div的后部追加一个带有双引号的字符串。当然?#37096;?#20197;使用下面将要介绍的方式。

                  二.open-quote和close-quote作为属性值:

                  如果对open-quote和close-quote不够了解可以参阅CSS3 quotes 属性一章节。

                  open-quote和close-quote分别表示嵌套的开始标记和结束标记。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div{quotes:"(" ")" }
                  div::before{
                    content: open-quote;
                  }
                  div::after{
                    content:close-quote;
                  }
                  </style>
                  </head>
                  <body>
                  <div>本站的url地址是softwhy.com</div>
                  </body>
                  </html>

                  字符串最终会被小括号包裹,当然开始标记和结束标记可以根据需要随意设置的。

                  三.插入图片:

                  使用此属性可以给元素插入图片:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div::before{
                    content:url(template/comiis_x3dfmh/comiis_pic/logo.png);
                  }
                  </style>
                  </head>
                  <body>
                  <div>本站的url地址是softwhy.com</div>
                  </body>
                  </html>

                  上面的代码可以在div的前面添加一个图片,使用url来规定图片的地址。

                  四.插入元素的属性值:

                  可以从元素中获取属性,然后再插入到元素中,代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  div::after{
                    content:attr(url);
                  }
                  </style>
                  </head>
                  <body>
                  <div url="softwhy.com">本站的url地址是</div>
                  </body>
                  </html>

                  上面的代码可以获取div自定义的url属性值,然后插入到div元素的尾部。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            安徽十一选五近期走势图 福建快三和值 围棋界张秉伦 彩票中奖后 斗地主单机 海南飞鱼彩票走势图 贵州快3今日开奖结果查询 3肖中特期待中准 2019平特一肖公式规律) 体彩14场胜负玩法介绍 体彩p5今日开奖号码 快乐十分胆拖计算器 河北快三种奖细则 256手机彩票软件怎么样 快乐赛车一期计划