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

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