<style>
body{ background:#6FF;}
.a01{ 1000px; height:300px; margin:20px auto; border:2px dotted #000; padding:50px;}
.a01 div {margin:auto;}
.a02{border:1px solid #000; 360px; height:40px;}
.a02 div {float:left; 60px; height:40px; text-align:center; vertical-align:middle; line-height:40px;}
.a02 div:hover{ border:1px solid #F00; background:#CCC; color:#FFF; font-size:36px; height:130px;}
#a11{margin:20px 0px 0px 300px; 350px; height:100px; border:2px solid #60F; overflow:hidden; padding:10px 10px 10px 10px;}
#a12{100px; height:50px; margin-left:320px; overflow:hidden; margin-top:-2px;}
#a13{50px; height:50px; border:2px solid #60F; position:relative; top:-24px;
border-left:0px; border-top:0px; background-color:#6FF; transform:rotate(45deg);}
</style>
<link rel="icon" href="../../素材/DW.ico" />
</head>
<body>
<!--第一题-->
<div class="a01">
<div style=" border:50px solid #F00; 0px; height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid transparent; ">
</div>
</div>
<!-- 第二题-->
<div class="a01">
<div style="50px; height:50px;
border-top:5px solid #90C;
border-left:5px solid #90C;
transform:rotate(-45deg);">
</div>
</div>
<!--第三题-->
<div class="a01">
<!--*{margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}
原有外边距 内边距清零 所有元素外边距左右居中 全局字体为微软雅黑 全局字体大小为10像素。
#content{margin:20px 0px 0px 300px; 350px; height:100px; border:2px solid #60F; overflow:hidden; padding:10px 10px 10px 10px;}
id名为content的 外边距上20 右0 下0 左300 宽350 高100 边框2像素实线颜色为#60F 超出隐藏 内边距上右下左分别为10 10 10 10。
#waiceng{100px; height:50px; margin-left:320px; overflow:hidden; margin-top:-2px;}
id 宽100 高50 右边外边距为320 超出隐藏 上外边距为-2px。
#sanjiao{50px; height:50px border:2px solid #60F; transform: sotate(45deg); position:reletive; top:-27px:
id 宽50 高 50 边框宽2px 实线 颜色#60F 元素变化操作，顺时针旋转45度 相对定位 定位位置距离上边-27
border-left:0px; border-top:0px; }
左边框0px 上边框0px 背景颜色 白色
-->
<div id="a11">
第三题
</div>
<div id="a12">
<div id="a13"></div>
</div>
</div>
<!--第四题-->
<div class="a01">
<div class="a02">
<div>春节</div>
<div>元宵节</div>
<div>端午节</div>
<div>中秋节</div>
<div>国庆节</div>
<div></div>
</div>
</div>
<!-- 第六题-->
<div class="a01">
<div style=" position:fixed; bottom:0px; 1000px; height:50px; text-align:center;
vertical-align:middle; line-height:50px; font-size:40px; color:#0CF;
background:#C03; border:2px dotted #666666;">
这就是固定的地方你拉都不动
</div>
</div>
</body>