第12章 div+css美化与布局实战

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,DIV+CSS,网页样式与布局,第,12,章,div+css,美化与布局实战,本章简介,在上一章中，电子相册中用,CSS,控制实现了两种不同的相册模式，而本身的,HTML,结构却没有任何修改。本章将继续拓展这种思路，以网上常见的博客首页为例，用,CSS,实现更绚丽的网面变幻。同样保持页面的,HTML,不变，通过分别调用,3,个外部,CSS,文件，实现,3,个完全不同的页面效果，即蓝色经典、清明上河图和交河故城。,(,实例文件：,12-1.html),蓝色经典效果图,清明上河图效果,交河故城效果,框架搭建,首先根据博客的内容需要对整体框架进行合理规划。最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。因此，整体上考虑将,HTML,分成,4,个大的,div,块。,框架搭建,在整体内容框架的基础上,#parameter,与,#,mainsupport,两个部分又包含各个小的子块。例如，热门博客、最近更新、最新申请、推荐文章和最新日志等，因此这两个块还需要加入子,div,块。,实例：蓝色经典,页面整体上为固定宽度且居中的样式，最上方为页面的,banner,和导航菜单，,#parameter,的各个项目在页面主体的右侧，,#,mainsupport,在页面中间。,