附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
Posted 来老铁干了这碗代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记相关的知识，希望对你有一定的参考价值。
页面展示
本项目将使用html5+CSS3绘制出HTML5的logo，页面效果如下所示。
技术要点
- HTML5新特性
- HTML5基本语法
- CSS3新特性
- 在HTML中引入样式
代码实现
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--网页标题为HTML5 logo-->
<title>HTML5 logo</title>
<!--链入式样式表，浏览器运行时会加载解析css/0101/目录下的logo.css文件-->
<link href="css/logo.css" type="text/css" rel="stylesheet">
</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>
<!--以下四个div组成logo里面数字5的左半边灰色部分-->
<div class="gray1" ></div>
<div class="gray2" ></div>
<div class="gray3" ></div>
<div class="gray4" ></div>
<!--以下四个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代码
/*第1单元 项目1-1 使用HTML5+CSS3绘制HTML5的logo*/
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;/*宽度为1600像素*/
height:20px;/*高度为20像素*/
background:#fff;/*背景为白色*/
top:290px;/*绝对定位，距父元素上边线290像素*/
left:-400px;/*绝对定位，距父元素左边线-400像素*/
}
.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
background:#e15016;
}
/*给类名为d_shield1的元素设置宽、高以及绝对定位*/
.d_shield1{
left:32px;/*绝对定位，距父元素左边线32像素*/
width:140px;
height:346px;
}
.d_shield2{
transform:skewx(5deg);/*变形（CSS3新增属性）：水平方向斜切5度*/
left:16px;/*绝对定位，距父元素左边线16像素*/
width:100px;
height:346px;
}
.d_shield3{
transform:skewy(15deg);/*变形：垂直方向斜切15度*/
top:265px;/*绝对定位，距父元素上边线265像素*/
left:32px;/*绝对定位，距父元素左边线32像素*/
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:346px;
}
.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、white3、white4的四个元素都设置背景颜色为白色*/
.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;
}
用到的图片
整理不易，有用就点个赞吧！
以上是关于附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记的主要内容，如果未能解决你的问题，请参考以下文章
用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上
html5/css3怎么写以下这种效果，最好有详细代码，给高分！
65 道 HTML5+CSS3 相关面试知识点（附：HTML5 / CSS3 相关特效源码分享）