每日一練:用css畫一個(gè)棒棒糖

zhkai 發(fā)布于2019-08-30 15:44 / 607人閱讀

摘要：背景每天進(jìn)步一點(diǎn)點(diǎn)多積累一點(diǎn)點(diǎn)就會(huì)越來(lái)越棒代碼棒棒糖用畫一個(gè)棒棒糖要求棒棒糖中間文字為水平居中不得少于三層顏色效果圖今天積累到的知識(shí)關(guān)于的縮寫可以寫成代表代表使用簡(jiǎn)寫需要注意的地方和只能通過(guò)斜杠組成一個(gè)值，不能分開寫。

背景:每天進(jìn)步一點(diǎn)點(diǎn),多積累一點(diǎn)點(diǎn).就會(huì)越來(lái)越棒

代碼:

棒棒糖

用css畫一個(gè)棒棒糖

要求:

1:棒棒糖中間文字為水平居中

2:不得少于三層顏色

hello world!

效果圖:

今天積累到的知識(shí):
1:關(guān)于font的縮寫

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:17px;
line-height:100px;
font-family:arial,verdana;

可以寫成:

font: italic bold 17px/100px arial,sans-serif;

17px代表:font-size
100px代表:line-height

使用簡(jiǎn)寫需要注意的地方:
1:font-size和line-height只能通過(guò)斜杠/組成一個(gè)值，不能分開寫。
2:順序不能改變.這種簡(jiǎn)寫方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。而且，如果你沒(méi)有設(shè)定font-weight, font-style, 以及 font-varient ，他們會(huì)使用缺省值

2:關(guān)于居中
用了最簡(jiǎn)單的文字高度與div高度相同,在設(shè)置text-align:center.如果不設(shè)置font就設(shè)置line-height:100px;也是可以達(dá)到文字居中的效果

3:關(guān)于邊框
我用的是box-shadow屬性,這個(gè)屬性可以設(shè)置多個(gè)值.比較適合我現(xiàn)在的場(chǎng)景.如果是值需要兩層,或者一層,可以直接設(shè)置boder或者兩個(gè)div嵌套或者outline屬性.

GPU云服務(wù)器云服務(wù)器每日一練 python每日一練用java畫一個(gè)圖 html畫一個(gè)手

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116368.html

相關(guān)文章

前端開發(fā)每日一練160303期

摘要：對(duì)于早期版本，方法用于直接附加一個(gè)事件處理程序到元素上。處理程序附加到對(duì)象中當(dāng)前選中的元素，所以，在綁定事件的時(shí)候，這些元素必須已經(jīng)存在。重繪不會(huì)帶來(lái)重新布局，并不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計(jì)算。本期問(wèn)題 1.jquery中bind、on和delegate有什么區(qū)別？答：先來(lái)看看css88上API的定義： on在選定的元素上綁定一個(gè)或多個(gè)事件處...

you_De 2019-08-19 17:44 評(píng)論0 收藏0
前端開發(fā)每日一練160303期

摘要：對(duì)于早期版本，方法用于直接附加一個(gè)事件處理程序到元素上。處理程序附加到對(duì)象中當(dāng)前選中的元素，所以，在綁定事件的時(shí)候，這些元素必須已經(jīng)存在。重繪不會(huì)帶來(lái)重新布局，并不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計(jì)算。本期問(wèn)題 1.jquery中bind、on和delegate有什么區(qū)別？答：先來(lái)看看css88上API的定義： on在選定的元素上綁定一個(gè)或多個(gè)事件處...

z2xy 2019-08-30 12:49 評(píng)論0 收藏0
前端開發(fā)每日一練160303期

摘要：對(duì)于早期版本，方法用于直接附加一個(gè)事件處理程序到元素上。處理程序附加到對(duì)象中當(dāng)前選中的元素，所以，在綁定事件的時(shí)候，這些元素必須已經(jīng)存在。重繪不會(huì)帶來(lái)重新布局，并不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計(jì)算。本期問(wèn)題 1.jquery中bind、on和delegate有什么區(qū)別？答：先來(lái)看看css88上API的定義： on在選定的元素上綁定一個(gè)或多個(gè)事件處...

amc 2019-08-01 15:05 評(píng)論0 收藏0
Python每日一練0003

摘要：?jiǎn)栴}在每日一練中介紹了如何一個(gè)可迭代對(duì)象，使用運(yùn)算符即可但往往我們遇到的問(wèn)題是可迭代對(duì)象中的數(shù)量是不確定的這個(gè)時(shí)候該如何拿到我們想要的元素，比如我們只需要可迭代對(duì)象的第一個(gè)或者最后一個(gè)元素而已解決方案使用中的運(yùn)算符例如我們需要拿到一個(gè)元組的問(wèn)題在每日一練0001中介紹了如何unpack一個(gè)可迭代對(duì)象，使用,運(yùn)算符即可但往往我們遇到的問(wèn)題是可迭代對(duì)象中的數(shù)量是不確定的這個(gè)時(shí)候該如...

happyfish 2019-07-31 11:06 評(píng)論0 收藏0
Python每日一練0023

摘要：?jiǎn)栴}如何判斷一個(gè)文件是否存在解決方案這個(gè)問(wèn)題可以分成幾類問(wèn)題如果這里的文件指的是文件或目錄，我們可以用方法如果這里的文件指的是普通的文件，我們可以用方法如果這里的文件指的是目錄，我們可以用方法并且在之后，可以使用面向?qū)ο蟮姆椒ㄊ褂脦?kù)來(lái)判斷，問(wèn)題如何判斷一個(gè)文件是否存在解決方案這個(gè)問(wèn)題可以分成幾類問(wèn)題如果這里的文件指的是文件或目錄，我們可以用os.path.exists()方法...

wuyangnju 2019-07-30 16:13 評(píng)論0 收藏0