content 生成內容

2022-07-16 17:12:11 字數 1733 閱讀 3055

content一般和:before,:after一起使用，用來生成內容(img和input沒有該屬性)，content的內容一般可以為以下四種：

none： 不生成任何值。

attr： 插入標籤屬性值

string： 插入字串 

其實我們常用的clearfix就是應用了這個none了

css code

.clearfix:after * html .clearfix              /*


ie6 


*/*:first-child+html .clearfix /*


ie7 


*/
青，取之於藍，而青於藍；冰，水為之，而寒於水。

滑鼠放上

滑鼠移出

css code

#imghover li#imghover a:after#imghover a:hover:after
css code

#icon_list a#icon_list a[href]:before#icon_list a[href$='.txt']:before#icon_list a[href$='.pdf']:before#icon_list a[href$='.doc']:before#icon_list a[href$='.jpg']:before#icon_list a[href^="mailto:"]:before
其實關於插入字串，這個頁面結構已經應用了很多了，第乙個是h2標題左邊的藍色一塊，第二個是滑鼠滑過**區的動畫效果，第三個就是footer部分的emailto旁邊的小圖示，如果有興趣可以用firebug檢視檢視，這個主要說下如何應用content做計數器

css3新增的選擇器屬性選擇器

結構偽類選擇器

增強的文字和顏色功能文字陰影，文字換行，溢位文字

rgba色彩模式

新增的彈性盒模型box布局

彈性布局實戰

css code

#counter li#counter li:before#counter li li#counter li li:before
在這篇文章的最後，說下如何在content裡面插入特殊字元，關於特殊字元可以參考這裡：html特殊字元，請先查閱其實用方法，即第一列為符號；第二列為html中使用的，需在前面加上；第三排css中可以使用，不過需要反斜槓\轉義。下面例項操作下

css code

#special li:before,


#special li:after#special li:nth-child(2n+1):before#special li:first-child:before,


#special li:first-child:after#special li:first-child:after#special li:nth-of-type(2):before#special li:nth-child(3):after#special li:last-of-type:before
注：這裡順便多應用了下css3的子元素選擇器，然後對於第一的after箭頭，通過transform的scale為-1來左右調轉

內容生成器 content 計數器 多列

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

CppCMS渲染content中內容到頁面上

框架見文章creating a web prototype based on cppcms 我們只需要更改標頭檔案content.h ifndef content h define content h include namespace content endif在struct中新增乙個string...

ASP 的Content控制項

contentplaceholderid globalcontent runat server 其中 contentplaceholderid是masterpage中 的id值 可見content控制項不是單獨存在的，它是和 contentplaceholder 控制項一起同時存在，而 conten...