DIV+CSS页面布局实例

中包含三个垂直排列的文章列表。 在midCol中包含三个垂直排列的文章列表。这三个文章列 中包含三个垂直排列的文章列表 表分别为“最新日志” 最新留言” 旅游日志” 表分别为“最新日志”、“最新留言”和“旅游日志” 。 1．设置文章列表的位置 ． 2．添加文章列表 ． 3．设置文章列表的样式 ．
制作个人网站首页的右边栏目（rightCol） 制作个人网站首页的右边栏目（rightCol）
中只包含相册一个栏目， 在leftCol中只包含相册一个栏目，命名为 中只包含相册一个栏目 命名为gallery。在相册 。 中包含相册栏目的栏目标题，使用h4标签嵌套 标签嵌套。 中包含相册栏目的栏目标题，使用 标签嵌套。相册中 的相片使用一个无序列表嵌套。 的相片使用一个无序列表嵌套。
制作个人网站首页的中间栏目（midCol） 制作个人网站首页的中间栏目（midCol）
固定宽度布局综合实例： 固定宽度布局综合实例：制作个人网站首页
本实例讲解如何制作个人网站的首页。内容包括： 本实例讲解如何制作个人网站的首页。内容包括： 分析个人网站首页的架构 分块制作个人网站首页
源自文库 个人网站首页构架分析
当网页设计师制作好个人网站的首页效果图， 当网页设计师制作好个人网站的首页效果图，交给页面制作人员 进行网页制作。 进行网页制作。页面制作人员只需要制作出与效果图一致并且 兼容主流浏览器的标准页面即可。 兼容主流浏览器的标准页面即可。
实现左中右浮动布局
1．实现左中右浮动布局 ． 2．制作 ．制作leftCol容器的背景 容器的背景 3．设置 ．设置midCol容器的背景图 容器的背景图 4．设置 ．设置rigthCol容器的背景图 容器的背景图
制作个人网站首页的左边栏目（leftCol） 制作个人网站首页的左边栏目（leftCol）
rightCol用于放置网页的导航，使用一个无序列表嵌入导航 用于放置网页的导航， 用于放置网页的导航 内容。 内容。
分块制作个人网站首页
在对效果图进行分析得到页面结构图后， 在对效果图进行分析得到页面结构图后，就可以进行分块制 作网页。制作网页的主要遵循从总体到部分， 作网页。制作网页的主要遵循从总体到部分，从上部到 下部的顺序。 下部的顺序。
制作个人网站首页的总体布局
制作个人网站首页首先从制作其总体布局开始， 制作个人网站首页首先从制作其总体布局开始，然后再细分 到每个块区。本实例的页面分为左中右三部分， 到每个块区。本实例的页面分为左中右三部分，使用左 中右浮动的布局方式。 中右浮动的布局方式。 1．建立网站文件夹 ． 2．构建整体网页的结构 ． 3．构建整体网页的布局 ．