Poor Eric >_<

ASP.NET 2.0 Newbie

原创 用DIV+CSS实现文字及面板阴影效果收藏

新一篇: JavaScript: 使用面向对象的技术创建高级 Web 应用程序 | 旧一篇: 用CSS控制FireFox的折行问题

效果如下:

ASP.NET 2.0服务器控件与组件开发高级编程
ASP.NET 2.0服务器控件与组件开发高级编程

 

实现代码:

<style type="text/css">
#sfContainer1 
{
    font
: bold 10pt simsun, tahoma;
    background-color
: #808080;
    height
: 30px;
    line-height
: 30px;
    padding-left
: 20px;
}
#sfFrontText 
{
    color
: #FFFFFF;
    position
: absolute;
    padding
: 0px;
    z-index
: 1;
}
#sfBackText 
{
    color
: #000000;
    position
: absolute;
    padding
: 2px 0px 0px 2px;
    z-index
: 0;
}
#sfRowSpacer1 
{
    height
: 20px;
}
#sfContainer2 
{
    height
: 150px;
    background-color
: #808080;
}
#sfFrontPanel 
{
    border
: 1px solid #C0C0C0;
    margin
: 20px 0px 0px 20px;
    background-color
: #FFFFFF;
    width
: 150px;
    height
: 60px;
    position
: absolute;
    z-index
: 1;
}
#sfBackPanel 
{
    border
: 1px solid #666666;
    margin
: 24px 0px 0px 24px;
    background-color
: #000000;
    width
: 150px;
    height
: 60px;
    position
: absolute;
    z-index
: 0;
}
</style>

<div id="sfContainer1">
    
<div id="sfFrontText">
        ASP.NET 2.0服务器控件与组件开发高级编程
</div>
    
<div id="sfBackText">
        ASP.NET 2.0服务器控件与组件开发高级编程
</div>
</div>
<div id="sfRowSpacer1">
</div>
<div id="sfContainer2">
    
<div id="sfFrontPanel">
    
</div>
    
<div id="sfBackPanel">
    
</div>
</div>

 

发表于 @ 2007年04月27日 12:36:00|评论(loading...)|编辑

新一篇: JavaScript: 使用面向对象的技术创建高级 Web 应用程序 | 旧一篇: 用CSS控制FireFox的折行问题

评论

#herostears 发表于2007-06-29 16:01:53  IP: 59.39.182.*
晕,这个样式简单的CSS就可以实现
发表评论  


登录
Csdn Blog version 3.1a
Copyright © Eric