每日一练:用css画一个棒棒糖

zhkai 发布于2019-08-30 15:44 / 550人阅读

摘要：背景每天进步一点点多积累一点点就会越来越棒代码棒棒糖用画一个棒棒糖要求棒棒糖中间文字为水平居中不得少于三层颜色效果图今天积累到的知识关于的缩写可以写成代表代表使用简写需要注意的地方和只能通过斜杠组成一个值，不能分开写。

背景:每天进步一点点,多积累一点点.就会越来越棒

代码:

棒棒糖

用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画一个手

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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