leeight

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Google实现的方式使用4张图片放在表格的4个角上.我也是采用了同样的方法,但是实现的方式不是用表格构造,而是用CSS控制DIV的样式来达到我们需要的效果.
<style type="text/css">
    .divTL{
        float:left;
        width:4px;
        height:4px;
        margin-left:0px;
        margin-top:0px;       
    }
    .divTR{
        float:right;
        width:4px;
        height:4px;
        margin-right:0px;
        margin-top:0px;       
    }
    .divBL{
        float:left;
        width:4px;
        height:4px;
        margin-left:0px;
        margin-bottom:0px;   
    }
    .divBR{
        float:right;
        width:4px;
        height:4px;
        margin-left:0px;
        margin-bottom:0px;   
    }
   
    .divMain{
        background-color:#C3D9FF;
        width:100%;
        height:15px;
    }
    .divTOP{
        margin-top:0px;
        width:100%;     
        height:4px;
    }
    .divBOTTOM{
        margin-bottom:0px;
        width:100%;     
        height:4px;
    }
    .divROOT{
        width:95%;
        background-color:#C3D9FF;
        margin-left:auto;
        margin-right:auto;
    }
</style>

<div class="divROOT">
        <div class="divTOP"><div class="divTR"><img src=https://mail.google.com/mail/images/corner_tr.gif class=c alt="" /></div><div class="divTL"><img src=https://mail.google.com/mail/images/corner_tl.gif class=c alt="" /></div></div>   
        <div class="divMain"> Hello World!</div>
        <div class="divBOTTOM"><div class="divBR"><img src=https://mail.google.com/mail/images/corner_br.gif class=c alt="" /></div><div class="divBL"><img src=https://mail.google.com/mail/images/corner_bl.gif class=c alt="" /></div>
        </div>
    </div>

在IE和Firefox下面显示的效果是一样的.
posted on 2006-03-19 11:56  LEEIGHT  阅读(136)  评论(0编辑  收藏  举报