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

Css Div浮动叠加层效果

2009-09-08 13:27 323 查看

效果图：

源代码：

<!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="#">头部层</a></div>
<div id="main">主题层<br /><a href="#">头部层</a></div>
<div id="sider">叠加层<br /><a href="#">头部层</a></div>
<div class="clear"></div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航