<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 logo</title>
<style>
body{
margin:0;
padding:0;
}
div{
position:absolute;
}
/*给类名为bg的元素设置宽、高、背景颜色*/
.bg{
width: 8000px;
height:6000px;
background:#f2f2f2;
overflow: hidden;
}
/*给类名为beam的元素设置宽、高、背景颜色及绝对定位*/
.beam{
width:1600px;
height:20px;
background:#fff;
top:290px;
left:-400px:
}
.d_shield1,.d_shield2 ,.d_shield3,.d_shield3 ,.d_shield4 ,.d_shield5 ,.d_shield6 ,.d_shield7 {
background:#e15016;
}
/*给类名为d_shield1 的元素设置宽、高及绝对定位*/
.d_shield1 {
left:32px;
width:140px;
height:346px;
}
.d_shield2 {
transform: skewx(5deg); /*变形(CSS3 新增属性) :水平方向斜切5度*/
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的元素设置宽、高及绝对定位*/
.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{
background:#fff;
}
/*给类名为white1的元素设置宽、高及绝对定位*/
.white1 {
width:102px;
height:43px;
left:172px;
top:70px;
}
.white2 {
width:46px;
height:216px;
transform:skewx(-5deg);
left:223px;
top:70px;
}
.white3 {
height:43px;
width:95px;
left:172px;
top:156px;
}
.white4 {
width:87px;
height:47px;
left:172px;
top:251px;
tansform:skewy(-15deg);
}
/*给img标签设置宽、高及固定定位*/
img{
position:fixed;
top:-180px;
left:-125px;
width:250px
height:165px;
}
</style>
<link href="css/logo.css" type="text/css " hel="stylesheet">
</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(155deg) "></div>
<div class="beam" style="transform:rotate(165deg) "></div>
<div class="beam" style="transform:rotate(175deg) "></div>
<div class="logo" style="top:120px;left:630px">
<!--盾牌(左)-->
<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>
<!--以下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>
<div src="images/HTML.png"></div>
<div class="img" >
<img src=".idea/HTML.png"/>
</div>
</div>
</div>
</body>
</html>
