您的位置：首页 > Web前端 > CSS

Css Div浮动叠加层效果

2009-06-05 18:19 260 查看

Css Div浮动叠加层效果，也不知道怎么描述这个效果，下面我做了个简单例子，兼容FF,IE浏览器。
还是先来看看网上常见应用到的例子：

截图中登陆所在层的浮动叠加层效果。
浮动叠加层效果本站例子演示浏览
下面是全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css Div浮动叠加层效果</title>
<style type="text/css">
body {
    margin : 0;
    padding : 0;
    font-size:12px;
}
#wrap {
    position : relative;
    width : 900px;
    margin : 30px auto;
    background : #ddd;
}
#header {
    float : left;
    width : 900px;
    height : 150px;
    background : url(banner.jpg) no-repeat 50% 10px;
}
#main {
    float : left;
    width : 590px;
    height : 380px;
    margin : 10px 0 20px 10px;
    border : 1px solid #999;
    background : #fff;
}
#sider {
    float : right;
    position : absolute;
    width : 260px;
    height : 560px;
    top : -20px;
    right : 18px;
    border : 2px solid #03c;
    background-color: #F2F2F2;
}
.clear {
    clear : both;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="header">头部层 <a href="http://www.365css.cn">http://www.365css.cn</a></div>
    <div id="main">主题层<br /><a href="http://www.365css.cn">http://www.365css.cn</a></div>
    <div id="sider">叠加层<br /><a href="http://www.365css.cn">http://www.365css.cn</a></div>
    <div class="clear"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航