（11）用css设计电子相册{上}老罗江湖|橘色背景图片_越野车

通过css对电子相册进行排版和侧面强调“盒子模型、标准流、浮动和定位”的重要性。

先来看看"双向联动模式"的电子相册图：

{鼠标指针经过某张图片（或者某段文字）时，相应的文字（或者相应的某张图片）会以特殊样式显示}

以上部分的介绍将出现在（12）用css设计电子相册{下}，这里只是提前感受。

1、搭建基本框架

搭建框架主要应考虑在实际页面中相册的具体结构和形式，包括照片整体排列的方法，用户可能的浏览情况，照片是否需要自动调整，等等。

首先，对于阵列模式，不同的用户可能有不同的浏览器。显示器分辨率为“1280*720”的用户可能希望每行能显示5~6幅缩略图，而显示器分辨率为“1366*768”的用户或者希望每行能容纳7~8幅，宽屏用户或许希望每行能显示更多。其次，即使在同一个浏览器下，用户也不一定能够全屏幕欣赏，这就需要照片能够自动排列和换行。如果使用

排版是无论如何也不可能实现这一点的。

对于详细信息的模式，照片的信息通常环绕在一侧，设计者往往不愿意在重新设计整体的框架，而希望在阵列框架的基础上，通过直接修改css文件就能实现整体的变换。这也是

排版所不可能实现的。

“简单案例”：

以上是html部分的基本框架，框架中每个

块设置了很多不同的css类别，接下来下面一一说明。

（2）在“pic”类别后的照片类别，有的是“pt”，有的是“ls”,其中pt（portrait）指竖直方向的照片，即照片的高度大于宽度，而ls（landscape）指水平方向的照片。

（3）类别“tn”指代缩略图的超链接，用于区别网页中可能出现的其他超链接。而

标记都加上相应的css类别，用于详细信息下的设定。
上图中由于还没有设置任何样式，因此所有内容都从上到下依次排列。
2、制作“阵列模式”电子相册。
先来了解“阵列模式”的实现方法，它主要要求照片能够根据浏览器的宽度自动调整每行的照片数，在css排版中正好刻印使用float属性俩实现。另外，考虑到需要排列整齐，而且照片有横向显示的也有竖向显示的，因此将块扩大为一个正方形，并且给照片加上边框。先来看图再说：
当浏览器改变宽度时，一行可以显示更多的照片
下面给前面介绍的“简单案列”添加css部分的修饰：
{1}实现整体结构：
div.pic{/*将每个div设置固定高度和宽度,添加左浮动,用margin使相邻div之间隔开*/height:160px;width:160px;/*每幅图片块的大小*/float:left;margin:5px;}div.picimg{/*将div中的img元素，即图像的边框设置为none,这是因为图像在链接中,如果不取消边框就会出现默认的粗边框，影响美观。*/border:none;}效果图：
1、/*将每个div设置固定高度和宽度,添加左浮动,用margin使相邻div之间隔开*/
2、/*将div中的img元素，即图像的边框设置为none,这是因为图像在链接中,如果不取消边框就会出现默认的粗边框，影响美观。*/
{2}添加背景“白色”图，取消

THE END