- 项目分析
①定义出整个页面的背景区域“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拼凑出盾牌的左半边部分,以不同的颜色标记