• 自创一个百变布局


    <%@ page language="java" contentType="text/html; charset=utf-8"
    	pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    </head>
    <body>
    
    	<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>div居中 在线演示 www.divcss5.com</title>
    <style>
    body {
    	text-align: center
    }
    
    .div {
    	margin: 0 auto;
    	overflow:hidden;
    	 800px;
    	height: 500px;
    	border: 1px solid #F00
    }
    
    .innerdiv {
    	position:fixed;
    	margin: 0 auto;
    	 798px;
    	height: 200px;
    	border: 1px solid #F00;
    	background-color: red;
    }
    
    .innerMiddleDiv {
    	position:absolute;
    	overflow:hidden;
    	top:200px;
    	 798px;
    	height: 200px;
    	border: 1px solid #F00;
    	background-color: fuchsia;
    	float:left;
    }
    
     .row1{ 
     	top:20px; 
     	 200px; 
     	height: 200px; 
     	border: 1px solid #F00; 
     	background-color: fuchsia; 
     	float:left; 
     } 
    
    .row2{
    	margin-left:10px;
    	top:20px;
    	 200px;
    	height: 200px;
    	border: 1px solid #F00;
    	background-color: maroon;
    	float:left; 
    }
    
     .row3{ 
     	margin-left:10px; 
     	top:20px; 
     	 200px; 
     	height: 200px; 
     	border: 1px solid #F00; 
     	background-color: gray; 
     	float:left; 
     } 
     
     .innerDownDiv{
     	position:absolute;
    	overflow:hidden;
    	top:400px;
    	 798px;
    	height: 100px;
    	border: 1px solid #F00;
    	background-color: fuchsia;
    	float:left;
     }
    
    .alertdiv {
    	position:relative;
    	margin: 0 auto;
    	 400px;
    	height: 450px;
    	border: 1px solid #F00;
    	background-color: blue;
    /* 	z-index:1; */
    }
    /* css注释:为了观察效果设置宽度 边框 高度等样式 */
    </style>
    </head>
    <script type="text/javascript">
    	function getAlert(){
    		document.getElementById("alertdiv").style.display = "block";
    	}
    	
    	function cancelAlert(){
    		document.getElementById("alertdiv").style.display = "none";
    	}
    
    </script>
    <body>
    	<div class="div" onclick="getAlert()">
    		DIVCSS5实例
    		<div class="innerdiv">主题内容</div>
    		<div class="innerMiddleDiv" >
    			<div class ="row1">1、sdsdfsd</div>
    			<div class ="row2">2、sdfsdfsdfsdf</div>
    			<div class ="row3">3、dfgfgfgfgf</div>
    		</div>
    		<div class="innerDownDiv" ></div>
    		<div id="alertdiv" class="alertdiv" style="display: none;" onclick="cancelAlert()">提示信息</div>
    	</div>
    	
    	
    <!-- 	<div id="yellow" style="position:absolute; left:0px; top:0px; 200px; height:200px; background-color:#CCFF33; z-index:20"> -->
    <!--   这是一个黄层 -->
    <!--  </div> -->
    <!--  <div id="blue" style=" overflow:hidden;position:absolute; left:100px; top:100px; 200px; height:200px; background-color:#3399FF; z-index:1"> -->
    <!--   这是一个蓝层 -->
    <!--   <div id="black" style="position:absolute; left:100px; top:100px; 136px; height:136px; background-color:#000000;"> -->
      </div>
     </div>
    	
    </body>
    </html>
    
    </body>
    </html>
    
  • 相关阅读:
    T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
    禁用鼠标选中文字
    org.springframework.dao.InvalidDataAccessApiUsageException错误
    eclipse/myeclipse遇到的问题及解决方法
    WPF制作圆角窗体思路
    程序关闭后台进行
    转:Excel—“撤销工作表保护密码”的破解并获取原始密码
    C#压缩图片——高质量压缩方式
    【转载】.NET模拟POST登录并保持登录状态
    C#导出Excel,并设置简单格式
  • 原文地址:https://www.cnblogs.com/wshsdlau/p/4265341.html
Copyright © 2020-2023  润新知