国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用CSS畫(huà)簡(jiǎn)單圖標(biāo)

since1986 / 1865人閱讀

摘要：用畫(huà)了三個(gè)圖標(biāo)，叉號(hào)，排行符號(hào)，搜索符號(hào)。我們用和偽類來(lái)分別當(dāng)一個(gè)矩形框，然后進(jìn)行旋轉(zhuǎn)即可得到叉號(hào)。我們用添加類的形式插入叉號(hào)，當(dāng)我們需要插入叉號(hào)時(shí)，我們額外添加一個(gè)標(biāo)記，并添加類。方便相對(duì)于父元素進(jìn)行定位第二步，設(shè)置偽類，畫(huà)叉號(hào)。

用CSS畫(huà)了三個(gè)圖標(biāo)，叉號(hào)，排行符號(hào)，搜索符號(hào)。先上效果圖啦啦啦。

附上CodePen鏈接，點(diǎn)我點(diǎn)我

思路

用叉號(hào)舉例哈。叉號(hào)可以看作兩個(gè)互相垂直的矩形框。矩形框可以用width和height和backgrond-color來(lái)表現(xiàn)，也可以用height和border-left和border-right和border-color來(lái)表現(xiàn)。我們用::before和::after偽類來(lái)分別當(dāng)一個(gè)矩形框，然后進(jìn)行旋轉(zhuǎn)即可得到叉號(hào)。

我們用添加類的形式插入叉號(hào)，當(dāng)我們需要插入叉號(hào)時(shí)，我們額外添加一個(gè)標(biāo)記，并添加類icon-cross。

第一步，設(shè)置圖標(biāo)尺寸。

.icon-cross{
  width: 20px;
  height: 20px;
  position: absolute;  /*方便相對(duì)于父元素進(jìn)行定位*/
}

第二步，設(shè)置偽類，畫(huà)叉號(hào)。

.icon-cross::before,
.icon-cross::after{
  content: "";
  position: absolute;  /*方便進(jìn)行定位*/
  height: 16px;
  width: 1.5px;
  top: 2px;
  right: 9px;  /*設(shè)置top和right使圖像在20*20框中居中*/
}
.icon-cross::before{
  transform: rotate(45deg);  /*進(jìn)行旋轉(zhuǎn)*/
}
.icon-cross::after{
  transform: rotate(-45deg);
}

為了讓矩形框有一定圓角好看點(diǎn)，可在偽類樣式中追加border-radius: 1px;。另外，為了使20*20的框能在父元素中垂直居中，我們給.icon-cross追加樣式top: 50%; margin-top: -10px;。上邊距為父元素高度的50%，然后再上移10px，這樣就垂直居中了哦。（10px為自身高度一半。如果圖標(biāo)高度是18px，那么就是上移9px。）

要設(shè)置在父元素中的水平位置，可設(shè)置left或right。

為了能根據(jù)父元素進(jìn)行定位，父元素務(wù)必position:relative||absolute;。

還要注意一點(diǎn)，由于我們沒(méi)有設(shè)置background-color，所以這時(shí)候是還啥都看不到。我喜歡在插入圖標(biāo)時(shí)，再另外設(shè)置背景顏色，這樣可以在不同地方反復(fù)插入這個(gè)圖標(biāo)，并分別設(shè)置不同的顏色。當(dāng)然，你也可以設(shè)置一個(gè)顏色作為默認(rèn)值。

具體的插入圖標(biāo)示例見(jiàn)開(kāi)頭的CodePen吧。

補(bǔ)充：我個(gè)人比較喜歡用border來(lái)當(dāng)色塊啦，這樣可以設(shè)置偽元素border-color: inherit;，然后直接設(shè)置類的邊框顏色就行了。如果是用width和height來(lái)當(dāng)色塊的話，就只能多帶帶設(shè)置偽類的background-color，覺(jué)得麻煩。但是用border來(lái)做的話，IE11和Edge在網(wǎng)頁(yè)縮放時(shí)有時(shí)候會(huì)在中間多一條縫..很丑陋..

代碼

附上CSS圖標(biāo)庫(kù)代碼。（現(xiàn)在只有三個(gè)圖標(biāo)哈哈）

/*----圖標(biāo)大小為20px*20px，已經(jīng)設(shè)置好在父元素中垂直居中，
只需另外設(shè)置left或者right來(lái)調(diào)整水平位置----*/

/*----通用設(shè)置----*/
[class|=icon]{  /*所有類名以“icon-”開(kāi)頭的*/
  width: 20px;
  height: 20px;
  top: 50%;  /*上邊距為父元素50%*/
  margin-top: -10px;  /*再往上移動(dòng)自身高度一半，就垂直居中了*/
  position: absolute;  /*有些圖標(biāo)高度不是20px，那么margin-top要多帶帶設(shè)置*/
}

[class|=icon]::before,  /*所有類名以“icon-”開(kāi)頭的偽元素*/
[class|=icon]::after{
  content: "";
  position: absolute;
  height: 0;
  width: 0;
}


/*---------叉號(hào)---------*/
.icon-cross::before,
.icon-cross::after{
  height: 16px;
  width: 1.5px;
  top: 2px;
  right: 9px; /*設(shè)置right和top使叉號(hào)居中*/
  border-radius: 1px;
}
.icon-cross::before{
  transform: rotate(45deg);
}
.icon-cross::after{
  transform: rotate(-45deg);
}

/*----------排行榜----------*/
.icon-ranklist,
.icon-ranklist::before,
.icon-ranklist::after{
  width: 4px;
  border-radius: 1px;
}
.icon-ranklist::before,
.icon-ranklist::after{
  bottom: 0;
  background: inherit;
}
.icon-ranklist{
  height: 18px;
  margin-top: -9px;
  margin-left: 8px;
  margin-right: 8px;  /*這樣排行榜圖標(biāo)寬度可以當(dāng)作20px*/
}
.icon-ranklist::before{
  height: 12px;
  left: -6px;
}
.icon-ranklist::after{
  height: 10px;
  right: -6px;
}

/*----------搜索圖標(biāo)----------*/
.icon-search::before{
  height: 12px;
  width: 12px;
  border-radius: 12px;
  border: 2px solid;
  top: 1px;
  left: 1px;
  border-color: inherit;
}
.icon-search::after{
  height: 7px;
  border-left: 1.5px solid;
  border-right: 1.5px solid;
  border-radius: 1.5px;
  right: 3px;
  bottom: 0px;
  transform: rotate(-45deg);
  border-color: inherit;
}
存在的問(wèn)題

最近才發(fā)現(xiàn)的，網(wǎng)頁(yè)縮放后，圖標(biāo)會(huì)有些變形，比如叉號(hào)會(huì)一根線長(zhǎng)點(diǎn)另一根線短點(diǎn)，只有在100%大小時(shí)才能完全是你想要的效果，哭...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115404.html

相關(guān)文章

  • 手把手教你打造一個(gè)純CSS圖標(biāo)庫(kù)

    摘要：方案由于圖標(biāo)圖片比較多，而且體積很小，為了減少請(qǐng)求所以很多時(shí)候我們會(huì)用雪碧圖這種技術(shù)來(lái)將圖標(biāo)拼湊在同一張圖片里面。你也能想到，一堆圖標(biāo)的雪碧圖，修改維護(hù)會(huì)相當(dāng)麻煩現(xiàn)在比較好的方案是使用引入圖片，小圖直接轉(zhuǎn)換成插入中。 來(lái)，干了這碗安利 寫(xiě)這篇文章的目的其實(shí)就是為了安利一下我的圖標(biāo)庫(kù)：iconoo，所以，開(kāi)門(mén)見(jiàn)山，star吧少年少婦們！（這樣的我是不是應(yīng)該要加個(gè)github互粉的團(tuán)伙了？...

    ad6623 評(píng)論0 收藏0

  • 使用CSS畫(huà)三角形

    摘要：說(shuō)到這里，大家該明白了上面的三角形圖標(biāo)是怎么來(lái)的了吧元素沒(méi)有下邊框，而左右邊框又是透明的，相當(dāng)于只有上圖中的上面的黑色三角形部分。所以，如果我們要做倒立三角形向右的或者向左的三角形，只需要為三角形底部設(shè)置邊框，兩腰邊框透明即可。 原文 http://itindex.net/detail/487...三角形-圖標(biāo) 網(wǎng)頁(yè)中經(jīng)常有一種三角形的圖標(biāo)，鼠標(biāo)點(diǎn)一下會(huì)彈出一個(gè)下拉菜單之類的（之前淘...

    lifesimple 評(píng)論0 收藏0

  • FE.WX-小程序“無(wú)聊廣場(chǎng)”游戲前端性能優(yōu)化與踩坑攻略

    摘要：本文主要針對(duì)小程序無(wú)聊廣場(chǎng)的前端開(kāi)發(fā)內(nèi)容做總結(jié)，記錄常見(jiàn)的一些老生常談的進(jìn)階手法，對(duì)小程序中的動(dòng)畫(huà)音頻等踩坑做出解決方案。 背景 一個(gè)交互不復(fù)雜，對(duì)刷新頻率和動(dòng)畫(huà)效果要求不高的小游戲，不需要使用canvas主導(dǎo)的解決方案，使用dom操作一樣可以完成。節(jié)省了cocos creater的學(xué)習(xí)成本，值得一試。本文主要針對(duì)小程序無(wú)聊廣場(chǎng)的前端開(kāi)發(fā)內(nèi)容做總結(jié)，記錄常見(jiàn)的一些老生常談的進(jìn)階手法，對(duì)...

    qpal 評(píng)論0 收藏0

  • CSS進(jìn)階篇--fontAwesome代替網(wǎng)頁(yè)icon小圖標(biāo)

    摘要：網(wǎng)頁(yè)小圖標(biāo)到處可見(jiàn)，如果一個(gè)網(wǎng)頁(yè)都是干巴巴的文字和圖片，而沒(méi)有小圖標(biāo)，會(huì)顯得非常簡(jiǎn)陋。直接看代碼鏈接鏈接鏈接鏈接得出的結(jié)果就是其他應(yīng)用還有其他更加復(fù)雜一點(diǎn)的應(yīng)用，包括固定寬度浮動(dòng)反轉(zhuǎn)旋轉(zhuǎn)疊加圖標(biāo)等。 引言 奧森圖標(biāo)（Font Awesome）提供豐富的矢量字體圖標(biāo)—通過(guò)CSS可以任意控制所有圖標(biāo)的大小 ，顏色，陰影。 網(wǎng)頁(yè)小圖標(biāo)到處可見(jiàn)，如果一個(gè)網(wǎng)頁(yè)都是干巴巴的文字和圖片，而沒(méi)有小圖標(biāo)...

    paney129 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<