您現在的位置是:電腦技術吧?>? 故障問題 ??>??content屬性什么用,content屬性??>??正文詳情

content屬性什么用,content屬性

桓永福2019-11-25 14:51:28 人圍觀
簡介contentCSS中有四個主要的偽元素:before/after/first-letter/first-line。在prefore/after偽元素選擇器中,有一個contcontent怎么用

CSS中主要的偽元素有四個:before/after/first-letter/first-line,在before/after偽元素選擇器中,有一個content屬性,能夠實現頁面中的內容插入。

插入純文字content:插入的文章,或者content:none不插入內容html:XML/HTML Code復制內容到剪貼板

    h1這是h1/h1 h2這是h2/h2
cssCSS Code復制內容到剪貼板
    h1::after{ content:h1后插入內容 } h2::after{ content:none }
運行結果:https://jsfiddle.net/dwqs/Lmm1r08x/嵌入文字符號可以使用content屬性的open-quote屬性值和close-quote屬性值在字符串兩邊添加諸如括號、單引號、雙引號之類的嵌套文字符號。

open-quote用于添加開始的文字符號,close-quote用于添加結束的文字符號。

修改上述的css:CSS Code復制內容到剪貼板

    h1{ quotes:( ); /*利用元素的quotes屬性指定文字符號*/ } h1::before{ content:open-quote; } h1::after{ content:close-quote; } h2{ quotes: ; /*添加雙引號要轉義*/ } h2::before{ content:open-quote; } h2::after{ content:close-quote; }
運行結果:https://jsfiddle.net/dwqs/p8e3qvv4/插入圖片content屬性也可以直接在元素前/后插入圖片html:XML/HTML Code復制內容到剪貼板
    h3這是h3/h3
css:h3::after{content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)}運行結果:https://jsfiddle.net/dwqs/c6qk6pkv/插入元素的屬性值content屬性可以直接利用attr獲取元素的屬性,將其插入到對應位置。

html:XML/HTML Code復制內容到剪貼板

    a href=http:///www.ido321.com這是鏈接 /a
css:CSS Code復制內容到剪貼板
    a:after{ content:attr(href); }
運行結果:https://jsfiddle.net/dwqs/m220nzan/插入項目編號利用content的counter屬性針對多個項目追加連續編號.html:XML/HTML Code復制內容到剪貼板
    h1大標題/h1 p文字/p h1大標題/h1 p文字/p h1大標題/h1 p文字/p h1大標題/h1 p文字/p
css:CSS Code復制內容到剪貼板
    h1:before{ content:counter(my)'.'; } h1{ countercounter-increment:my; }
運行結果:https://jsfiddle.net/dwqs/2ueLg3uj/項目編號修飾默認插入的項目編號是數字型的,1,2,3.。

自動遞增,也能給項目編號追加文字和樣式,依舊利用上面的html,css修改如下:CSS Code復制內容到剪貼板

    h1:before{ content:'第'counter(my)'章'; color:red; font-size:42px; } h1{ countercounter-increment:my; }
運行結果:https://jsfiddle.net/dwqs/17hqznca/指定編號種類利用content(計數器名,編號種類)格式的語法指定編號種類,編號種類的參考可以依據ul的list-style-type屬性值。

利用上述的html,css修改如下:CSS Code復制內容到剪貼板

    h1:before{ content:counter(my,upper-alpha); color:red; font-size:42px; } h1{ countercounter-increment:my; }
運行結果:https://jsfiddle.net/dwqs/4nsrtxup/編號嵌套大編號中嵌套中編號,中編號中嵌套小編號。

html:XML/HTML Code復制內容到剪貼板

    h1大標題/h1 p文字1/p p文字2/p p文字3/p h1大標題/h1 p文字1/p p文字2/p p文字3/p h1大標題/h1 p文字1/p p文字2/p p文字3/p
css:CSS Code復制內容到剪貼板
    h1::before{ content:counter(h)'.'; } h1{ countercounter-increment:h; } p::before{ content:counter(p)'.'; margin-left:40px; } p{ countercounter-increment:p; }
運行結果:https://jsfiddle.net/dwqs/2k5qbz51/在示例的輸出中可以發現,p的編號是連續的。

如果對于每一個h1后的三個p重新編號的話,可以使用counter-reset屬性重置,修改上述h1的css:CSS Code復制內容到剪貼板

    h1{ countercounter-increment:h; countercounter-reset:p; }
這樣,編號就重置了,看看結果:https://jsfiddle.net/dwqs/hfutu4Lq/還可以實現更復雜的嵌套,例如三層嵌套。

html:XML/HTML Code復制內容到剪貼板

    h1大標題/h1 h2中標題/h2 h3小標題/h3 h3小標題/h3 h2中標題/h2 h3小標題/h3 h3小標題/h3 h1大標題/h1 h2中標題/h2 h3小標題/h3 h3小標題/h3 h2中標題/h2 h3小標題/h3 h3小標題/h3
css:CSS Code復制內容到剪貼板
    h1::before{ content:counter(h1)'.'; } h1{ countercounter-increment:h1; countercounter-reset:h2; } h2::before{ content:counter(h1) '-' counter(h2); } h2{ countercounter-increment:h2; countercounter-reset:h3; margin-left:40px; } h3::before{ content:counter(h1) '-' counter(h2) '-' counter(h3); } h3{ countercounter-increment:h3; margin-left:80px; }
運行結果:https://jsfiddle.net/dwqs/wuuckquy/

版權聲明:本文由 桓永福 整理編輯。

原標題:meta content屬性,contenttype所有屬性

轉載注明出處:http://www.dn9ww09s.icu/fault/14343.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 如何把ppt轉換成word,如何把ppt轉換成圖片

    如何把ppt轉換成word,如何把ppt轉換成圖片 相關圖片ppt文本轉換成表格PPT是一個很好的表達工具,但在表的表達上還不夠完善。在日常辦公中,如果遇到表格文件,通常會使用Excel表格進行編輯,然后將其復制到PPT中。這種方法很麻煩。...

  • cs3怎么用,cs3

    cs3怎么用,cs3 相關圖片gcs3新界面:flash不再是一個簡單的web動畫工具,所有的意圖都表明它試圖開發成自己的平臺。顯然,flash接口已經從以前的版本中得到了巨大的發展。一眼就能感覺到cs3是什么...

  • html表格如何轉換excel,html表格導出到excel

    html表格如何轉換excel,html表格導出到excel 相關圖片excel轉化htmlExcel是處理表格文件的常用工具,但有時需要轉換成PPT、word等格式。此前,超人小版為您介紹了相關教程。今天,超人小版教你大多數人可能忽略的格式轉換:Exhtml5導出exc...

  • 發現精彩打不開怎么辦,發現精彩打不開

    發現精彩打不開怎么辦,發現精彩打不開 相關圖片發現精彩無法啟動輸入法探索精彩應用是廣發銀行推出的移動金融軟件。用戶可以通過尋找精彩的應用程序來管理自己的廣發銀行信用卡,并進行各種方便快捷的操作。但最近,一位朋...

  • u17,u17什么意思

    u17,u17什么意思 相關圖片網王u17之懶人Python適合Windows平臺使用win32gui、win32API和win32con包simu read.py。代碼如下:#-*-Coding=UTF-8網球王子u17漫畫...

  • 安卓手機正負符號怎么打出來,蘋果手機正負符號上下

    安卓手機正負符號怎么打出來,蘋果手機正負符號上下 相關圖片正負符號怎么打字符號是常用的數學符號之一。如果要單獨輸入符號,可以用 和-符號表示。但如果你想輸入一個組合的標志,很多人不知道如何操作。與超人軟件站編輯了解如何玩下一...

  • 繪制表格斜線,word怎么畫斜線

    繪制表格斜線,word怎么畫斜線 相關圖片怎么在excel中畫斜線首先看效果圖:首先是材質圖,用鋼筆勾選,然后將其轉換為選擇框,并使用字符作為材質。如果勾選不好,可以將背景的主要部分羽化到邊緣旁邊。在畫布上輸入字...

  • 補考重修,為什么重修沒有補考

    補考重修,為什么重修沒有補考 相關圖片重修和補考哪個嚴重智能文理是一款非常實用的閱讀和學習軟件。在這個軟件中,用戶可以及時了解學習情況,包括補考和復試。那么,報名參加新的或補考需要采取哪些步驟呢?接下...

  • utf 8編碼,utf16編碼

    utf 8編碼,utf16編碼 相關圖片utf許多使用Dreamweaver的人在將頁面設置為UTF-8編碼時會發現光標位置有一個字符偏移量。如何解決這個問題?讓我們詳細介紹光標位置問題的幾種解決方案1。最utf-8...

  • windows7隱藏盤,windows7怎樣隱藏硬盤盤符

    windows7隱藏盤,windows7怎樣隱藏硬盤盤符 相關圖片電腦系統怎么隱藏d盤微軟在保護用戶信息安全方面非常積極。例如,在win7系統中,為了防止其他人在自己的計算機上查看信息,微軟設計了win7操作來隱藏驅動器號,但是當他們想使用...

熱評文章

  • AI CS6,AI–CS6怎么樣

    AI CS6,AI–CS6怎么樣 相關圖片AI許多Adobe產品需要付費,比如AI。今天的超人編輯想和大家分享一下AICS6官方版的無序列號完美激活破解教程。如果你感興趣,請過來看看CS6...

  • 無線網絡連接屬性空白,xp無法配置無線網絡

    無線網絡連接屬性空白,xp無法配置無線網絡 相關圖片筆記本刷不出自家wifi無線網絡讓我們擺脫了網線對設備的束縛。幾乎所有人在連接網絡的過程中都會先選擇無線連接,但有些用戶會提醒windows在配置無線連接時無法配置無線連接。在這...

  • 粒子能量公式,粒子動能公式

    粒子能量公式,粒子動能公式 相關圖片α粒子是什么最近,我想得到一個網頁,并把一些我在學習HTML5過程中做的演示放在上面做一個集合。然而,如果我只是做一個網頁,并安排所有的演示一個接一個,我認為這太難看了。...

  • 清除dns緩存有什么用,怎么清除dns緩存

    清除dns緩存有什么用,怎么清除dns緩存 相關圖片dns怎么設置無論計算機的配置有多好,使用了很長一段時間,計算機上都會有一些DNS緩存。但這些緩存不像普通的垃圾。DNS緩存將導致我們無法解析域名。我們現在怎么能把它們徹底清...

  • 硬殼,啄破硬殼

    硬殼,啄破硬殼 相關圖片中華硬殼本文介紹了用煙火畫硬殼厚皮燙金書的工藝。首先看效果圖。先做一塊桌布,用焰火長方形工具畫一個填充色為?dfcfc0的長方形,并添加雜項點;2。制作書皮,用長方形工硬殼...

  • 探探突然收不到消息了怎么辦,探探收不到消息

    探探突然收不到消息了怎么辦,探探收不到消息 相關圖片探探別人收不到我的消息偵探是一個非常有趣的社交軟件。只有當雙方相愛時,才能相見。他們中的一些人發現在使用Android版本時無法接收信息。怎么了?如果你不知道,就探探收不到...

  • 創建輪廓,創建輪廓怎么取消

    創建輪廓,創建輪廓怎么取消 相關圖片ai創建輪廓在哪里這是一系列的flash CS3模擬藝術設計教程。我們將學習在flash CS3中繪制輪廓的應用。如果你不是很精通線和手的繪制操作,這個技巧可能更適合你渲染4:改創建輪廓快捷...

  • 樂視應用,樂視手機怎么備份

    樂視應用,樂視手機怎么備份 相關圖片樂視1s手機怎么導出聯系人近日,樂視云硬盤宣布關閉個人云服務,眾多小伙伴正忙著在樂視云硬盤上傳輸數據,而百度云安卓版也成為不少人的選擇。那么,樂視云硬盤的數據如何才能...

  • 導入,eclipse怎么導入文件

    導入,eclipse怎么導入文件 相關圖片amr文件用什么打開Template, shadow DOM custom element undertaker電腦文件怎么導入手機...

  • 17世紀對班級授課制,19世紀對班級組織的發展產生

    17世紀對班級授課制,19世紀對班級組織的發展產生 相關圖片小學每個班級有多少人世紀衛報是一款移動應用,學校和家長共同努力,更好地照顧孩子的成長。用戶可以通過世紀衛士加入您的課堂,查看學校和班級的最新情況,及時完成老師布置...

關注微信

变脸官网查询