HTML练习之路06

最新推荐文章于 2024-07-21 12:12:15 发布

沐曦可期

最新推荐文章于 2024-07-21 12:12:15 发布

阅读量464

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_62714412/article/details/122631403

版权

本次的题目是制作如下图所示Google的logo：

首先，我们来分析一下结构，一目了然，其实就是六个加粗的字母。

然后我们开始构建基本框架，将六个字母分别用一对标签包裹，因为这样设计能让后面设置字体颜色更加方便，既然是方便区分，就给每一对定义一个类，并且将颜色相同的字符定义为相同类，基本框架的完整代码如下：

<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{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 欢迎入群~）

沐曦可期

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
HTML练习之路06

本次的题目是制作如下图所示Google的logo：首先，我们来分析一下结构，一目了然，其实就是六个加粗的字母。然后我们开始构建基本框架，将六个字母分别用一对标签包裹，因为这样设计能让后面设置字体颜色更加方便，既然是方便区分，就给每一对定义一个类，并且将颜色相同的字符定义为相同类，基本框架的完整代码如下：<body> <strong class="blue
复制链接

扫一扫