本次的题目是制作如下图所示Google的logo：
首先，我们来分析一下结构，一目了然，其实就是六个加粗的字母。
然后我们开始构建基本框架，将六个字母分别用一对<strong></strong>标签包裹，因为这样设计能让后面设置字体颜色更加方便，既然是方便区分，就给每一对<strong></strong>定义一个类，并且将颜色相同的字符定义为相同类，基本框架的完整代码如下：
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orage">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>然后我们用CSS为各个字符做渲染，因为本题的渲染内容较少，所以我们直接用内嵌式引入CSS样式即可，第一步首先是引入CSS样式并初始化界面：
<style>
*{
margin: 0px;
padding:0px;
}
</style>然后直接对<strong>标签设置统一的字体大小：
strong{font-size: 70px ; }最后对每一类设置相应的颜色即可：
.blue{color: #1F0FEF}
.red{color: #E71317}
#orage{color: #FCCC03}
#green{color: #17D038}效果展示如下：
完整源码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字LOGO</title>
<style>
*{
margin: 0px;
padding:0px;
}
strong{font-size: 70px ; }
.blue{color: #1F0FEF}
.red{color: #E71317}
#orage{color: #FCCC03}
#green{color: #17D038}
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orage">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>
如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。
（QQ群：937864538 欢迎入群~）
