<%@ 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>