摘要:再來一枚栗子,八卦圖,哈哈這里換成發(fā)現(xiàn)效果是一樣的其中學(xué)到的小技巧不僅僅包括偽類元素的使用,還有如何畫一個(gè)圓,用來控制就好了,一般設(shè)置成或都能達(dá)到畫圓的效果。效果圖如下好啦,今天學(xué)到得不少呢,繼續(xù)懷挺
近期在做各大公司W(wǎng)eb前端筆試題的時(shí)候,收獲頗豐,讓我感受強(qiáng)大的CSS的魅力,真的好神奇!
下面是一個(gè)demo:
將這段代碼保存成.html文件,放入瀏覽器中運(yùn)行,你會(huì)發(fā)現(xiàn)一個(gè)非常有個(gè)性的圖片:
這里是用css中的偽類元素(:before和:after)來實(shí)現(xiàn)的,:before和:after的作用就是在指定的元素內(nèi)容(而不是元素本身)之前或之后插入一個(gè)包含content屬性指定內(nèi)容的行內(nèi)元素。
再來一枚栗子,八卦圖,哈哈:
其中學(xué)到的小技巧不僅僅包括偽類元素的使用,還有如何“畫”一個(gè)圓,用border-radius來控制就好了,一般設(shè)置成50%或100%都能達(dá)到畫圓的效果。效果圖如下:
好啦,今天學(xué)到得不少呢,繼續(xù)懷挺!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/111562.html
作為一個(gè)CSS3初學(xué)不久者來說,很容易混淆單冒號(hào)(:)和雙冒號(hào)(::)的用法,以為兩者可以互換著來使用。我自己之前也混淆過他們,因?yàn)閮烧呖雌饋硖嘞窳耍拖駥\生兄弟。但實(shí)際上,他們的區(qū)別還是挺大的,最多算得上近房親戚。 下面我們來開始講講單冒號(hào)(:)偽類和雙冒號(hào)(::)偽元素有什么相同和不同點(diǎn)(另外在CSS2中單冒號(hào): 也叫做偽對(duì)象,具體可看看http://www.mb5u.com/tool/cs...
摘要:查看示例程序通配選擇器通用選擇器是一種特殊類型選擇器,表示任何元素類型的元素。例如元素組在未被初始選擇的情況下就為不確定值狀態(tài)。組合選擇器后代選擇器匹配的后代的元素并設(shè)置其顏色為紅色。 1 概述 1.1 前言 選擇器是CSS的核心組件。本文依據(jù)W3C的Selectors Level 4規(guī)范,概括總結(jié)了Level1-Level4中絕大多數(shù)的選擇器,并做了簡單的語法說明及示例演示。希望對(duì)程...
摘要:偽類和偽元素,對(duì)于絕大多數(shù)同學(xué)來說,都是耳熟能詳?shù)拿郑_實(shí)又有很多人搞不清楚它們之間的區(qū)別,以致于混淆概念。除了上面這個(gè)本質(zhì)區(qū)別以外,在中,偽類用單冒號(hào)表示而偽元素用雙冒號(hào)表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素,對(duì)于絕大多數(shù)同學(xué)來說,都是耳熟能詳?shù)拿郑_實(shí)又有很多人搞不清楚它們之間...
摘要:狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進(jìn)行選擇的。在與用戶的交互過程中元素的狀態(tài)是動(dòng)態(tài)變化的,因此該元素會(huì)根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號(hào)用于偽類,雙冒號(hào)用于偽元素。可以通過對(duì)父元素添加偽類撐開父元素高度,因?yàn)榫褪瞧渥詈笠粋€(gè)子元素。 css選擇器常見包括id(#id)、標(biāo)簽(tag)、class(.class)、屬性[attr=attrval]等,還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...
閱讀 1487·2021-11-24 11:16
閱讀 2689·2021-07-28 12:32
閱讀 2302·2019-08-30 11:22
閱讀 1440·2019-08-30 11:01
閱讀 594·2019-08-29 16:24
閱讀 3547·2019-08-29 12:52
閱讀 1625·2019-08-29 12:15
閱讀 1332·2019-08-29 11:18