13章固定宽度布局剖析与制作

固定宽度布局页面首先在整体上进行<div>标记的分块，然后对各个块进行css定位，最后再在各个块中添加相应的内容。

.css的排版观念：
从网页内容的逻辑关系出发，区分出内容的层次和重要性，根据逻辑关系，把网页的内容使用div或其他适当的html标记组织好，再考虑网页的形式如何与内容相适应。

13章固定宽度布局剖析与制作 - 骡子 - stupidmule@126 的博客

布局表示为1-（（1-2）+1）-1

减号表示竖直方向排列括号为组合

2.单列布局

（1）放置第一个圆角框

html代码：

<//div>

<//div>

</div>
(2)设置圆角框的css的样式

（3）放置其他圆角框

将上面放置的圆角框再复制2个并分别设置id为content和footer分表代表内容和页脚

3.1-2-1固定宽度布局

1.准备html结构

2.设置css样式

3.绝对定位：

#header,#pagefooter,#container

{

margin:0 auto;

760px;

}

#container{

postition:relative;

}

#content{

position:absolute;

top:0;

left:0;

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;

760px;

}

#content{

float:left;

500px;

}

#content img{

float:left;

}

#side{

float:left;

260px;

}

#pagefooter{

cleat:both;

}

3.1-3-1固定宽度布局

#header,#pagefooter,#container{

margin:0 auto;

760px;

}

#navi{

float:left;

200px;

}

#content{

float:left;

360px;

}

#content img{

float:right;

}

#side{

float:left;

200px;

}

#pagefooter{

clear:both;

}

4.1-((1-2)+1)-1式布局

结构比较复杂，在写代码的时候，应该尽可能缩进排列代码，并加上易于理解的注释，标清标签的对应

html代码结构如下

<body>

这里省略固定结构的内容代码圆角框的实现代码

</div>

</div>

<div id="content">

这里省略固定结构的内容代码圆角框的实现代码

</div>

</div>

<div id="colums">

这里省略固定结构的内容代码圆角框的实现代码

</div>

这里省略固定结构的内容代码圆角框的实现代码

</div>

</div>

</div>

<div id="side">

这里省略固定结构的内容代码圆角框的实现代码

</div>

这里省略固定结构的内容代码圆角框的实现代码

</div>

</div>

</div><!--end of container->

这里省略固定结构的内容代码圆角框的实现代码

</div>

</div><！--end of pagefooter-->

</body>

css样式代码如下

#header，#pagefooter,#container{

margin:0 auto;

760px;

}

#container #content{

float:left;

560px;

}

#container #ontent #colums #col1,

#container #ontent #colums #col2{

float:left;

280px;

}

#container #ontent #colums #col1 img{//设置图像的文字环绕方式

float:left;

}

#container #ontent #colums #col2 img{

float:right;

}

#container #side{

float:left;

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中的第二个模块会由于向左浮动，会跑到第一个模块的右边

如图

13章固定宽度布局剖析与制作 - 骡子 - stupidmule@126 的博客
为了避免上面两种情况的发生，需要限制页面内容的宽度，此时要用到css中的两个属性 min-width和max-width

将最外层的header，container和pagefooter这3个div的宽度设置为100%，使它随着浏览器的窗口变化而变化，然后通过min-width和max

-width这两个属性的限制其最大和最小宽度，以保证不发生上面显示的两种错误情况。

#header,#pagefooter,#container{

margin:0 auto;

100%;

min-600px;

max-800px;

}

13章 固定宽度布局剖析与制作

13章固定宽度布局剖析与制作