css从入门到放弃（3）——css实战 google的logo css版制作
<div style="color: black; text-align: left; margin-bottom: 10px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>来<span style="color: black;">瞧瞧</span><span style="color: black;">最后</span>效果，这可可不是直接截取的谷歌的logo，这是以前说讲的css教程制作出来的。想<span style="color: black;">晓得</span>怎么做的吗？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/2c2d00033b85e2f95f3d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722928024&x-signature=Sgs%2FgCRW%2F9IbwnnpcHj0BmWqPfw%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span><span style="color: black;">咱们</span>先分析一下这个logo，一共有6个字母，<span style="color: black;">每一个</span>字母的样式都不<span style="color: black;">同样</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span><span style="color: black;">第1</span>步要先在网页中<span style="color: black;">表示</span>这几个字母，</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span>需要用到span标签</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/2c2600033bf5819fef14~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722928024&x-signature=cLP7pwEylQzSYEWgdBQFy6jJ2Tk%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">网页效果</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/2c310002e35c056303c4~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722928024&x-signature=cos5i8YIydHLdVmObDVnNTarNf8%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">解释一下span标签。这个标签<span style="color: black;">无</span>任何效果，<span style="color: black;">独一</span>的效果<span style="color: black;">便是</span>后期<span style="color: black;">经过</span>css来给他设定样式，来达到<span style="color: black;">区别</span>的效果。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span><span style="color: black;">咱们</span>来分析一下，<span style="color: black;">此刻</span>网页上的效果，距离<span style="color: black;">近期</span>效果还差<span style="color: black;">有些</span>什么。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以<span style="color: black;">第1</span>个字母G为例，<span style="color: black;">第1</span><span style="color: black;">体积</span>不对，第二颜色不对，<span style="color: black;">亦</span><span style="color: black;">便是</span>说<span style="color: black;">咱们</span>要<span style="color: black;">经过</span>css来设置这两个属性就够了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span><span style="color: black;">咱们</span>来新建一个样式 g1</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/2c330003f5210a991a81~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722928024&x-signature=nCwd3iKk2YYZqFjizfW%2FHZTpq24%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">解释一下 .<span style="color: black;">表率</span>这是一个样式类</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">font-size:200px 设置字体<span style="color: black;">体积</span>为200px 这个<span style="color: black;">体积</span><span style="color: black;">能够</span><span style="color: black;">经过</span>qq自带的截图去计算<span style="color: black;">体积</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> color 颜色 <span style="color: black;">这儿</span>面的数值我是<span style="color: black;">经过</span>软件对<span style="color: black;">照片</span>里的颜色取出来的 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/2c2600033bf60ddda21c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722928024&x-signature=G3XpeZ9QtyLzhB9zYWCzGPtzw74%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了方便的<span style="color: black;">大众</span>，我把几个字母的颜色在<span style="color: black;">这儿</span>列举一下</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">G #0968F0</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">o #DD4F28</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">o #FFA500</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">g #1067E3</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">l #007C4F</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">e #E04E26</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把g字母的样式写好以后，<span style="color: black;">便是</span>调用了。<span style="color: black;">经过</span>代码</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span class="g1">G</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">网页效果</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://p3-sign.toutiaoimg.com/2c330003f5203b9d826d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722928024&x-signature=bASXfc1gb%2BhO%2Bv3ZXN%2FzvO%2BdJwU%3D" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">剩下的几个字母<span style="color: black;">大众</span>自己去试试</p>
</div>
回顾历史，我们不难发现：无数先辈用鲜血和生命铺就了中华民族复兴的康庄大道。 你的话语如春风拂面，让我心生暖意。 你的见解独到，让我受益匪浅，非常感谢。 感谢你的精彩评论，为我的思绪打开了新的窗口。
页:
[1]