项目1-1使用html5+css3绘制html5的logo

最新推荐文章于 2022-06-11 10:58:14 发布

原创

最新推荐文章于 2022-06-11 10:58:14 发布 · 396 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用HTML5和CSS3技术来绘制HTML5的标志。从背景光束的创建，到盾牌左右半边、浅橘色区域，再到数字5的左右部分以及遮盖细节，每一步都提供了清晰的操作步骤，帮助读者理解并实践CSS3的图形绘制能力。

项目分析
①定义出整个页面的背景区域“bg”，并且实现背景光束
②定义logo的样式，并画出盾牌的左半边
③画出盾牌的右半边
④画出浅橘色区域
⑤画出5的左半边
⑥画出5的右半边
⑦用色块遮盖多余的部分
⑧在盾牌上方，添加HTML图片
第一步
定义整个页面的背景，并且画出光束。
html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML5logo</title>
		<link rel="stylesheet" type="text/css" href="css/logo.css"/>
	</head>
	<body>
		<!--这是HTML5 logo的最外层的盒子div，类名bg-->
		<div class="bg">
			<!--每一束白色光束的div盒子，行内样式style-->
			<div class="beam" style="transform:rotate(5deg);"></div>
			<div class="beam" style="transform:rotate(15deg);"></div>
			<div class="beam" style="transform:rotate(25deg);"></div>
			<div class="beam" style="transform:rotate(35deg);"></div>
			<div class="beam" style="transform:rotate(45deg);"></div>
			<div class="beam" style="transform:rotate(55deg);"></div>
			<div class="beam" style="transform:rotate(65deg);"></div>
			<div class="beam" style="transform:rotate(75deg);"></div>
			<div class="beam" style="transform:rotate(85deg);"></div>
			<div class="beam" style="transform:rotate(95deg);"></div>
			<div class="beam" style="transform:rotate(105deg);"></div>
			<div class="beam" style="transform:rotate(115deg);"></div>
			<div class="beam" style="transform:rotate(125deg);"></div>
			<div class="beam" style="transform:rotate(135deg);"></div>
			<div class="beam" style="transform:rotate(145deg);"></div>
			<div class="beam" style="transform:rotate(155deg);"></div>
			<div class="beam" style="transform:rotate(165deg);"></div>
			<div class="beam" style="transform:rotate(175deg);"></div>
		</div>
	</body>
</html>

css

body{
	margin: 0;  /*设置body的外边距为0*/
	padding: 0;  /*设置body的内边距为0*/
}
div{
	position: absolute;  /*给所有div设置绝对定位*/
}
/*给类名为bg的div设置高、宽、背景色*/
.bg{
	width:800px;
	height: 600px;
	background: #f2f2f2;
	overflow: hidden; /*隐藏溢出内容*/
}
/*给类名为beam的元素设置宽、高、背景色以及绝对定位*/
.beam{
	width: 1600px;
	height: 20px;
	background: #fff;
	top: 290px;
	left: -400px;
}

第二步
用三块div拼凑出盾牌的左半边部分，以不同的颜色标记
部分HTML代码

		<!--中心logo的盒子，设置行内样式为绝对定位-->
			<div c

最低0.47元/天解锁文章