<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body{
text-align:center;
margin: 0; /* 最好將 body 元素的邊距和填充設置爲 0 以覆蓋不同的瀏覽器默認值 */
padding: 0;
background: #666666;
}
#container{
width:85%;
text-align:left;
background: #FFFFFF;
}
#header {
background: #DDDDDD;
padding: 0 10px; /* 此填充會將出現在它後面的 div 中的元素左對齊。如果 #header 中使用的是圖像（而不是文本），您最好刪除填充。 */
}
#header h1 {
margin: 0; /* 將 #header div 中最後一個元素的邊距設置爲零將避免邊距重疊（即 div 之間出現的無法解釋的空白）。如果 div 周圍有邊框，則不必將邊距設置爲零，因爲邊框也會避免邊距重疊 */
padding: 10px 0; /* 使用填充而不使用邊距將可以使元素遠離 div 的邊緣 */
display : inline;
}
#header div {
text-align:right;
}
#header div div{
margin:0;
display : inline;
padding:0 10px;
}
#sidebar1 {
float: left;
width: 200px; /* 由於此元素是浮動的，因此必須指定寬度 */
background: #EBEBEB; /* 將顯示背景色，其寬度等於欄中內容的長度，*/
padding: 15px 10px; /* 頂部和底部的填充將在該 div 中產生視覺空間 */
}
#mainContent{
margin: 0 20px 0 220px;/*上右下左*/
}
.clearfloat { /* 此類應當放在 div 或 break 元素上，而且該元素應當是完全包含浮動的容器關閉之前的最後一個元素 */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#footer {
padding: 0 10px; /* 此填充會將它上面 div 中的所有元素左對齊。 */
background:#DDDDDD;
}
</style>
<style TYPE="text/css">
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover {color: #ff00ff;text-decoration:underline}
</style>
<style>
/*彈出的登陸框的樣式*/
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
/*判斷是否是IE*/
var isIe=(document.all)?true:false;
/*本來想把登陸框放在點擊按鈕的地方，後來想一般都是放中間的，所以後面沒有用到了*/
function mousePosition(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//彈出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=window.screen.availWidth;
var bHeight=document.body.scrollHeight;
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:50;";
styleStr+=(isIe)?"filter:alpha(opacity=90);":"opacity:0.40;";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
/*div中放了一個登陸框*/
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' border='0'><tr><td>窗口標題</td><td><div align='right'>"+
"<input type='button' οnclick='closeWindow();' title='關閉窗口' class='close' value='關閉' /></div></td></tr>"+
"<tr><td>用戶名</td><td><input type='text' name='textfield' id='textfield' /></td></tr>"+
"<tr><td>密碼</td><td><input type='password' name='textfield' id='textfield' /></td></tr>"+
"<tr><td>重複密碼</td><td><input type='password' name='textfield' id='textfield' /></td></tr>"+
"<tr><td></td><td><div align='center'><input type='button' value='登陸'/> <input type='button' οnclick='closeWindow();' value='取消'/></div></td></tr>"+
"</table></div>";
var width=document.body.offsetWidth
var height=document.body.offsetHeight;
styleStr="left:"+(width/2-(wWidth/2))+"px;top:"+(height/2-100)+"px;position:absolute;width:"+wWidth+"px;z-index:99;"
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//關閉窗口
function closeWindow()
{
if(document.getElementById('back')!=null){
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null){
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//測試彈出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";
showMessageBox('窗口標題',messContent,objPos,250);
}
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1>標題</h1><div><div><a href="#">論壇</a></div><div><a href="#">博客</a></div><div><a href="#" οnclick="testMessageBox(event)">登陸</a></div><div><a href="#">註冊</a></div></div>
<!-- end #header -->
</div>
<div id="sidebar1">
<h3>sidebar1 內容</h3>
<p>此 div 上所顯示的背景色剛好與內容等寬。如果您喜歡改用分界線，而且 #mainContent div 所包含的內容將始終比 #sidebar1 div 中的多，請在 #mainContent div 的左邊緣放置一個邊框。 </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<h1> 主要內容 </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 級別的標題 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent -->
</div>
<!-- 這個用於清除浮動的元素應當緊跟 #mainContent div 之後，以便強制 #container div 包含所有的子浮動 --><br class="clearfloat" />
<div id="footer">
<p>腳註</p>
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
<!--隱藏的登陸框
<div id="loginLayer"><table width="100%" border="0">
<tr>
<td>窗口標題</td>
<td><div align="right">
<input type='button' οnclick='closeWindow();' title='關閉窗口' class='close' value='關閉' />
</div></td>
</tr>
<tr>
<td>用戶名</td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>重複密碼</td>
<td><input type="password" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td></td>
<td><div align="center">
<input type='button' value='登陸'/>
<input type='button' value='取消'/>
</div></td>
</tr>
</table>
</div>-->
</body>
</html>
一個關於彈出登陸框的頁面 用遮罩 div
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
java.security.NoSuchAlgorithmException解決方案
在linux環境下java程序運行拋出如下異常：java.security.NoSuchAlgorithmException: Cannot find