千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > css偽元素的實(shí)用技巧

css偽元素的實(shí)用技巧

來(lái)源:千鋒教育
發(fā)布人:wjy
時(shí)間: 2022-10-10 14:01:47 1665381707

  1.定義

  偽元素用于創(chuàng)建一些不在文檔樹(shù)中的元素,并為其添加樣式。比如說(shuō),我們可以通過(guò):before :after來(lái)在一個(gè)元素前、后增加一些文本,并為這些文本添加樣式。雖然用戶可以看到這些文本,但是這些文本實(shí)際上不在文檔樹(shù)中。

  2.偽元素的單雙冒號(hào)

  在CSS2之前規(guī)范不明確的時(shí),偽元素使用單冒號(hào)(:)來(lái)表示;

  在CSS3規(guī)范中的要求使用雙冒號(hào)(::)表示偽元素,以此來(lái)區(qū)分偽元素和偽類;但為了向上兼容,現(xiàn)在用單冒號(hào)(:)也可以的。

  3. 使用場(chǎng)景

  下面運(yùn)用before和after在元素前面和后面插入偽元素,實(shí)現(xiàn)一些有意思的小效果,代碼和效果圖附上。

  3.1用偽元素實(shí)現(xiàn)插入文字、字體圖標(biāo)庫(kù)

  3.1.1插入文字:

css偽元素的實(shí)用技巧1

  效果如下:

css偽元素的實(shí)用技巧2

  3.1.2插入iconfont字體圖標(biāo)庫(kù):

css偽元素的實(shí)用技巧3

  根據(jù)效果圖可以看到偽元素是inline元素類型

css偽元素的實(shí)用技巧4

  3.2清除浮動(dòng)

  解決浮動(dòng)導(dǎo)致的父元素高度塌陷的問(wèn)題

css偽元素的實(shí)用技巧5

  3.3分割線效果

css偽元素的實(shí)用技巧6

  效果圖:

css偽元素的實(shí)用技巧7

  3.4對(duì)話框效果

css偽元素的實(shí)用技巧8

  效果圖如下:

css偽元素的實(shí)用技巧9

  3.5 相片層疊效果

css偽元素的實(shí)用技巧10

css偽元素的實(shí)用技巧11

  效果圖如下:

css偽元素的實(shí)用技巧12

  總結(jié)

  使用偽元素能實(shí)現(xiàn)的效果非常多,也可以減少網(wǎng)頁(yè)中標(biāo)簽的使用,一起動(dòng)手試試看偽元素的妙用技巧吧。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
大數(shù)據(jù)測(cè)試工程師需要具備哪些技能?

一、理解大數(shù)據(jù)概念大數(shù)據(jù)測(cè)試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲(chǔ)、MapReduce、實(shí)時(shí)計(jì)算等。他們還需要了解如何處理大規(guī)模的...詳情>>

2023-10-14 23:43:03
為什么SpringBoot的 jar 可以直接運(yùn)行?

一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫(xiě),它是一種壓縮文件格式,可以將Java項(xiàng)目的類文件、資源文件以及依賴庫(kù)等...詳情>>

2023-10-14 23:01:49
站群服務(wù)器是什么?

站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個(gè)人擁有,并且經(jīng)常會(huì)互相鏈...詳情>>

2023-10-14 22:46:12
自編碼器是什么?

一、自編碼器原理自編碼器的設(shè)計(jì)靈感源于神經(jīng)科學(xué)中關(guān)于感知系統(tǒng)的認(rèn)知原理,它的核心思想是將輸入數(shù)據(jù)經(jīng)過(guò)編碼過(guò)程,形成一個(gè)隱藏層的特征表示...詳情>>

2023-10-14 22:41:10
什么是云網(wǎng)融合?

一、云網(wǎng)融合的定義云網(wǎng)融合是指將云計(jì)算與網(wǎng)絡(luò)技術(shù)相結(jié)合,實(shí)現(xiàn)資源的共享、業(yè)務(wù)的協(xié)同,將網(wǎng)絡(luò)與云端服務(wù)深度融合,提供更靈活、高效、安全的...詳情>>

2023-10-14 22:31:47
久久亚洲中文字幕精品一区四,亚洲日本另类欧美一区二区,久久久久久久这里只有免费费精品,高清国产激情视频在线观看
亚洲深夜福利网站 | 中文字幕在线精品视频入口一区 | 亚洲国产亚综合在线欧美 | 日本亚洲欧美在线视观看 | 亚洲天堂中文字幕第一页 | 亚洲女性午夜在线 |