七 CSS+DIV布局方法
1.CSS布局理念
1.将页面用div分块
再利用CSS布局页面时，首先要有一个整体的规划。以最简单的框架为例，页面由banner（导航条）、主题内容（content）、菜单导航（links）和脚注（footer）几个部分组成，各个部分分别用自己的id来识别。
其中页面中的HTML框架代码如下：
<div id=”container”>container
<div id=”banner”>banner</div>
<div id=”content”>content</div>
<div id=”links”>links</links>
<div id=”footer”>footer</div>
</div>
实例中每个版块都是<div>，这里直接使用CSS中的id来表示各个板块，页面的Div块都属于container。一般的Div排班都会在最外面加上这个父Div，便于对页面的整体进行调整。对于每个Div块，还可以再加入各种元素或行内元素。
2.用CSS定位
整理好页面的框架后，就可以利用CSS对各个板块进行定位，实现对页面的整体规划。
下面先对body标记与container父块进行设置，代码如下：
body {
margin:20px;
text-align:center;
}
#container{
width:500px;
border:2px solid #FF9698;
padding: 20px;
}
上述代码设置了页面的边界、页面文本的对齐方式，以及父块的宽度为 500px。下面来设置banner板块
#banner{
margin-bottom:5px;
padding:15px;
background-color:#FF9698;
border:2px solid #FF9698;
text-align:center;
}
这里设置了导航条边界、填充、背景颜色等。
#content{
float:left;
width:600px;
height:400px;
border:1px solid #FF9698;
text-align:center;
}
#links{
float:right;
width:300px;
height:400px;
border:1px solid #FF9698;
text-align:center;
#footer{
clear:both;/*不受float影响*/
padding:20px;
border:2px solid #FF9698;
text-align:center;
}
-->
这样整体框架便搭好了。
2.固定宽度布局
1.一列固定宽度
一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定像素。
- 在HTML文档的<head>与</head>之间相应的位置输入定义的CSS样式代码；
<style>
#content{
background-color:#F9FD6D;
border:5px solid #B3F83C;
width:600px;
height:400px;
}
</style>
- 然后在HTML文档中的<body>与</body>之间的正文中输入以下代码，给div使用了layer作为id的名称。
<div id=”content”>1固定宽度</div>
2.两列固定宽度
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<style>
#left {
background-color:#F7A1A3;
border:1px solid #ff3399;
width:300px;
height:300px;
float:left;
}
#right {
background-color:#1CF895;
border:1px solid #ff3399;
width:300px;
height:300px;
float:left;
}
</style>
</head>
<title></title>
<body>
<div id=”left”>左列</div>
<div id=”right”>右列</div>
</body>
</html>
3.圆角框
3.可变宽度布局
1.一列自适应
<!doctype html>
<html>
<head>
<meta charset=”uft-8”>
<title>1列自适应</title>
<style>
#Layer {background-color:#FF3F42;border:3px solid #27FF1E;
width:60%;height:60%;}
</style>
</head>
<body>
<div id=”Layer”>1列自适应</div>
</body>
</html>
2.两列自适应
3.两列右列自适应
在实际应用中，有时候需要左栏固定宽度而右栏根据浏览器窗口大小自动适应，在CSS中只需要设置左栏的宽度即可。
4.三类浮动中间宽度自适应
5.三行两列居中高度自适应布局
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>三行两列居中高度自适应</title>
<style type=”text/css”>
#header{width:776px; margin-right: auto; margin-left:autp; padding:0px;
background: #B6D508; height:60px; text-align:left; }
#contain{ margin-right:auto; margin-left:auto; width: 776px; }
#mainbg{width:776px; padding:0px; background:#60A179; float:left;}
#right{float:right; margin: 2px 0px 2px 0px;padding:0px; widrh:574px;
background:#ccd2de; text-align:left;}
#left{float:left; margin: 2px 2px 0px 0px;padding:0px; widrh:200px;
background:#F2F3F7; text-align:left;}
#footer{clear:both; width:776px; margin-right: auto; margin-left: auto;
padding:0px;background:#B6D508; height:60px;}
.text{margin:0px; padding:20px;}
</style>
<body>
<div id=”header”>页眉</div>
<div id=”contain”>
<div id=”mainbg”>
<div id=”right”>
<div class=”text”>右
<div id=”header”>页眉</div>
<div id=”contain”>
<div id=”mainbg”>
<div id=”right”>
<div class=”text”>右
<p> </p>
<p> </p>
<p> </p>
<p></p>
<p></p>
</div>
</div>
<div id=”left”>
<div class=”text”>左</div>
</div>
</div>
</div>
<div id=”footer”>页脚</div>
</div></div>
<div id=”left”>
<div class=”text”>左</div>
</div>
</div>
</div>
<div id=”footer”>页脚</div>
@欢迎大家指出问题，谢谢
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
