国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

：：before和：：after的詳細(xì)介紹

Alfred / 2290人閱讀

摘要：原文傳送門一介紹為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。默認(rèn)情況下，偽類元素的是默認(rèn)值，可以通過設(shè)置來改變其顯示。舉例百度前面給出一張圖片，后面給出屬性。復(fù)制代碼百度復(fù)制代碼效果調(diào)用計(jì)數(shù)器，可以不使用列表元素實(shí)現(xiàn)序號(hào)功能。

原文傳送門： https://www.cnblogs.com/staro...

一、介紹

css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。

常見偽類——:hover,:link,:active,:target,:not(),:focus。

常見偽元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。

這些添加不會(huì)出現(xiàn)在DOM中，不會(huì)改變文檔內(nèi)容，不可復(fù)制，僅僅是在css渲染層加入。

所以不要用:before或:after展示有實(shí)際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標(biāo)。

舉例：網(wǎng)站有些聯(lián)系電話，希望在它們前加一個(gè)icon?，就可以使用:before偽元素，如下：

復(fù)制代碼



12345645654


復(fù)制代碼

Note:這些特殊字符的html，js和css的寫法是不同的，具體可查看html特殊字符的html，js，css寫法匯總。

二、content屬性

::before和::after必須配合content屬性來使用，content用來定義插入的內(nèi)容，content必須有值，至少是空。默認(rèn)情況下，偽類元素的display是默認(rèn)值inline，可以通過設(shè)置display:block來改變其顯示。

content可取以下值。

1、string
使用引號(hào)包一段字符串，將會(huì)向元素內(nèi)容中添加字符串。如：a:after{content:""}

舉例：

復(fù)制代碼



平凡的世界


復(fù)制代碼

2、attr()
通過attr()調(diào)用當(dāng)前元素的屬性，比如將圖片alt提示文字或者鏈接的href地址顯示出來。


starof

3、url()/uri()
用于引用媒體文件。

舉例：“百度”前面給出一張圖片，后面給出href屬性。

復(fù)制代碼


百度

復(fù)制代碼
效果：

4、counter()
調(diào)用計(jì)數(shù)器，可以不使用列表元素實(shí)現(xiàn)序號(hào)功能。

配合counter-increment和counter-reset屬性使用：

h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

代碼:

復(fù)制代碼


HTML tutorials


HTML Tutorial


XHTML Tutorial


CSS Tutorial

Scripting tutorials


JavaScript


VBScript

XML tutorials


XML


XSL


復(fù)制代碼
效果：

了解更多可參考：https://developer.mozilla.org...

三、使用

1、清除浮動(dòng)
清除浮動(dòng)方法有多種，現(xiàn)在最常用的就是下面這種方法，僅需要以下樣式即可在元素尾部自動(dòng)清除浮動(dòng)

復(fù)制代碼
.cf:before,
.cf:after {

content: " ";
display: table;

}
.cf:after {

clear: both;

}
.cf {

*zoom: 1;

}
復(fù)制代碼
2、模擬float:center的效果
float沒有center這個(gè)取值，但是可以通過偽類來模擬實(shí)現(xiàn)。

這個(gè)效果實(shí)現(xiàn)很有意思，左右通過::before float各自留出一半圖片的位置，再把圖片絕對(duì)定位上去。

核心css如下：

復(fù)制代碼

page-wrap { width: 60%; margin: 40px auto; position: relative; } logo { position: absolute; top: 0; left: 50%; margin-left: -125px; } l, #r { width: 49%; } l { float: left; } r { float: right; } l:before, #r:before { content: ""; width: 125px; height: 250px; } l:before { float: right; } r:before { float: left; }

復(fù)制代碼
完整代碼如下：

View Code

出自：https://css-tricks.com/float-...

3、做出各種圖形效果
舉例：一個(gè)六角星

復(fù)制代碼




復(fù)制代碼

star-six的div是一個(gè)正三角行，#star-six::after是一個(gè)倒三角形，通過絕對(duì)定位，調(diào)整其位置即可實(shí)現(xiàn)六角星的效果。

點(diǎn)我查看更多。

4、不使用圖片創(chuàng)建小圖標(biāo)
舉例：比如一個(gè)電話

很巧妙的應(yīng)用一個(gè)div左border加圓角當(dāng)機(jī)身，::before和::after配合圓角當(dāng)聽筒。

復(fù)制代碼


復(fù)制代碼

更多圖標(biāo)：

View Code

這個(gè)效果來自：http://www.w3cfuns.com/blog-5...

有大神用偽元素創(chuàng)建了84種小圖標(biāo)，具體可查看http://nicolasgallagher.com/p...

5、顯示打印網(wǎng)頁的URL
復(fù)制代碼

百度

復(fù)制代碼

6、給blockquote添加引號(hào)
經(jīng)常用到給blockquote 引用段添加巨大的引號(hào)作為背景，可以用 ：:before 來代替 background 。好處是即可以給背景留下空間，還可以直接使用文字而非圖片：

復(fù)制代碼


引用一個(gè)段落,雙引號(hào)用::before偽元素實(shí)現(xiàn)

復(fù)制代碼

7、超鏈接特效
舉例：配合 CSS定位實(shí)現(xiàn)一個(gè)鼠標(biāo)移上去，超鏈接出現(xiàn)方括號(hào)的效果

復(fù)制代碼


鼠標(biāo)移上去出現(xiàn)方括號(hào)
復(fù)制代碼

更多創(chuàng)意鏈接特效可參考： Creative Link Effects 。

8、::before和::after實(shí)現(xiàn)多背景圖片
舉例：一個(gè)標(biāo)簽應(yīng)用5張背景圖

View Code

原效果來自：Multiple Backgrounds and Borders with CSS 2.1

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/97278.html

相關(guān)文章

  • ：：before和：：after的詳細(xì)介紹

    摘要：原文傳送門一介紹為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。默認(rèn)情況下，偽類元素的是默認(rèn)值，可以通過設(shè)置來改變其顯示。舉例百度前面給出一張圖片，后面給出屬性。復(fù)制代碼百度復(fù)制代碼效果調(diào)用計(jì)數(shù)器，可以不使用列表元素實(shí)現(xiàn)序號(hào)功能。 原文傳送門： https://www.cnblogs.com/staro... 一、介紹 css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。 常見偽類——:h...

    loostudy 評(píng)論0 收藏0

  • ：：before和：：after的詳細(xì)介紹

    摘要：原文傳送門一介紹為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。默認(rèn)情況下，偽類元素的是默認(rèn)值，可以通過設(shè)置來改變其顯示。舉例百度前面給出一張圖片，后面給出屬性。復(fù)制代碼百度復(fù)制代碼效果調(diào)用計(jì)數(shù)器，可以不使用列表元素實(shí)現(xiàn)序號(hào)功能。 原文傳送門： https://www.cnblogs.com/staro... 一、介紹 css3為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。 常見偽類——:h...

    chemzqm 評(píng)論0 收藏0

  • LinkedHashMap 源碼詳細(xì)分析（JDK1.8）

    摘要：關(guān)于的源碼分析，本文并不打算展開講了。大家可以參考我之前的一篇文章源碼詳細(xì)分析。在刪除節(jié)點(diǎn)時(shí)，父類的刪除邏輯并不會(huì)修復(fù)所維護(hù)的雙向鏈表，這不是它的職責(zé)。在節(jié)分析鏈表建立過程時(shí)，我故意忽略了部分源碼分析。 1. 概述 LinkedHashMap 繼承自 HashMap，在 HashMap 基礎(chǔ)上，通過維護(hù)一條雙向鏈表，解決了 HashMap 不能隨時(shí)保持遍歷順序和插入順序一致的問題。除此...

    Harriet666 評(píng)論0 收藏0

  • memwatch分析

    摘要：介紹是一個(gè)擴(kuò)展，主要用來觀察內(nèi)存泄露問題，基本用法如下實(shí)現(xiàn)分析分析的版本為。的入口函數(shù)在文件中，通過進(jìn)行聲明。下面分析下函數(shù)的具體實(shí)現(xiàn)函數(shù)內(nèi)部會(huì)遞歸調(diào)用函數(shù)得到最終堆快照的結(jié)果。回調(diào)的觸發(fā)與的鉤子有關(guān)，詳細(xì)看下一節(jié)分析。 介紹 memwatch是一個(gè)c++擴(kuò)展，主要用來觀察nodejs內(nèi)存泄露問題，基本用法如下： const memwatch = require(@airbnb/mem...

    worldligang 評(píng)論0 收藏0

  • 從源碼入手，一文帶你讀懂Spring AOP面向切面編程

    摘要：，，面向切面編程。，切點(diǎn)，切面匹配連接點(diǎn)的點(diǎn)，一般與切點(diǎn)表達(dá)式相關(guān)，就是切面如何切點(diǎn)。例子中，注解就是切點(diǎn)表達(dá)式，匹配對(duì)應(yīng)的連接點(diǎn)，通知，指在切面的某個(gè)特定的連接點(diǎn)上執(zhí)行的動(dòng)作。，織入，將作用在的過程。因?yàn)樵创a都是英文寫的。 之前《零基礎(chǔ)帶你看Spring源碼——IOC控制反轉(zhuǎn)》詳細(xì)講了Spring容器的初始化和加載的原理，后面《你真的完全了解Java動(dòng)態(tài)代理嗎？看這篇就夠了》介紹了下...

    wawor4827 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<