3.22做的德科官网

  中午老师给讲解了一下昨天下午做的练习题，感觉自己做的还可以，有几个小毛病，都是粗心造成的，以后得多注意。

  下午老师就让开始自己选网页，准备自己做一个，检验一下前几天学的东西，掌握了没有，我感觉这种实战演练还是挺不错的，只有多敲，多练才能真的掌握东西。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>练习题</title>
    <link rel="icon" href="../../../Pictures/Pictures/捕获.PNG">
    <style type="text/css">
	  *{
		  margin:0px auto;
		  padding:0px;
		  }
	  .aa{
		  float:left;
		  width:200px; height:40px;
		  
		  text-align:center;
		  vertical-align:middle;
		  line-height:40px;
		  color:#333;
		  border-color:#e9e9e9;
		  }
	   .aa:hover{
		   background-color:#b3b6bb;
		   border-top-color:#f39;
		   color:white;
		  
		   
		          }
		 
    #tcontent {
		        margin:20px 0px Opx 300px;
				width:350px;
			    height:100px;
				border:2px solid #60F;
				overflow:hidden;
				padding: 10px 10px 10px 10px
				}
 
    #waiceng {
		         width: 100px;
				 height :50px;
				 margin-left :320px;
				 margin-top:-2px;
				 overflow:hidden; }
    #sanjiao {
				 width:50px;
				 height:50px;
				 border:2px solid #60F;
				 transform:rotate(45deg);
				 position:relative;
				 top:-27px; 
				 border-left:0px; 
				 border-top:0px;
				 background-color:white;}
		 </style>

</head>

<body>
     <!--第一题-->
	<div style="width:0px; height:0px; border-bottom:100px solid transparent;  border-top:100px solid #00F;  border-left:100px solid transparent; border-right:100px solid #00f;"></div>
     <!--第二题-->
    <div style="width:100px; height:100px; border-bottom:5px solid #0F0;  border-top:0px solid transparent;  border-left:5px solid  #900; border-right:0px solid transparent; transform:rotate(45deg)"></div>
    <!--第四题-->
    <div style="width:1010px; height:40px; border:1px solid;">
    	<div class="aa">春节</div>
        <div class="aa">元宵节</div>
        <div class="aa">端午节</div>
        <div class="aa">中秋节</div>
        <div class="aa">国庆节</div>
    </div>
    <!--第六题-->
    <div style="width:100px; height:100px; border:1px solid; position:absolute"></div>
    <!--第三题-->
    <div id="tcontent" style="font-family:微软雅黑; font-size:14px">
         CSS3中添加的transform是对元素进行变化操作的，包括位移，旋转，放大，变形等操作。这里我的代码均是采用标准的CSS3规范书写，大家使用的时候为了兼容
         可加上-webkit-、-O-、-ms-、-moz-、-khtm1-等前缀以适应不同的浏览器。

     </div>
     <div id="waiceng">
         <div id="sanjiao"></div>
     </div>
     

</body>

 

posted @ 2018-03-23 11:15  weizihao  阅读(103)  评论(0)    收藏  举报