CSScontent的使用機(jī)制介紹

本篇內(nèi)容介紹了“CSS content的使用機(jī)制介紹”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是一家專業(yè)提供永順企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為永順眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

content 屬性用于與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容。使用 content 屬性插入的內(nèi)容都是匿名的可替換元素。首先我們先了解下什么是可替換元素呢？

替換元素

首先看下圖片加載：

修改了 img 的 src 屬性，導(dǎo)致顯示的圖片發(fā)生了變化。這種通過修改某個屬性值呈現(xiàn)的內(nèi)容就可以被替換的元素就稱為“替換元素”。

典型的替換元素：、、</code>、<code><textarea></code> 和 <code><input></code>。</p><p><strong>替換元素的尺寸計算規(guī)則</strong></p><p>替換元素的尺寸計算規(guī)則有三種尺寸：</p><ul><li><p>固有尺寸：替換內(nèi)容原本的尺寸</p></li><li><p>HTML 尺寸：HTML 原生屬性 width 和 height</p></li><li><p>CSS 尺寸：通過 CSS 設(shè)置的寬高屬性</p></li></ul><p>下面我們以 img 為例：</p><pre><img src="../assets/test1.jpeg"> <img width="300" height="200" class="img-test" src="../assets/test1.jpeg"> <img class="img-box" width="300" height="200" src="../assets/test1.jpeg"> .img-box {   height: 100px;   width: 200px; }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2341.jpg" alt="CSS content的使用機(jī)制介紹"></p><ul><li><p>第一張圖：默認(rèn)顯示原圖尺寸 267 * 200；</p></li><li><p>第二張圖：設(shè)置了 HTML 尺寸 width 和 height，顯示圖片 300 * 200；</p></li><li><p>第三張圖：設(shè)置了 CSS 尺寸 200 * 100。</p></li></ul><p>由此可見尺寸顯示規(guī)則優(yōu)先級為 CSS 尺寸 > HTML 尺寸 > 固有尺寸。</p><p><strong>替換元素和 content 是什么關(guān)系呢？</strong></p><p>替換元素之所以為替換元素，就是因為其內(nèi)容可替換，即盒模型中的 content box 可替換。CSS 的 content 屬性就用于替換內(nèi)容，也可以說，content 屬性決定了是替換元素還是非替換元素。代碼如下：</p><pre><img width="300" height="200" class="img-test" src="../assets/test1.jpeg"> .img-test:hover {  content: url('../assets/test2.jpg'); }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2342.jpg" alt="CSS content的使用機(jī)制介紹"></p><p>此時鼠標(biāo)懸浮的時候圖片為 ’../assets/test2.jpg‘，使用 content 屬性替換了 img 的 content box。</p><p>需要注意的是 content 屬性改變的僅僅是視覺呈現(xiàn)，當(dāng)我們以右鍵或其他形式保存這張圖片的時候，所保存的還是原來 src 對應(yīng)的圖片。</p><h3 data-id="heading-4"><strong>content 的使用場景</strong></h3><p>content 的定義中就提到過是和 :before 及 :after 偽元素配合使用。:before 及 :after 是最常見的偽元素，想必大家都不陌生。</p><p>再簡單介紹下 :before 和 :after：</p><ul><li><p>默認(rèn) display: inline；</p></li><li><p>必須設(shè)置 content 屬性，否則無效；</p></li><li><p>默認(rèn) user-select: none，即 :before 和 :after 的內(nèi)容無法被用戶選中；</p></li><li><p>不可通過 dom 使用，就是本身不存在的頁面元素，HTML 源代碼里，找不到它們，但從視覺上，卻能看到它們的存在。</p></li></ul><p>下面我們看一下主要使用場景：</p><p><strong>插入字符</strong></p><p>使用 content 插入字符一般是給空元素設(shè)置默認(rèn)值，類似 input 的 placeholder 屬性一樣，只在元素沒有內(nèi)容的時候展示，代碼如下：</p><pre><p>有內(nèi)容的段落</p> <p></p>  p:empty::before {   content: '空元素內(nèi)容';   color: red; }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2343.jpg" alt="CSS content的使用機(jī)制介紹"></p><p><strong>輔助元素生成</strong></p><p>此時核心點不在于 content 生成的內(nèi)容，而是偽元素本身。通常我們會把 content 的屬性值設(shè)置為空字符串，使用其他 CSS 代碼來生成輔助元素，或?qū)崿F(xiàn)圖形效果，或?qū)崿F(xiàn)特定布局。</p><p><strong>圖形效果</strong></p><p>使用 ::after 偽元素插入匿名替換元素，設(shè)置 content 為空，此元素沒有內(nèi)容，通過 CSS 樣式來達(dá)到想要的圖形效果。代碼如下：</p><pre><div class="content-box"></div> .content-box {   height: 100px;   width: 200px;   border-radius: 10px;   position: relative;   background: #fff; } .content-box::after {   content: '';   position: absolute;   top: 100%;   right: 16px;   width: 4px;   height: 16px;   border-width: 0;   border-right: 12px solid #fff;   border-radius: 0 0 32px 0; }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2344.jpg" alt="CSS content的使用機(jī)制介紹"></p><p><strong>清除浮動</strong></p><p>清除浮動主要是為了解決，父元素因為子級元素浮動引起的內(nèi)部高度為 0 的問題，代碼如下：</p><pre><div class="info-box clear">   <div class="left">左</div>   <div class="right">右</div> </div> .clear::after {  content: '';  display: block;  clear: both; }</pre><p>上面三者缺一不可：</p><ul><li><p>content: ''：通過 ::after 給元素添加一個空的偽元素。</p></li><li><p>clear: both：清除浮動，使得元素周圍兩邊都不浮動。</p></li><li><p>display: block：clear 只對塊級元素生效。</p></li></ul><p>通過添加元素清除浮動，觸動 BFC，使元素的高能夠自適應(yīng)子盒子的高。</p><p><strong>圖片生成</strong></p><p>直接用 url 功能符顯示圖片，既可以在文字前后添加圖片，又可以直接替換文字。</p><p>圖片直接替換文字，代碼如下：</p><pre><p class="img-test">文字</p> .img-test {   display: block;   height: 20px;   width: 20px;   border-radius: 100%;   content: url('../assets/test2.jpg'); }</pre><p>文字前后添加圖片，代碼如下：</p><pre> .img-test::after {   content: url('../assets/test2.jpg'); }  .img-test::after {   content: '';   display: block;   height: 20px;   width: 20px;   background: url('../assets/test2.jpg'); }</pre><p>方案一中偽元素通過 content 設(shè)置圖片，圖片的尺寸不好控制，顯示圖片為原尺寸，比較模糊，一般使用方案二背景圖片的方式，可以按需設(shè)置尺寸。</p><p><strong>attr 屬性值內(nèi)容生成</strong></p><p>使用 attr 獲取元素屬性值達(dá)到效果，一般用于獲取 a 標(biāo)簽的連接，代碼如下：</p><pre><a class="baidu-link" > 百度一下，你就知道!</a> .baidu-link::after {   content: " (" attr(href) ") " }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2345.jpg" alt="CSS content的使用機(jī)制介紹"></p><p><strong>字符內(nèi)容生成</strong></p><p>content 字符內(nèi)容生成就是直接寫入字符內(nèi)容，中英文都可以，比較常見的應(yīng)用就是配合 @font-face 規(guī)則實現(xiàn)圖標(biāo)字體效果。</p><p><strong>@font-face 規(guī)則</strong></p><p>@font-face 規(guī)則指定一個用于顯示文本的自定義字體；字體能從遠(yuǎn)程<a title="服務(wù)器" target="_blank" >服務(wù)器</a>或者用戶本地安裝的字體加載。它的屬性和字體相似，如下：</p><table><thead><trl><th>字體描述符</th><th>描述</th></tr></thead><tbody><tr><td>font-family</td><td>必需：所指定的字體名字將會被用于 font 或 font-family 屬性</td></tr><tr><td>src</td><td>必需：遠(yuǎn)程字體文件位置的 url 或者用戶計算機(jī)上的字體名稱</td></tr><tr><td>font-style</td><td>對于 src 所指字體的樣式</td></tr><tr><td>font-weight</td><td>字體粗細(xì)</td></tr><tr><td>font-stretch</td><td>定義應(yīng)如何拉伸字體</td></tr><tr><td>unicode-range</td><td>該字體支持 Unicode 字符的范圍</td></tr></tbody></table><p>使用 @font-face 規(guī)則的代碼如下：</p><pre> @font-face {font-family: "iconfont";   src: url('iconfont.eot'); /* IE9*/   src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */   url('iconfont.woff') format('woff'), /* chrome, firefox */   url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ }  <div class="look-more">查看更多</div>  .look-more {   font-size: 14px;   &::after {     font-size: 14px;     font-family: 'iconfont';     content: '\e6a7';   } }</pre><p>效果如下：</p><p><img src="/upload/otherpic54/2346.jpg" alt="CSS content的使用機(jī)制介紹"></p><p>如上圖，“查看更多”后面的箭頭就是上面定義的字體圖標(biāo)。</p><p>當(dāng)然 @font-face 也有不可避免的兼容性問題，可根據(jù)需要使用此規(guī)則，支持度如下圖：</p><p><img src="/upload/otherpic54/2347.jpg" alt="CSS content的使用機(jī)制介紹"></p><p><strong>計數(shù)器</strong></p><p>content 的計數(shù)器是使用 CSS 代碼實現(xiàn)隨著元素數(shù)目增多，數(shù)值也跟著變大的效果。功能非常強(qiáng)大、實用，且不具有可替代性。</p><p>計數(shù)器包含兩個屬性和一個方法：</p><p>1、counter-reset：“計數(shù)器-重置”的意思，主要作用就是給計數(shù)器起個名字。也告訴從哪個數(shù)字開始計數(shù)，默認(rèn)值是 0，值可以為負(fù)數(shù)。</p><pre> .count-test { counter-reset: counter; }  .count-test { counter-reset: counter 2; }  .count-test { counter-reset: counter 2 counterpre -1; }</pre><p>2、counterincrement：“計數(shù)器遞增”的意思，值為 counter-reset 的 1 個或多個關(guān)鍵字，后面可以跟隨數(shù)字，表示每次計數(shù)的變化值，默認(rèn)變化值為 1，值可以為負(fù)數(shù)。</p><pre> counter-increment: counter;  counter-increment: counter 2;  counter-increment: counter 2 counterpre -1;</pre><p>“普照規(guī)則”：普照源（counter-reset）唯一，每普照（counter-increment）一次，普照源增加一次計數(shù)值。</p><pre><p class="counter"></p>  .counter {  counter-reset: counter 2;  counter-increment: counter; } .counter:before {  content: counter(counter); }  .counter {  counter-reset: counter 2; } .counter:before {  counter-increment: counter;  content: counter(counter); }  .counter {  counter-reset: counter 2;  counter-increment: counter; } .counter:before {  counter-increment: counter;  content: counter(counter); }</pre><p>3、counter()/counters()：都是計數(shù)方法，顯示計數(shù)，counters 用于嵌套計數(shù)。</p><pre> counter(name)  counter(name, style)  counters(name, string) counters(name, string, style)</pre><p>一般用于類似目錄以及規(guī)律變化的計數(shù)，下面以層級目錄為例，代碼如下：</p><pre><div class="reset">     <div class="counter">替換元素         <div class="reset">             <div class="counter">替換元素的尺寸計算規(guī)則</div>             <div class="counter">替換元素和 content 是什么關(guān)系呢？</div>         </div>     </div>     <div class="counter">content 的使用場景         <div class="reset">             <div class="counter">插入字符</div>             <div class="counter">輔助元素生成</div>             <div class="counter">圖片生成</div>             <div class="counter">attr 屬性值內(nèi)容生成</div>             <div class="counter">字符內(nèi)容生成</div>             <div class="counter">計數(shù)器</div>         </div>     </div> </div> .reset {   counter-reset: counter; } .counter:before {   content: counters(counter, '.') '. ';   counter-increment: counter; }</pre><ul><li><p>counter 默認(rèn)值為 0，默認(rèn)遞增為  1；</p></li><li><p>第一個 reset 下面有兩個兄弟 conter 標(biāo)簽，遞增則為 1 和 2;</p></li><li><p>第一個 counter 下面有 reset 標(biāo)簽，嵌套了一層重置計數(shù)，則有 1.1、1.2 等；</p></li><li><p>同理第二個 counter 下面有 2.1、2.2 等。</p></li></ul><p>效果如下：</p><p><img src="/upload/otherpic54/2348.jpg" alt="CSS content的使用機(jī)制介紹"></p><h3 data-id="heading-14"><strong>總結(jié)</strong></h3><p>了解 CSS 的 content 屬性，布局有了更多的可能性，有助于日常開發(fā)中根據(jù)需要使用一些布局小技巧，使布局簡潔明了。</p><p>“CSS content的使用機(jī)制介紹”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！</p> <br> 當(dāng)前標(biāo)題：CSScontent的使用機(jī)制介紹 <br> 分享網(wǎng)址：<a href="http://weahome.cn/article/gipdeg.html">http://weahome.cn/article/gipdeg.html</a> </div> </div> </div> <div id="squ6kqw" class="other container"> <h3>其他資訊</h3> <ul> <li> <a href="/article/pihssj.html">好程序員大數(shù)據(jù)學(xué)習(xí)路線分享Scala系列之泛型</a> </li><li> <a href="/article/pihche.html">linux磁盤不足異常怎么解決</a> </li><li> <a href="/article/pihssd.html">php怎么將字符串轉(zhuǎn)utf8格式</a> </li><li> <a href="/article/pihseo.html">bootstrap分頁的實現(xiàn)方法介紹</a> </li><li> <a href="/article/pihssg.html">MySQL怎么復(fù)制表</a> </li> </ul> </div> <div id="squ6kqw" class="footer"> <div id="squ6kqw" class="foota container"> <div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站制作</h3> <a target="_blank">成都網(wǎng)站制作</a><a target="_blank">溫江網(wǎng)站制作</a><a target="_blank">成都網(wǎng)站制作</a><a target="_blank">手機(jī)網(wǎng)站制作</a><a target="_blank">網(wǎng)站制作</a><a target="_blank">H5網(wǎng)站制作</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企業(yè)服務(wù)</h3> <a target="_blank">藥房許可證</a><a target="_blank">ssl證書</a><a target="_blank">軟文發(fā)布平臺</a><a target="_blank">免費網(wǎng)站建設(shè)</a><a target="_blank">免費建站模板</a><a target="_blank">成都網(wǎng)站維護(hù)</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站建設(shè)</h3> <a target="_blank">成都網(wǎng)站建設(shè)</a><a target="_blank">物流公司網(wǎng)站建設(shè)方案</a><a target="_blank">營銷型網(wǎng)站建設(shè)</a><a target="_blank">網(wǎng)站建設(shè)公司</a><a target="_blank">江油網(wǎng)站建設(shè)</a><a target="_blank">成都網(wǎng)站建設(shè)公司</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服務(wù)器托管</h3> <a target="_blank">雅安服務(wù)器托管</a><a target="_blank">重慶水土三線托管</a><a target="_blank">重慶服務(wù)器托管</a><a target="_blank">貴陽聯(lián)通機(jī)房</a><a target="_blank">成都光華機(jī)房</a><a target="_blank">重慶電信五里店機(jī)房托管</a> </li> </ul> </div> <div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全國免費咨詢:</p> <b>400-028-6601</b> <p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p> <p>節(jié)假值班：18980820575 / 13518219792</p> <p>聯(lián)系地址：成都市太升南路288號錦天國際A幢1002號</p> </div> </div> <div id="squ6kqw" class="footb"> <div id="squ6kqw" class="copy container"> <div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號</a></div>  </div> </div> <div id="squ6kqw" class="link"> <div id="squ6kqw" class="container"> 友情鏈接:： <a target="_blank">成都網(wǎng)站建設(shè)</a> <a target="_blank">重慶網(wǎng)站建設(shè)</a> <a href="">四川網(wǎng)站建設(shè)</a> <a href="">重慶建設(shè)網(wǎng)站</a> <a target="_blank">移動服務(wù)器托管</a> <a target="_blank">成都服務(wù)器托管</a> <a target="_blank">云服務(wù)器</a> <a target="_blank">廣告設(shè)計制作</a> <a target="_blank">重慶網(wǎng)頁設(shè)計</a> <a target="_blank">重慶做網(wǎng)站</a> <a target="_blank">重慶網(wǎng)站制作</a> <a href="">重慶網(wǎng)站建設(shè)</a> <a href="">重慶網(wǎng)站公司</a> <a href="">渝中網(wǎng)站制作</a> <a href="">重慶網(wǎng)站設(shè)計</a> </div> </div> </div> <div id="squ6kqw" class="foot"> <ul class="public-celan"> <li> <a target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">在線咨詢</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">電話咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">QQ咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">預(yù)約顧問</span> </a> </li> </ul> </div> <div id="squ6kqw" class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在線咨詢</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨詢</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>電話咨詢</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回頂部</p> </a> </dt> </dl> </div> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="gdquo" class="pl_css_ganrao" style="display: none;"><thead id="gdquo"><sup id="gdquo"><ol id="gdquo"></ol></sup></thead><wbr id="gdquo"><small id="gdquo"></small></wbr><menuitem id="gdquo"><ol id="gdquo"></ol></menuitem><noscript id="gdquo"><small id="gdquo"><sup id="gdquo"><ol id="gdquo"></ol></sup></small></noscript><xmp id="gdquo"><bdo id="gdquo"></bdo></xmp><table id="gdquo"></table><dl id="gdquo"><font id="gdquo"><optgroup id="gdquo"><li id="gdquo"></li></optgroup></font></dl><cite id="gdquo"></cite><label id="gdquo"></label><big id="gdquo"></big><optgroup id="gdquo"></optgroup><th id="gdquo"></th><tr id="gdquo"><var id="gdquo"><b id="gdquo"><center id="gdquo"></center></b></var></tr><video id="gdquo"></video><s id="gdquo"></s><style id="gdquo"><kbd id="gdquo"><tbody id="gdquo"><strong id="gdquo"></strong></tbody></kbd></style><cite id="gdquo"><button id="gdquo"><center id="gdquo"></center></button></cite><ol id="gdquo"><abbr id="gdquo"><samp id="gdquo"><legend id="gdquo"></legend></samp></abbr></ol><tt id="gdquo"></tt><mark id="gdquo"></mark><em id="gdquo"></em><sub id="gdquo"></sub><s id="gdquo"><u id="gdquo"></u></s><ol id="gdquo"></ol><label id="gdquo"></label><style id="gdquo"><kbd id="gdquo"><progress id="gdquo"><strong id="gdquo"></strong></progress></kbd></style><cite id="gdquo"><option id="gdquo"></option></cite><listing id="gdquo"><acronym id="gdquo"><wbr id="gdquo"><strong id="gdquo"></strong></wbr></acronym></listing><optgroup id="gdquo"></optgroup><optgroup id="gdquo"><blockquote id="gdquo"></blockquote></optgroup><var id="gdquo"><button id="gdquo"><center id="gdquo"></center></button></var><rp id="gdquo"><form id="gdquo"><input id="gdquo"><tr id="gdquo"></tr></input></form></rp><i id="gdquo"></i><u id="gdquo"><big id="gdquo"><strong id="gdquo"></strong></big></u><pre id="gdquo"><pre id="gdquo"><noscript id="gdquo"><delect id="gdquo"></delect></noscript></pre></pre><center id="gdquo"></center><kbd id="gdquo"></kbd><legend id="gdquo"><abbr id="gdquo"><menuitem id="gdquo"></menuitem></abbr></legend><em id="gdquo"></em><label id="gdquo"></label><video id="gdquo"><tr id="gdquo"><object id="gdquo"></object></tr></video><tr id="gdquo"><menu id="gdquo"><option id="gdquo"></option></menu></tr><noscript id="gdquo"><pre id="gdquo"></pre></noscript><th id="gdquo"></th><abbr id="gdquo"></abbr><style id="gdquo"><kbd id="gdquo"><tbody id="gdquo"><strong id="gdquo"></strong></tbody></kbd></style><sup id="gdquo"><ol id="gdquo"><em id="gdquo"><xmp id="gdquo"></xmp></em></ol></sup><tbody id="gdquo"><nav id="gdquo"><tt id="gdquo"></tt></nav></tbody><span id="gdquo"></span><output id="gdquo"><tr id="gdquo"><var id="gdquo"></var></tr></output><li id="gdquo"><samp id="gdquo"><label id="gdquo"><em id="gdquo"></em></label></samp></li><thead id="gdquo"></thead><em id="gdquo"><strike id="gdquo"><noscript id="gdquo"><center id="gdquo"></center></noscript></strike></em><i id="gdquo"></i><pre id="gdquo"></pre><pre id="gdquo"><table id="gdquo"><b id="gdquo"></b></table></pre><span id="gdquo"></span><em id="gdquo"></em><del id="gdquo"><legend id="gdquo"><small id="gdquo"><center id="gdquo"></center></small></legend></del><tr id="gdquo"></tr><ins id="gdquo"><acronym id="gdquo"></acronym></ins><form id="gdquo"><small id="gdquo"><ul id="gdquo"></ul></small></form><optgroup id="gdquo"><em id="gdquo"><td id="gdquo"></td></em></optgroup><u id="gdquo"></u><dd id="gdquo"></dd><sub id="gdquo"></sub><mark id="gdquo"></mark><option id="gdquo"><pre id="gdquo"><i id="gdquo"><dfn id="gdquo"></dfn></i></pre></option><em id="gdquo"></em><dfn id="gdquo"><button id="gdquo"><td id="gdquo"><bdo id="gdquo"></bdo></td></button></dfn><center id="gdquo"></center><blockquote id="gdquo"></blockquote><center id="gdquo"></center><ins id="gdquo"><legend id="gdquo"><dfn id="gdquo"><thead id="gdquo"></thead></dfn></legend></ins><delect id="gdquo"></delect><bdo id="gdquo"></bdo><big id="gdquo"><strong id="gdquo"><pre id="gdquo"><address id="gdquo"></address></pre></strong></big><ul id="gdquo"></ul><legend id="gdquo"><track id="gdquo"></track></legend><b id="gdquo"><thead id="gdquo"><small id="gdquo"></small></thead></b><kbd id="gdquo"></kbd><rt id="gdquo"><blockquote id="gdquo"><table id="gdquo"></table></blockquote></rt><tt id="gdquo"></tt><center id="gdquo"></center><listing id="gdquo"></listing><tbody id="gdquo"><optgroup id="gdquo"><del id="gdquo"></del></optgroup></tbody><th id="gdquo"><legend id="gdquo"><nav id="gdquo"><th id="gdquo"></th></nav></legend></th><object id="gdquo"></object><dfn id="gdquo"><sup id="gdquo"><option id="gdquo"><dd id="gdquo"></dd></option></sup></dfn><thead id="gdquo"></thead><u id="gdquo"></u><sup id="gdquo"></sup><nobr id="gdquo"><thead id="gdquo"><source id="gdquo"></source></thead></nobr><bdo id="gdquo"></bdo><sup id="gdquo"></sup><th id="gdquo"><bdo id="gdquo"></bdo></th><center id="gdquo"><code id="gdquo"><rp id="gdquo"></rp></code></center><sup id="gdquo"><dfn id="gdquo"><blockquote id="gdquo"></blockquote></dfn></sup><thead id="gdquo"></thead><rt id="gdquo"><noscript id="gdquo"></noscript></rt></div> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //獲取圖片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //絕對路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>