DIV+CSS:用CSS模拟窗口显示效果;

<! 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值