第10章网页样式综合案例——灵活的电子相册概述.ppt

第10章 网页样式综合案例——灵活的电子相册 本章简介： 前面几章针对CSS设计中的几个专项分别进行了讲解，本章通过一个案例，对CSS的样式设计进行阶段复习。本章通过CSS对电子相册进行排版，进一步介绍CSS排版的方法。 搭建框架 10.1 阵列模式 10.2 单列模式 10.3 改进阵列模式 10.4 10.1　搭 建 框 架 首先来搭建页面的框架结构。搭建框架主要应考虑在实际页面中相册的具体结构和形式，包括照片整体排列的方法、用户可能的浏览情况、照片是否需要自动调整等。 首先对于阵列模式，不同的用户可能有不同的浏览器。显示器分辨率为“1024×768”的用户可能希望每行能显示5～6幅缩略图，而显示器分辨率为“1280×1024”的用户或许希望每行能容纳7～8幅，宽屏用户或许希望每行能显示更多。其次，即使在同一个浏览器下，用户也不一定能够全屏幕欣赏，这就需要照片能够自动排列和换行。如果使用table排版，是无论如何也不可能实现这一点的。 未设置CSS样式的效果 10.2　阵 列 模 式 首先来讨论阵列模式的实现方法，它主要要求照片能够根据浏览器的宽度自动调整每行的照片数，在CSS排版中正好可以用float属性来实现；另外考虑到需要排列整齐，而且照片有横向显示的也有纵向显示的，因此将块扩大为一个正方形，并且给照片加上边框。 以阵列模式显示 10