成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS之偽類元素

CastlePeaK / 1343人閱讀

摘要:再來一枚栗子,八卦圖,哈哈這里換成發(fā)現(xiàn)效果是一樣的其中學(xué)到的小技巧不僅僅包括偽類元素的使用,還有如何畫一個圓,用來控制就好了,一般設(shè)置成或都能達到畫圓的效果。效果圖如下好啦,今天學(xué)到得不少呢,繼續(xù)懷挺

近期在做各大公司W(wǎng)eb前端筆試題的時候,收獲頗豐,讓我感受強大的CSS的魅力,真的好神奇!

下面是一個demo:




    
    


    

將這段代碼保存成.html文件,放入瀏覽器中運行,你會發(fā)現(xiàn)一個非常有個性的圖片:

這里是用css中的偽類元素(:before和:after)來實現(xiàn)的,:before和:after的作用就是在指定的元素內(nèi)容(而不是元素本身)之前或之后插入一個包含content屬性指定內(nèi)容的行內(nèi)元素。

再來一枚栗子,八卦圖,哈哈:




    
    


    

其中學(xué)到的小技巧不僅僅包括偽類元素的使用,還有如何“畫”一個圓,用border-radius來控制就好了,一般設(shè)置成50%或100%都能達到畫圓的效果。效果圖如下:

好啦,今天學(xué)到得不少呢,繼續(xù)懷挺!

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/111562.html

相關(guān)文章

  • CSS系列之目錄

    摘要:圖片自適應(yīng)兩列布局一列定寬三列布局各單位距離比較與圖形繪制總結(jié)兼容性系列之或中系列之關(guān)于字體的事系列之偽類與偽元素系列之常用布局系列之布局神器與系列之與系列之水平垂直居中系列之與 word-wrap & word-break & white-space圖片自適應(yīng)兩列布局(一列定寬)三列布局css 各單位距離比較BFC與IFCCSS圖形繪制總結(jié)pointer-eventsCSS兼容性cs...

    cncoder 評論0 收藏0
  • CSS3偽類和偽元素

    作為一個CSS3初學(xué)不久者來說,很容易混淆單冒號(:)和雙冒號(::)的用法,以為兩者可以互換著來使用。我自己之前也混淆過他們,因為兩者看起來太相像了,就像孿生兄弟。但實際上,他們的區(qū)別還是挺大的,最多算得上近房親戚。 下面我們來開始講講單冒號(:)偽類和雙冒號(::)偽元素有什么相同和不同點(另外在CSS2中單冒號: 也叫做偽對象,具體可看看http://www.mb5u.com/tool/cs...

    mozillazg 評論0 收藏0
  • 學(xué)習(xí)《CSS選擇器Level-4》不完全版

    摘要:查看示例程序通配選擇器通用選擇器是一種特殊類型選擇器,表示任何元素類型的元素。例如元素組在未被初始選擇的情況下就為不確定值狀態(tài)。組合選擇器后代選擇器匹配的后代的元素并設(shè)置其顏色為紅色。 1 概述 1.1 前言 選擇器是CSS的核心組件。本文依據(jù)W3C的Selectors Level 4規(guī)范,概括總結(jié)了Level1-Level4中絕大多數(shù)的選擇器,并做了簡單的語法說明及示例演示。希望對程...

    wind5o 評論0 收藏0
  • 我終于理解了偽類和偽元素

    摘要:偽類和偽元素,對于絕大多數(shù)同學(xué)來說,都是耳熟能詳?shù)拿郑_實又有很多人搞不清楚它們之間的區(qū)別,以致于混淆概念。除了上面這個本質(zhì)區(qū)別以外,在中,偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素,對于絕大多數(shù)同學(xué)來說,都是耳熟能詳?shù)拿?,但確實又有很多人搞不清楚它們之間...

    張遷 評論0 收藏0
  • 談?wù)?em>css偽類與偽元素

    摘要:狀態(tài)偽類是基于元素當(dāng)前狀態(tài)進行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的,因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。單冒號用于偽類,雙冒號用于偽元素??梢酝ㄟ^對父元素添加偽類撐開父元素高度,因為就是其最后一個子元素。 css選擇器常見包括id(#id)、標(biāo)簽(tag)、class(.class)、屬性[attr=attrval]等,還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

    Berwin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<