DIV+CSS：用CSS模拟窗口显示效果；

来源：互联网发布：妇科网络咨询技巧编辑：程序博客网时间：2024/05/16 09:32

<! 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>