布局控制的练习 

style type="text/css">
	*{
		margin:0px auto;   全部0边距整体居中。
		padding:0px;}
		
		#content{ margin:20px 0px 0px 300px; 
		 width:350px;
		 height:100px;
		 border:2px solid #60f;
		 overflow:hidden;
		 padding:10px 10px 10px 10px
		 font-size:16px;
		font-family:微软雅黑;}
			
			#waiceng{
				width:100px; height:50px; margin-left:320px;
				 overflow:hidden; margin-top:-2px}
				#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;}
					 
			  
	#top{
			width:500px;
			padding:20px;
			font-size:16px;
			font-family:微软雅黑；
			margin:0px 0px 0px 0px;
			width:390px; height:30px;
			border:2px solid #e9e9e9; 
			overflow:hidden;
			padding:0px 0px 0px 0px}


	
			   .left_2{width:80px;
			   
					   height:30px;}
			   #left_1,.left_2{ float:left; 
			   text-align:center;
			   vertical-align:middle;
			   line-height:30px;}
			   
			   #left_1:hover{
				   background-color:#b3b6bb;
				   cursor:pointer;
				   color:#FFF;border-top: solid #C00;
				   margin-top:-1px;}
				   
				.left_2:hover{
					background-color:#b3b6bb;
					cursor:pointer;
					color: #FFF;
					border-top: solid #C00;
				   margin-top:-1px;}	   
			   			 
					 
					 
    </style>

		<body>
	 <!--<div style="width:0px; height:0px; border-bottom:100px solid #FFF; border-top:100px solid #00C; border-right:100px solid #FFF; border-left:100px solid #FFF;">
        </div>-->
        <br />
        
        
        <div style="width:0px; height:0px; border-bottom:100px solid transparent #000;; border-top:100px solid #00C; border-right:100px solid transparent; border-left:100px solid transparent;">
        </div>
        <br />
        <br />
        <br />
        <br />
        <div style="width:200px; height:200px;border-bottom:10px solid #00C; border-top:10px solid transparent #906; border-right:10px solid transparent #F00; border-left:10px solid  #00C; transform: rotate(45deg);">
        
        </div> 
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
         <div id="content">
        新举措开始减肥计划的司空见惯粉红色呢鸡丝豆腐合计亏损的那就是都会那时大家克服is集散地恢复电话费快速大幅i元萨克斯萨凡达四方。
        </div>
        <div id="waiceng">
             <div id="sanjiao"></div>
        </div>
         
         <div id="top">
       <DIV id="left">
					<div id="left_1" style="width:70px; height:30px;">春节</div>		                
					<div class="left_2">元宵节</div>
					<div class="left_2">端午节</div>
					<div class="left_2">中秋节</div>
					<div class="left_2">国庆节</div>  
         
         </DIV>
         </div>
         <br />
         <br />
         <br />
         <br />
         <br />
         <img src="../1106993.jpg" />
        <div style="width:600px; height:200px; background:#333; position:fixed; top:0px;">
         </div
         
         
         
         
         
         
         
    ></body>

　　

posted on 2018-03-21 09:30  啊耀`  阅读(85)  评论(0)  编辑  收藏  举报

导航