国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

CSS中靈活使用:before和:after

2024-07-11 08:25:40
字體:
來源:轉載
供稿:網友

本文主要是針對:before和:after寫一些內容,還有幾個小樣式略微帶過的介紹下。

什么是:before和:after? 該如何使用他們?

:before是css中的一種偽元素,可用于在某個元素之前插入某些內容。
:after是css中的一種偽元素,可用于在某個元素之后插入某些內容。

下面我們先跑個簡單的代碼測試下效果:

CSS Code復制內容到剪貼板
  1. <style>      p:before{   
  2.       content: "H"  /*:before和:after必帶技能,重要性為滿5顆星*/     }   
  3.   p:after{          content: "d"  /*:before和:after必帶技能,重要性為滿5顆星*/  
  4.   }    </style>   
  5. <p>ello Worl</p>  

以上的代碼將會在頁面中展現的是”Hello World”。我們通過瀏覽器的”審查元素”看到的內容是:

XML/HTML Code復制內容到剪貼板
  1. <p>     ::before   
  2.   "ello Worl"      ::after   
  3. </p>  

p標簽內部的內容的前面會被插入一個:before偽元素,該偽元素內包含的內容是”H”;而在p標簽內的內容后面會被插入一個:after偽元素,該元素包含的內容是”d”。作為一只合格的程序猴子,捍衛”Hello World”的完整存在是必要的。

既然筆記主要針對是:before和:after,那么肯定不會只是僅僅有以上的簡單介紹就完事。下面我們看看平常該怎么使用他們。

1.結合border寫個對話框的樣式。

將上面這句話拆成2部分:結合border,寫個對話框的樣式。

既然是結合border,那么我們先轉個小話題,簡單由淺入深的介紹下怎么用border畫三角形樣式(這個三角形在寫對話框樣式的時候需要):

CSS Code復制內容到剪貼板
  1. <style>      .triangle{   
  2.       width: 0;          height: 0;   
  3.       border-left:50px solid red;          border-bottom:50px solid blue;   
  4.       border-top:50px solid black;          border-right:50px solid purple  
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 班玛县| 溧阳市| 汝州市| 滦南县| 恩施市| 邢台市| 台南市| 乌什县| 肇州县| 绩溪县| 涿鹿县| 公主岭市| 邢台县| 连平县| 华坪县| 通化县| 芜湖县| 靖宇县| 三门峡市| 仙游县| 和田县| 泗阳县| 石景山区| 金乡县| 察隅县| 永定县| 山东省| 山丹县| 秭归县| 石首市| 准格尔旗| 永昌县| 永川市| 石泉县| 施秉县| 西吉县| 泰兴市| 翁源县| 恭城| 大竹县| 河间市|