首要来瞧瞧最后效果,这可可不是直接截取的谷歌的logo,这是以前说讲的css教程制作出来的。想晓得怎么做的吗?
首要咱们先分析一下这个logo,一共有6个字母,每一个字母的样式都不同样。
首要第1步要先在网页中表示这几个字母,
这儿需要用到span标签
网页效果
解释一下span标签。这个标签无任何效果,独一的效果便是后期经过css来给他设定样式,来达到区别的效果。
而后咱们来分析一下,此刻网页上的效果,距离近期效果还差有些什么。
以第1个字母G为例,第1体积不对,第二颜色不对,亦便是说咱们要经过css来设置这两个属性就够了。
而后咱们来新建一个样式 g1
解释一下 .表率这是一个样式类
font-size:200px 设置字体体积为200px 这个体积能够经过qq自带的截图去计算体积。
color 颜色 这儿面的数值我是经过软件对照片里的颜色取出来的
为了方便的大众,我把几个字母的颜色在这儿列举一下
G #0968F0
o #DD4F28
o #FFA500
g #1067E3
l #007C4F
e #E04E26
把g字母的样式写好以后,便是调用了。经过代码
<span class="g1">G</span>
网页效果
剩下的几个字母大众自己去试试
|