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