<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>用CSS模拟窗口显示效果</title>
<style type="text/css">
div.window {
position: absolute; /*绝对定位*/
width: 300px; height: 200px;
border: 3px outset gray;
}
div.titlebar {
position: absolute;
top: 0px; height: 18px; width: 290px;
background-color: #aaa;
border-bottom: groove gray 2px;
padding: 3px 5px 2px 5px;
font: bold 11pt sans-serif;
}
div.content {
position: absolute;
top: 25px; height: 165px; width: 290px;
padding: 50x;
overflow: auto;
background-color: #ffffff;
}
div.translucent { /*实现半透明效果*/
opacity: .75; /*standard style*/
-moz-opacity: .75; /*older Mozillas*/
filter: alpha(opacity=75); /*IE*/
}
</style>
</head>
<body>
<div class="window" style="left: 10px; top: 10px; z-index: 10;">
<div class="titlebar">TextWindow</div>
<div class="content">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
</div>
</div>
<div class="window" style="left: 75px; top: 110px; z-index: 20;">
<div class="titlebar">AnotherWindow</div>
<div class="content translucent" style="background-color: #d0d0d0; font-weight: bold;">
This is another window. Its <tt>z-index</tt> puts it on top of the other one. CSS styles make its content area
translucent, in browsers that support that.
</div>
</div>
</body>
</html>
<html>
<head>
<title>用CSS模拟窗口显示效果</title>
<style type="text/css">
div.window {
position: absolute; /*绝对定位*/
width: 300px; height: 200px;
border: 3px outset gray;
}
div.titlebar {
position: absolute;
top: 0px; height: 18px; width: 290px;
background-color: #aaa;
border-bottom: groove gray 2px;
padding: 3px 5px 2px 5px;
font: bold 11pt sans-serif;
}
div.content {
position: absolute;
top: 25px; height: 165px; width: 290px;
padding: 50x;
overflow: auto;
background-color: #ffffff;
}
div.translucent { /*实现半透明效果*/
opacity: .75; /*standard style*/
-moz-opacity: .75; /*older Mozillas*/
filter: alpha(opacity=75); /*IE*/
}
</style>
</head>
<body>
<div class="window" style="left: 10px; top: 10px; z-index: 10;">
<div class="titlebar">TextWindow</div>
<div class="content">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>
</div>
</div>
<div class="window" style="left: 75px; top: 110px; z-index: 20;">
<div class="titlebar">AnotherWindow</div>
<div class="content translucent" style="background-color: #d0d0d0; font-weight: bold;">
This is another window. Its <tt>z-index</tt> puts it on top of the other one. CSS styles make its content area
translucent, in browsers that support that.
</div>
</div>
</body>
</html>