console 命令行工具 X clear

console

<!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>

/*第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;
}