內容生成器 content 計數器 多列

2022-06-26 01:21:08 字數 1350 閱讀 4719

一,內容生成器:content

補充before和after偽類選擇器:

1):將內容新增到某個選擇器定義的單個或者多個元素的每乙個例項之前或者之後

2)與before選擇器配合使用(同理大家想下會不會有after?);

content的作用:

1,作用:在被選元素的內容前面插入內容;

2,用法:使用content屬性指定要插入的內容;

3,可以設定插入內容的樣式;

content的使用作用:對html內容修飾;

常用的值:url:新增影象;

文字;計數器:?

1),counter-reset屬性:

作用:設定某個選擇器出現次數的計數器的值,預設為 0。利用這個屬性可以設定或重置為任何值,可以是正值或負值。如果沒有提供 number,則預設為 0。

2),使用注意點:

如果使用display: none,則無法重置計數器。如果使用visibility: hidden,則可以重置計數器。

3),必須結合counter() 函式和counter-increment 屬性使用

a,counter()函式:

counter() 函式用於為指定計數器建立計數字串;

寫法:語法為:counter(name) :name 為計數器的名稱

b,counter-increment 屬性:counter-increment:有三個值:none,id number,inherit(規定應該從父元素繼承 counter-increment 屬性的值) 屬性設定某個選取器每次出現的計數器增量。預設增量是 1。

寫法:counter-increment:id number;(id 定義將增加計數的選擇器、id 或 class。

number 定義增量。number 可以是正數、零或者負數。)

demo:

html:

css:

body{

counter-reset: demo;

h1:before{

content: "第" counter(demo)"章" ":";

h1{counter-increment: demo;

三,多列:

2,之前換行用什麼???

答:長單詞換行

word-wrap : normal/break-word;

文字換行

word-break : normal/break-all/keep-all;

3,不管想讓一段文字呈多少列顯示,你需要的只是兩個屬性:column-count(列的具體個數) 和 column-width(列寬)column-gap(列之間的縫隙間隔寬度)column-rule(規定列之間的中間分割線寬度、樣式和顏色規則)。

生成器內容

1,生成器 生成器的本質就是迭代器 生成器的特點和迭代器一樣,取值方式和迭代器一樣 next send 給上乙個yield傳值 生成器一般有生成器函式或者生成器表示式來建立 其實就是手寫的迭代器 2,生成器函式 和普通函式沒有區別,裡面有yield的函式就是就是生成器函式 生成器函式在執行的時候,預...

css內容生成器

一,內容生成器 content 補充before和after偽類選擇器 1 將內容新增到某個選擇器定義的單個或者多個元素的每乙個例項之前或者之後 2 與before選擇器配合使用 同理大家想下會不會有after?content的作用 1,作用 在被選元素的內容前面插入內容 2,用法 使用conten...

生成器 迭代器

最近見天一直在看廖大的python教程,卻發現很多基礎看著很簡單,但卻不會應用,歸根結底還是因為理解不到位,故而又將教程學了一遍,並將自己的理解記錄一下,也方便後面查閱。由於沒有相關程式設計基礎,有些理解可能是錯的,敬請批評指正。想深入具體學習廖大部落格請移步廖雪峰的官方 有時候用迴圈生成列表太過繁...