仿照黑马程序员的教程自己写的，总结一些经验
一、HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 logo</title>
<!--链入式样式表-->
<link rel="stylesheet" href="logo.css" type="text/css">
</head>
<body>
<div class="bg">
<!--每一束的白色光束div盒子，transform:rotate(5deg)代表围绕中心点旋转5度-->
<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 style="top: 120px;left: 229px;position: absolute">
<!--左盾牌-->
<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>
<!--浅橘色部分,transform:scale()为缩放-->
<!--该盒子内的元素都会进行自动缩放-->
<div style="transform: scale(0.82);left: 31px;top: 25px;position: absolute">
<div class="r_shield1"></div>
<div class="r_shield2"></div>
<div class="r_shield3"></div>
</div>
<!--logo中数字5的左边部分-->
<div class="gray1"></div>
<div class="gray2"></div>
<div class="gray3"></div>
<div class="gray4"></div>
<!--logo中数字5的右边部分-->
<div class="white1"></div>
<div class="white2"></div>
<div class="white3"></div>
<div class="white4"></div>
<!--数字5最后的修改-->
<div class="d_shield7"></div>
<div class="r_shield4"></div>
</div>
<!--HTML图片-->
<!--<img class="img" src="HTML.png">-->
<!--上面的语句在CSS中用.img-->
<img src="HTML.png">
</div>
</body>
</html>二、CSS代码（名称为logo.css）
body{
margin: 0px;/*外边距*/
padding: 0px;/*内边距*/
}
.bg{
position: relative;/*相对定位*/
}
.bg{
width: 800px;
height: 600px;
background-color: #f2f2f2;
overflow: hidden;
}
.beam{
width: 1600px;
height: 20px;
top: 290px;/*绝对定位，距父元素上边线290px*/
left: -400px;/*绝对定位，距父元素左边线290px*/
background-color: white;
position: absolute;/*绝对定位*/
}
.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
background: #e15016;
position: absolute;
}
.d_shield1{
left: 32px;
width: 140px;
height: 346px;
}
.d_shield2{
transform: skewX(5deg); /*水平斜切5度*/
left: 16px;
width: 100px;
height: 346px;
}
.d_shield3{
transform: skewY(15deg);/*垂直斜切15度*/
top: 265px;
left: 32px;
width: 140px;
height: 100px;
}
.d_shield4{
left: 172px;
width: 140px;
height: 346px;
}
.d_shield5{
transform: skewX(-5deg);
left: 227px;/*没算出来227，浏览器调试出来的数字*/
width: 100px;
height: 346px;
}
.d_shield6{
transform: skewY(-15deg);
top: 265px;
left: 172px;
width: 140px;
height: 100px;
}
.r_shield1,.r_shield2,.r_shield3,.r_shield4{
background-color: #ee6812;
position: absolute;
}
.r_shield1{
left: 172px;
width: 140px;
height: 346px;
}
.r_shield2{
transform: skewX(-5deg);
left: 227px;
width: 100px;
height: 363px;
}
.r_shield3{
transform: skewY(-15deg);
top: 282px;
left: 172px;
width: 140px;
height: 100px;
}
.gray1,.gray2,.gray3,.gray4{
background-color: #ebebeb;
position: absolute;
}
.gray1{
height: 43px;
width: 102px;
left: 70px;
top: 70px;
}
.gray2{
transform: skewX(5deg);
width: 46px;
height: 216px;
top: 70px;
left: 75px;
}
.gray3{
width: 95px;
height: 43px;
left: 77px;
top: 156px;
}
.gray4{
transform: skewY(15deg);
width: 87px;
height: 47px;
left: 85px;
top: 251px;
}
.white1,.white2,.white3,.white4{
background-color: #fff;
position: absolute;
}
.white1{
width: 102px;
height: 43px;
top: 70px;
left: 172px;
}
.white2{
transform: skewX(-5deg);
width: 46px;
height: 216px;
top: 70px;
left: 223px;
}
.white3{
height: 43px;
width: 95px;
left: 172px;
top: 156px;
}
.white4{
transform: skewY(-15deg);
height: 47px;
width: 87px;
left: 172px;
top: 251px;
}
.d_shield7{
height: 20px;
top: 199px;
width: 80px;
left: 60px;
}
.r_shield4{
height: 43px;
top: 113px;
left: 172px;
width: 103px;
}
img{
position: absolute;
left: 234px;
top: 14px;
}三、一些总结：
1、margin和padding
总结：padding和margin都是边距的含义，padding是控件的内容相对控件的边缘的边距，称为内边距；margin是控件边缘相对父空间的边距，称为外边距。其中，内容出现在padding的内部。
详情请看我写的这篇博客https://blog.csdn.net/KK_2018/article/details/102949600
2、绝对定位与相对定位
总结：position:absolute为绝对定位，它的定位参照对象（父元素）为离它最近的具有定位属性（position）的元素，如果找不到，就会根据浏览器窗口进行定位。元素设置此属性后会脱离文档流，如果设置偏移量（left、top、right、bottom），会影响其他元素的位置定位；position:relative为相对定位，它是相对于自身（原来的位置）进行定位，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局。一般来讲，子绝父相——即子元素使用绝对定位，父元素使用相对定位。
详情请看这篇博客https://blog.csdn.net/KK_2018/article/details/102940350
3、定位标签
总结：例如<img>标签，<img>是html标记，并且它是一个空元素，也就是没有内容的元素，它是用来链接图片的。在css中使用直接就像元素选择器那样；加.是类选择器里面的，具体格式为 元素名.类名。
标签名称{
属性名称:属性值
}
#id名称{
属性名称:属性值
}
.类名称{
属性名称:属性值
}详情请看这篇博客https://blog.csdn.net/KK_2018/article/details/102951300
京公网安备 11010502036488号