固定宽度布局 页面首先在整体上进行<div>标记的分块，然后对各个块进行css定位，最后再在各个块中添加相应的内容。
.css的排版观念：
从网页内容的逻辑关系出发，区分出内容的层次和重要性，根据逻辑关系，把网页的内容使用div或其他适当的html标记组织好，再考虑网页的形式如何与内容相适应。
从网页内容的逻辑关系出发，区分出内容的层次和重要性，根据逻辑关系，把网页的内容使用div或其他适当的html标记组织好，再考虑网页的形式如何与内容相适应。
布局表示为1-((1-2)+1)-1
减号表示竖直方向排列 括号为组合
2.单列布局
(1)放置第一个圆角框
html代码：
<div class="rounded">
<h2></h2>
<div class="main">
<p> </p>
<//div>
<div class="footer">
<p> </p>
<//div>
</div>
(2)设置圆角框的css的样式
(3)放置其他圆角框
将上面放置的圆角框再复制2个 并分别设置id为content和footer分表代表内容和页脚
3.1-2-1固定宽度布局
1.准备html结构
2.设置css样式
3.绝对定位：
#header,#pagefooter,#container
{
margin:0 auto;
width:760px;
}
#container{
postition:relative;
}
#content{
position:absolute;
top:0;
left:0;
width:500px;
}
#side{
margin:0 0 0 500px;
}
带来的问题
当右边的side比左边的content高时，显示效果不会有问题，如果相反content>side，此时content栏已经脱离标准 流，对container这个div的额高度不产生影响，从而pagefooter的位置只根据右边的container高度即side栏栏确定，如果在 content中增加一个圆角框，如上图所示。
4.浮动法
#header,#pagefooter,#container{
margin:0 auto;
width:760px;
}
#content{
float:left;
width:500px;
}
#content img{
float:left;
}
#side{
float:left;
width:260px;
}
#pagefooter{
cleat:both;
}
3.1-3-1固定宽度布局
#header,#pagefooter,#container{
margin:0 auto;
width:760px;
}
#navi{
float:left;
width:200px;
}
#content{
float:left;
width:360px;
}
#content img{
float:right;
}
#side{
float:left;
width:200px;
}
#pagefooter{
clear:both;
}
4.1-((1-2)+1)-1式布局
html代码结构如下
<body>
<div id="header">
<div class="rounded">
这里省略固定结构的内容代码 圆角框的实现代码
</div>
</div><!--end of header-->
<div id="container">
<div id="content">
<div id="banner">
<div class="rounded">
这里省略固定结构的内容代码 圆角框的实现代码
</div>
</div><!--end of banner-->
<div id="colums">
<div id="col1">
<div class="rounded">
这里省略固定结构的内容代码 圆角框的实现代码
</div>
</div>
<div id="col2">
<div class="rounded">
这里省略固定结构的内容代码 圆角框的实现代码
</div>
</div>
</div>
<!--end of colums-->
</div><!--end of content-->
<div id="side">
<div class="rounded">
这里省略固定结构的内容代码 圆角框的实现代码
</div>
<div class="rounded">
这里省略固定结构的内容代码 圆角框的实现代码
</div>
</div><!--end of side-->
</div><!--end of container->
<div id="pagefooter">
<div class="rounded">
这里省略固定结构的内容代码 圆角框的实现代码
</div>
</div><！--end of pagefooter-->
</body>
css样式代码如下
#header，#pagefooter,#container{
margin:0 auto;
width:760px;
}
#container #content{
float:left;
width:560px;
}
#container #ontent #colums #col1,
#container #ontent #colums #col2{
float:left;
width:280px;
}
#container #ontent #colums #col1 img{/
/设置图像的文字环绕方式
float:left;
}
#container #ontent #colums #col2 img{
float:right;
}
#container #side{
float:left;
width:200px;
}
#pagefooter{
clear:both;
}
4.魔术布局
从13-28到13-29的转变
当浏览器窗口逐渐变窄，小于800的时候，右侧的3个数值排列的模块会自动移动到左侧的下面横向排列。当宽度小于600像素的时候，内容不再变窄，而是出现横向滚动条
1.先改变布局 1-((2-1)+1)-1 改造为1-((2-1)+1)-1只需要把banner从 columns的上面放到下面，注意一点，由于columns中的两列是浮动的，所以对banner增加clear的属性，消除两列的影响
2.原来右侧的为一个id为side的div会导致side中的div都是标准刘排列，这样即使side在banner下方也不能横排，见side有id选择器改为类选择器，然后将每一个右侧的3个魔术div都设置为.side类别
3.调整一下宽度，content的宽度是560 side宽度是200像素，现在将content的宽度调整为600像素，col1和col2的宽度调整为300像素，这样砸content的下面正好可以放下3个原来在右边的矩形。
修正缺陷
当浏览器窗口小于600像素的时候，横排已经放不下3个模块了，这是第三个模块被挤到了下面如图
相反地如果超过1000像素是side中的第二个模块会由于向左浮动，会跑到第一个模块的右边
如图
为了避免上面两种情况的发生，需要限制页面内容的宽度，此时要用到css中的两个属性 min-width和max-width
将最外层的header，container和pagefooter这3个div的宽度设置为100%，使它随着浏览器的窗口变化而变化，然后通过min-width和max
-width这两个属性的限制其最大和最小宽度，以保证不发生上面显示的两种错误情况。
#header,#pagefooter,#container{
margin:0 auto;
width:100%;
min-width:600px;
max-width:800px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
