HTML5 LOGO

最新推荐文章于 2021-07-02 23:26:22 发布

>ICai

最新推荐文章于 2021-07-02 23:26:22 发布

阅读量293

点赞数 1

分类专栏： HTML5 文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_43797050/article/details/104737692

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

FEIHUA

想要学习一门语言重要从最经典地方开始，比如说Hello world！当然HTML5也不例外，但今天我想说的不是它，而是它：

HTML5 LOGO

沉稳大气黑色大字，橙黄色的外表，自带光环，让人一样看去就知道是谁它是谁。。。。好了编不下去了，直接上代码。

HTML代码：

文件名：htmllogo.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<!--网页标题为HTML5 logo-->
	<title>HTML5 logo</title>
	<!--链入式样式表，浏览器运行时会加载解析css目录下的logo.css文件-->
	<link rel="stylesheet" type="text/css" href="css/logo.css">
</head>
<body>
	<!--这是HTML5 logo最外层的盒子div，类名为bg-->
	<div class="bg">
		<!--每一束白色的光束的div盒子，行内样式style="transform:rotate(5deg)"用于设置div变形样式，即旋转5度，这是CSS3新增属性-->
		<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="white beam" style="transform: rotate(165deg)"></div>
		<div class="white beam" style="transform: rotate(175deg)"></div>
		<!--中心logo的div盒子类名为logo，设置行内样式为绝对定位，距离上边120px，距离左边229px-->
		<div class="logo" style="top:120px;left: 229px;">
			<!--盾牌（左）-->
			<div class="d_shield1"></div>
			<div class="d_shield2"></div>
			<div class="d_shield3"></div>
			<!--盾牌（右）-->
			<div class="d_shield4"></div>
			<div class="d_shield5"></div>
			<div class="d_shield6"></div>
			<!--浅橘色部分-->
			<!--定义行内样式给整个浅橘色部分的div盒子进行某种变形（CSS3新增属性），缩放为原来的0.82，并给这个div绝对定位-->
			<div style="transform: scale(0.82);left: 31px;top: 25px">
				<div class="l_shield1"></div>
				<div class="l_shield2"></div>
				<div class="l_shield3"></div>
			</div>
			<!--以下4个div组成的logo里面数字5的左半边灰色部分-->
			<div class="gray1"></div>
			<div class="gray2"></div>
			<div class="gray3"></div>
			<div class="gray4"></div>
			<!--以下4个div组成的logo里面数字5的右半边白色部分-->
			<div class="white1"></div>
			<div class="white2"></div>
			<div class="white3"></div>
			<div class="white4"></div>
			<!--最后的修补-->
			<div class="d_shield7"></div>
			<div class="l_shield4"></div>
			<img src="images/HTML.png">
		</div>
	</div>
</body>
</html>

CSS代码：

文件名：logo.css

body{
	margin: 0;   /*设置body的外边距为0*/
	padding: 0;  /*设置body的内边距为0*/
}
div{
	position: absolute;  /*给所有的div设置绝对定位*/
}
/*给类名为bg的元素的元素设置宽、高、背景颜色*/
.bg{
	width: 800px;
	height: 600px;
	background: #f2f2f2;
	overflow:hidden;  /*隐藏内容溢出*/
}
/*给类名为beam的元素设置宽、高、背景颜色及绝对定位*/
.beam{
	width: 1600px;  /*宽度为1600px*/
	height: 20px;  /*高度为20px*/
	background: #fff;  /*背景为白色*/
	top: 290px;  /*绝对定位，距离父元素上边线290px*/
	left: -400px;  /*绝对定位，距父元素左边线-400px*/
}
.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
	background: #e15016;
}
/*给类名为d_shield1的元素设置宽、高及绝对定位*/
.d_shield1{
	left: 32px;  /*绝对定位，距父元素左边线32px*/
	width: 140px;
	height: 346px;
}
.d_shield2{
	transform: skewX(5deg);  /*变形（CSS3新增属性）：水平方向斜切5度*/
	left: 16px;  /*绝对定位，距父元素左边线16px*/
	width: 100px;
	height: 346px;
}
.d_shield3{
	transform: skewY(15deg);  /*变形：垂直方向斜切15度*/
	top: 265px;  /*绝对定位，拒付元素上边线265px*/
	left: 32px;  /*绝对定位，距父元素左变现32px*/
	width: 140px;
	height: 100px;
}
.d_shield4{
	left: 172px;
	width: 140px;
	height: 346px;
}
.d_shield5{
	transform: skewX(-5deg);
	left: 227px;
	width: 100px;
	height: 346px;
}
.d_shield6{
	transform: skewY(-15deg);
	top: 265px;
	left: 172px;
	width: 140px;
	height: 100px;
}
.d_shield7{
	height: 20px;
	top: 199px;
	width: 80px;
	left: 60px;
}
.l_shield1,.l_shield2,.l_shield3,.l_shield4{
	background: #ee6812
}
.l_shield1{
	left: 172px;
	width: 140px;
	height: 345px;
}
.l_shield2{
	transform: skewX(-5deg);
	left: 227px;
	width: 100px;
	height: 363px;
}
.l_shield3{
	transform: skewY(-15deg);
	top: 282px;
	left: 172px;
	width: 138px;
	height: 100px;
}
.l_shield4{
	height: 43px;
	top: 113px;
	width: 100px;
	left: 180px
}
.gray1,.gray2,.gray3,.gray4{
	background: #ebebeb;
}
/*给类名为gray1的元素设置宽、高及绝对定位*/
.gray1{
	height: 43px;
	width: 102px;
	left: 70px;
	top: 70px;
}
/*给类名为gray2的元素设置宽、高、斜切变形及绝对定位*/
.gray2{
	width: 46px;
	height: 216px;
	transform: skewX(5deg);
	top: 70px;
	left: 75px;
}
.gray3{
	width: 95px;
	height: 43px;
	left: 77px;
	top: 156px;
}
.gray4{
	width: 87px;
	height: 47px;
	left: 85px;
	top: 251px;
	transform: skewY(15deg);
}
/*给类名为white1、white2、swhite3、white4的4个元素都设置背景颜色为白色*/
.white1,.white2,.white3,.white4{
	background: #fff;
}
/*给类名为white1的元素设置宽、高及绝对定位*/
.white1{
	width: 102px;
	height: 43px;
	left: 172px;
	top: 70px;
}
/*给类名为white2的元素设置宽、高、斜切变形及绝对定位*/
.white2{
	width: 46px;
	height: 216px;
	transform: skewX(-5deg);
	top: 70px;
	left: 223px;
}
.white3{
	height: 43px;
	width: 95px;
	left: 172px;
	top: 156px;
}
.white4{
	height: 47px;
	width: 87px;
	left: 172px;
	top: 251px;
	transform: skewY(-15deg);
}
/*给img便签设置宽、高及固定定位*/
img{
	position: fixed;  /*固定定位*/
	top: 8px;
	left: 225px;
	width: 350px;
	height: 110px;
}

HTNL
上面是它的名字，代码中img标签中的图片，下载下来放到image文件夹中。说是用PPT做的图片，不要问我为什么，因为我不会，是盆友给我的图片。（重要的是我想用用，用PPT来做的图片）

>ICai

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5 LOGO

FEIHUA想要学习一门语言重要从最经典地方开始，比如说Hello world！当然HTML5也不例外，但今天我想说的不是它，而是它：沉稳大气黑色大字，橙黄色的外表，自带光环，让人一样看去就知道是谁它是谁。。。。好了编不下去了，直接上代码。HTML代码：文件名：htmllogo.html<!DOCTYPE html><html lang="en"><h...
复制链接

扫一扫