自创一个百变布局

悠悠 2021-11-11 03:12 230阅读 0赞

<%@ 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;
    	width: 800px;
    	height: 500px;
    	border: 1px solid #F00
    }
    
    .innerdiv {
    	position:fixed;
    	margin: 0 auto;
    	width: 798px;
    	height: 200px;
    	border: 1px solid #F00;
    	background-color: red;
    }
    
    .innerMiddleDiv {
    	position:absolute;
    	overflow:hidden;
    	top:200px;
    	width: 798px;
    	height: 200px;
    	border: 1px solid #F00;
    	background-color: fuchsia;
    	float:left;
    }
    
     .row1{ 
     	top:20px; 
     	width: 200px; 
     	height: 200px; 
     	border: 1px solid #F00; 
     	background-color: fuchsia; 
     	float:left; 
     } 
    
    .row2{
    	margin-left:10px;
    	top:20px;
    	width: 200px;
    	height: 200px;
    	border: 1px solid #F00;
    	background-color: maroon;
    	float:left; 
    }
    
     .row3{ 
     	margin-left:10px; 
     	top:20px; 
     	width: 200px; 
     	height: 200px; 
     	border: 1px solid #F00; 
     	background-color: gray; 
     	float:left; 
     } 
     
     .innerDownDiv{
     	position:absolute;
    	overflow:hidden;
    	top:400px;
    	width: 798px;
    	height: 100px;
    	border: 1px solid #F00;
    	background-color: fuchsia;
    	float:left;
     }
    
    .alertdiv {
    	position:relative;
    	margin: 0 auto;
    	width: 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" οnclick="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;" οnclick="cancelAlert()">提示信息</div>
    	</div>
    	
    	
    
    
    
    
    
    
      </div>
     </div>
    	
    </body>
    </html>
    
    </body>
    </html>

转载于:https://www.cnblogs.com/wshsdlau/p/4265341.html