制作html5的logo是由div块元素拼接而成,css样式控制每一块的样式和位置,为了体现代码的重要性采用style的内嵌式,页面拼接的步骤如下:
- 定位出整个页面的背景区域“bg”,并实现背景光束。
- 定义logo样式,并画出盾牌得分左半边
- 画出盾牌的右半边
- 画出浅橘色区域
- 画出5的左半边
- 画出5的右半边
- 用白色的区块遮挡多余的部分
***下面就是最后显示效果:***
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 logo</title>
<style type="text/css">
body{margin: 0;padding: 0;}
div{position: absolute;}
.bg{width: 800px;height: 600px;background: #f2f2f2;overflow: hidden;}
.beam{width: 1600px;height: 20px;background: #fff;top: 290px;left: -400px;}
.d_shield1,.d_shield2,.d_shield3,.d_shield5,.d_shield4,.d_shield6,.d_shield7{
background: #e15016;}
.d_shield1{left: 32px;width: 140px;height: 346px;}
.d_shield2{transform: skewX(5deg);left: 16px;width: 100px;height: 346px;}
.d_shield3{transform: skewY(15deg);top: 265px;left: 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: 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{height: 43px;width: 102px;left:70px;top:70px;}
.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{background: #fff;}
.white1{width: 102px;height: 43px;left: 172px;top: 70px;}
.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);}
</style>
</head>
<body>
<div class="bg">
<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(165deg)"></div>
<div class="beam" style="transform:rotate(175deg)"></div>
<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 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 class="gray1"></div>
<div class="gray2"></div>
<div class="gray3"></div>
<div class="gray4"></div>
<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>
</div>
</div>
</body>
</html>