zoukankan      html  css  js  c++  java
  • 布局控制的练习

    style type="text/css">
    	*{
    		margin:0px auto;   全部0边距整体居中。
    		padding:0px;}
    		
    		#content{ margin:20px 0px 0px 300px; 
    		 350px;
    		 height:100px;
    		 border:2px solid #60f;
    		 overflow:hidden;
    		 padding:10px 10px 10px 10px
    		 font-size:16px;
    		font-family:微软雅黑;}
    			
    			#waiceng{
    				100px; height:50px; margin-left:320px;
    				 overflow:hidden; margin-top:-2px}
    				#sanjiao{
    					50px; height:50px;
    					 border:2px solid #60f;
    					 transform:rotate(45deg); 
    					 position:relative; 
    					 top:-27px; 
    					 border-left:0px; 
    					 border-top:0px; 
    					 background-color:white;}
    					 
    			  
    	#top{
    			500px;
    			padding:20px;
    			font-size:16px;
    			font-family:微软雅黑;
    			margin:0px 0px 0px 0px;
    			390px; height:30px;
    			border:2px solid #e9e9e9; 
    			overflow:hidden;
    			padding:0px 0px 0px 0px}
    
    
    	
    			   .left_2{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="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="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="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="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="600px; height:200px; background:#333; position:fixed; top:0px;">
             </div
             
             
             
             
             
             
             
        ></body>
    

      

  • 相关阅读:
    带轮播图、导航栏、商品的简单html,以及轮播图下边数字随轮播图的改变而改变
    设计table表格,用js设计偶数行和奇数行显示不同的颜色
    用js实现九九乘法口诀两种方式
    [FW]修复ubutnu12.04+win7的grub2引导
    How to compile Linux kernel in fedora 6
    [Fw]初探linux中断系统(2)
    [Fw]初探linux中断系统(1)
    Regular Expression 範例
    [fw]IDT表的初始化
    [Fw]中断的初始化
  • 原文地址:https://www.cnblogs.com/cy960202/p/8615184.html
Copyright © 2011-2022 走看看