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

web全栈笔记之DIV+CSS布局

2017-04-28 19:35 148 查看

DIV+CSS布局实际是将页面模块化的过程

大致可分为

header

内容1 内容2

footer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div+css</title>
<style>
#container {
width:980px;
margin:0px auto;/*主面板DIV居中*/
}
/*顶部面板样式*/
#header {
width:100%;
height:150px;
border:1px #F00 solid;
}
/*底部面板样式*/
#footer {
width:100%;
height:100px;
border:1px #F00 solid;
}
#main1{
float:left;
width:20%;
height:100%;
}
#main2 {
float:left;
width:80%;
height:100%;
}
</style>
</head>
<body>
<div id="Container">
<div id="header">顶部（header）</div>
<div id="main1">主体部分（main1）</div>
<div id="main2">主体部分（main2）</div>
<div id="footer">底部（footer）</div>
</div>
</body>
</html>

可见实现了内容模块分离

现在要将footer(因为采取float，浮动的意思是其页面的其他元素在布局的时候察觉不到其存在)与内容分开我个人选择绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div+css</title>
<style>
#container {
width:980px;
margin:0px auto;/*主面板DIV居中*/
}
/*顶部面板样式*/
#header {
width:100%;
height:150px;
border:1px #F00 solid;
}
/*底部面板样式*/
#footer {
position:absolute;
width:100%;
height:100px;
bottom:0px;
border:1px #F00 solid;
}
#main1{
border:1px #F00 solid;
width:20%;
height:680px;
float:left;
}
#main2 {
border:1px #F00 solid;
width:75%;
height:680px;
float:right;
}
</style>
</head>
<body>
<div id="Container">
<div id="header">顶部（header）</div>
<div id="main1">主体部分（main1）</div>
<div id="main2">主体部分（main2）</div>
<div id="footer">底部（footer）</div>
</div>
</body>
</html>

以上就是对div+css布局的一些理解和应用

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

标签：

相关文章推荐

新的分享

章节导航