每日一練:用css畫一個棒棒糖

zhkai 發布于2019-08-30 15:44 / 561人閱讀

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

背景:每天進步一點點,多積累一點點.就會越來越棒

代碼:

棒棒糖

用css畫一個棒棒糖

要求:

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

2:不得少于三層顏色

hello world!

效果圖:

今天積累到的知識:
1:關于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

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

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

3:關于邊框
我用的是box-shadow屬性,這個屬性可以設置多個值.比較適合我現在的場景.如果是值需要兩層,或者一層,可以直接設置boder或者兩個div嵌套或者outline屬性.

云服務器 GPU云服務器每日一練 python每日一練用java畫一個圖 html畫一個手

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116368.html

前端開發每日一練160303期

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

you_De 2019-08-19 17:44 評論0 收藏0
前端開發每日一練160303期

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

z2xy 2019-08-30 12:49 評論0 收藏0
前端開發每日一練160303期

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

amc 2019-08-01 15:05 評論0 收藏0
Python每日一練0003

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

happyfish 2019-07-31 11:06 評論0 收藏0
Python每日一練0023

摘要：問題如何判斷一個文件是否存在解決方案這個問題可以分成幾類問題如果這里的文件指的是文件或目錄，我們可以用方法如果這里的文件指的是普通的文件，我們可以用方法如果這里的文件指的是目錄，我們可以用方法并且在之后，可以使用面向對象的方法使用庫來判斷，問題如何判斷一個文件是否存在解決方案這個問題可以分成幾類問題如果這里的文件指的是文件或目錄，我們可以用os.path.exists()方法...

wuyangnju 2019-07-30 16:13 評論0 收藏0