css3在頁面中插入內容


A 使用選擇器來插入內容

h2:before{

  content:"前綴";

}

h2:after{

  content:"后綴";

}

B 指定個別的元素不進行插入

h2.sample:before{

  content:none;

}

2. 插入圖像

A 在標題前插入圖像文件

h2:before{

  content:url(anwy.jpg);

}

B alt屬性的值作為圖像的標題來顯示(用不了)

img:after{

  content:attr(alt);

  display:block;

  text-align:center;

  margin-top:5px;

  font-size:11px;

  font-weight:bold;

  color:black;

}

3. 插入編號

A 多個標題前加入連續編號

div:before{

  content:counter(divCounter);

}

div{

  counter-increment:divCounter;

}

B 在項目符號中追加文字

div:before{

  content:""counter(divCounter)"";

}

C 指定編號樣式、種類

div:before{

  content:counter(divCounter,upper-alpha)'.';

  color:blue;

  font-size:16px;

}

D 編號嵌套

div:before{

  content:counter(divCounter,upper-alpha)'.';

  color:blue;

  font-size:16px;

}

div{

  counter-increment:divCounter;

  counter-reset:subDivCounter;

}

p:before{

  content:counter(subDivCounter)'.';

  margin-left:15px;

 

  font-size:12px;

}

p{

  counter-increment:subDivCounter;

}

E 字符串兩邊添加文字嵌套符號

h3:before{

  content: open-quote;

}

h3:after{

  content: close-quote;

}

h3{

  quotes:"""";

}

 

disc | circle圓圈 | square正方形 | decimal數字 | decimal-leading-zero 十進制數| lower-roman 小寫羅馬文字| upper-roman 大寫羅馬文字| lower-greek小寫希臘字母 | lower-latin小寫拉丁文 | upper-latin 大寫拉丁文| armenian亞美尼亞數字 | georgian喬治亞數字 | lower-alpha小寫英文字母 | upper-alpha大寫英文字母 | none | inherit繼承


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM