講給後台程式設計師看的前端系列教程 21 偽元素

2021-09-26 23:43:08 字數 1956 閱讀 4103

android多解析度適配框架

html5前端開發實戰系列教程

走出思維困境,踏上精進之路——android開發高階精華錄

在css中,偽元素用於將特殊的效果新增到某些選擇器。在此介紹幾個css中常用的偽元素。

:first-letter用於向文字中的第乙個字設定特殊樣式,請看如下示例:

lang

="en"

>

>

charset

="utf-8"

>

>

偽元素title

>

type

="text/css"

>

p:first-letter

style

>

head

>

>

>

>

>

>

body

>

html

>

在該示例中利用:first-letter為p標籤中的第乙個字設定了樣式,效果圖如下所示:

:first-line用於向文字的首行設定特殊樣式,請看如下示例:

lang

="en"

>

>

charset

="utf-8"

>

>

偽元素title

>

type

="text/css"

>

p:first-line

style

>

head

>

>

>

>

歡迎技術交流p

>

>

>

期待您的來信p

>

body

>

html

>

在該示例中通過:first-line為p標籤中的第一行文字設定了特殊樣式,效果圖如下所示:

:before用於在元素的內容之前插入新內容,請看如下示例:

lang

="en"

>

>

charset

="utf-8"

>

>

偽元素title

>

type

="text/css"

>

h1:before

style

>

head

>

>

>

我愛我的女朋友h1

>

body

>

html

>

:after用於在元素的內容之後插入新內容,類似於:before;請看如下示例:

lang

="en"

>

>

charset

="utf-8"

>

>

偽元素title

>

type

="text/css"

>

h1:after

style

>

head

>

>

>

我愛我的女朋友h1

>

body

>

html

>

講給後台程式設計師看的前端系列教程 25 定位

android多解析度適配框架 html5前端開發實戰系列教程 走出思維困境,踏上精進之路 android開發高階精華錄 在html中,利用定位 position 可較為精確地定義元素顯示的位置,這個位置可以是相對於其本身出現的位置,也可以是相對於其上級元素的位置,還可以是相對於其他元素的位置,亦可...

好程式設計師前端教程css對齊方案總結

好程式設計師前端教程css對齊方案總結 垂直居中 通用布局方式 內斂元素和塊狀元素都適用 利用flex 核心 container 利用transformx 50 核心 container child 內斂元素的垂直居中 單行內斂元素 設定內斂元素的高度和行高相等 核心 container 塊狀元素 ...

好程式設計師web前端教程分享Date物件

好程式設計師web前端教程分享date物件,什麼是date物件乙個內建物件date 型別使用自 utc coordinated universal time,國際協調時間 1970 年 1 月 1 日午夜 零時 開始經過的毫秒數來儲存日期。date 型別儲存的日期能夠精確到 1970 年 1 月 1...