html(4)_html+css+javescript_网页设计自学基础

3、最简单的框架为例，页面由导航条(banner)、主体内容(content)、菜单导航(links)和脚注(footer)几个部分组成，各个部分分别用自己的id来标识，如图14.1所示。614.1.2设计各块的位置当页面的内容已经确定后，则需要根据内容本身考虑整体的页面布局类型，如是单栏、双栏还是三栏等，这里采用的布局如图14.2所示。714.1.3用CSS定位下面首先对body标记与container父块进行设置，CSS代码如下所示。body{margin:10px;text-align:center;}#container{width:800p

4、x;border:1pxsolid#000000;padding:10px;}上面的代码设置了页面的边界、页面文本的对齐方式，以及父块的宽度为800px。下面来设置banner板块，其CSS代码如下所示。#banner{margin-bottom:5px;padding:10px;background-color:#a2d9ff;border:1pxsolid#000000;text-align:center;}这里设置了banner板块的边界、填充、背景颜色等。814.1.3用CSS定位下面利用float方法将content移动到左侧，link

5、s移动到页面右侧，这里分别设置了这两个板块的宽度和高度，读者可以根据需要自己调整。#content{float:left;width:570px;height:300px;border:1pxsolid#000000;text-align:center;}#links{float:right;width:200px;height:300px;border:1pxsolid#000000;text-align:center;}由于content和links对象都设置了浮动属性，因此footer需要设置clear属性，使其不受浮动的影响，代码如下所示

6、。#footer{clear:both;//*不受float影响*//padding:10px;border:1pxsolid#000000;text-align:center;}-->这样页面的整体框架便搭建好了，这里需要指出的是content块中不能放宽度太长的元素，如很长的图片或不折行的英文等，否则links将再次被挤到content下方。914.2固定宽度布局本节重点介绍如何使用CSS+Div创建固定宽度布局，对于包含很多大图片和其他元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局是处理这种内容的最好方法。1014.2.1

7、一列固定宽度一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定像素。下面举例说明一列固定宽度的布局方法，具体操作步骤如下。(1)在HTML文档的与之间相应的位置输入定义的CSS样式代码，如下所示。1114.2.1一列固定宽度(2)然后在HTML文档的与之间的正文中输入以

8、下代码，给div使用了layer作为id名称。1列固定宽度