本篇學習資料講解：
通過css對電子相冊進行排版 和 側面強調“盒子模型、標准流、浮動和定位”的重要性。
先來看看"雙向聯動模式"的電子相冊圖：
{鼠標指針經過某張圖片（或者某段文字）時，相應的文字（或者相應的某張圖片）會以特殊樣式顯示}
以上部分的介紹將出現在（12）用css設計電子相冊 {下}，這里只是提前感受。
1、搭建基本框架
搭建框架主要應考慮在實際頁面中相冊的具體結構和形式，包括照片整體排列的方法，用戶可能的瀏覽情況，照片是否需要自動調整，等等。
首先，對於陣列模式，不同的用戶可能有不同的瀏覽器。顯示器分辨率為“1280*720”的用戶可能希望每行能顯示5~6幅縮略圖，而顯示器分辨率為“1366*768”的用戶或者希望每行能容納7~8幅，寬屏用戶或許希望每行能顯示更多。其次，即使在同一個瀏覽器下，用戶也不一定能夠全屏幕欣賞，這就需要照片能夠自動排列和換行。如果使用<table>排版是無論如何也不可能實現這一點的。
對於詳細信息的模式，照片的信息通常環繞在一側，設計者往往不願意在重新設計整體的框架，而希望在陣列框架的基礎上，通過直接修改css文件就能實現整體的變換。這也是<table>排版所不可能實現的。
考慮到以上的要求，對每一幅照片及其它的相關信息都用一個<div>塊進行分離，並且根據照片的橫、豎來設置相應的css類別，代碼如下：
“簡單案例”：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>自動改變每行放置的照片數量</title>
<link rel="stylesheet" href="array.css"/>
</head>
<body>
<div class="pic ls" id="p1">
<a href="m01.jpg" class="tn"> <img src="photo1/s01.jpg"> </a>
<ul>
<li class="title">坑塘村*菊</li>
<li class="catno">trip01 </li>
<li class="price">￥79.9</li>
</ul>
</div>
<div class="pic ls" id="p2">
<a href="m02.jpg" class="tn"> <img src="photo1/s02.jpg"> </a>
<ul>
<li class="title">坑塘村*橋</li>
<li class="catno">trip02</li>
<li class="price">￥59.7</li>
</ul>
</div>
<div class="pic pt" id="p3">
<a href="m03.jpg" class="tn"> <img src="photo1/s03.jpg"> </a>
<ul>
<li class="title">坑塘村*樹</li>
<li class="catno">trip03</li>
<li class="price">￥48.6</li>
</ul>
</div>
<div class="pic pt" id="p4">
<a href="m04.jpg" class="tn"> <img src="photo1/s04.jpg"> </a>
<ul>
<li class="title">坑塘村*影</li>
<li class="catno">trip04</li>
<li class="price">￥90.5</li>
</ul>
</div>
<div class="pic ls" id="p5">
<a href="m05.jpg" class="tn"> <img src="photo1/s05.jpg"> </a>
<ul>
<li class="title">坑塘村*路</li>
<li class="catno">trip05</li>
<li class="price">￥74.1</li>
</ul>
</div>
<div class="pic pt" id="p6">
<a href="m06.jpg" class="tn"> <img src="photo1/s06.jpg"> </a>
<ul>
<li class="title">坑塘村*花</li>
<li class="catno">trip06</li>
<li class="price">￥88.2</li>
</ul>
</div>
<div class="pic ls" id="p7">
<a href="m07.jpg" class="tn"> <img src="photo1/s07.jpg"> </a>
<ul>
<li class="title">坑塘村*天</li>
<li class="catno">trip07</li>
<li class="price">￥79.9</li>
</ul>
</div>
<div class="pic pt" id="p8">
<a href="m08.jpg" class="tn"> <img src="photo1/s08.jpg"> </a>
<ul>
<li class="title">坑塘村*井</li>
<li class="catno">trip08</li>
<li class="price">￥52.9</li>
</ul>
</div>
</body>
</html>
以上是html部分的基本框架，框架中每個<div>塊設置了很多不同的css類別，接下來下面一一說明。
（1）在<div>塊屬性中的類別，“pic”主要用於聲明所有含有照片的<div>塊，與其他不含照片的<div>塊區別。
（2）在“pic”類別后的照片類別，有的是“pt”，有的是“ls”,其中 pt （portrait）指豎直方向的照片，即照片的高度大於寬度，而 ls （landscape）指水平方向的照片。
（3）類別 “tn”指代縮略圖的超鏈接，用於區別網頁中可能出現的其他超鏈接。而<ul>標記下的各個<li>標記都加上相應的css類別，用於詳細信息下的設定。
這樣基本的框架就搭建好了，使用相同的方式，就可以增加更多的<div>了，每一個<div>的格式都是完全相同的。只需要按照片是橫向的還是豎向的倆設置類別並輸入相關文字信息就可以了。此時沒有設置什么css樣式的圖：
上圖中由於還沒有設置任何樣式，因此所有內容都從上到下依次排列。
2、制作“陣列模式”電子相冊。
先來了解“陣列模式”的實現方法，它主要要求照片能夠根據瀏覽器的寬度自動調整每行的照片數，在css排版中正好刻印使用 float屬性倆實現。另外，考慮到需要排列整齊，而且照片有橫向顯示的也有豎向顯示的，因此將塊擴大為一個正方形，並且給照片加上邊框。先來看圖再說：
當瀏覽器改變寬度時，一行可以顯示更多的照片
下面給前面介紹的“簡單案列”添加css部分的修飾 ：
{1}實現整體結構：
div.pic{ /*將每個div設置固定高度和寬度,添加左浮動,用margin使相鄰div之間隔開*/ height:160px; width:160px; /*每幅圖片塊的大小*/ float:left; margin:5px; } div.pic img{ /*將div中的img元素，即圖像的邊框設置為none,這是因為圖像在鏈接中,如果不取消邊框就會出現默認的粗邊框，影響美觀。*/ border:none; }
效果圖：
1、/*將每個div設置固定高度和寬度,添加左浮動,用margin使相鄰div之間隔開*/
2、/*將div中的img元素，即圖像的邊框設置為none,這是因為圖像在鏈接中,如果不取消邊框就會出現默認的粗邊框，影響美觀。*/
{2}添加背景“白色”圖，取消<ul>信息：
div.ls{ background:url(framels.jpg) no-repeat center; /*水平照片的背景*/ } div.pt{ background:url(framept.jpg) no-repeat center; /*豎直照片的背景*/ } div.ls img{ /*水平照片*/ margin:0px; height:90px; width:135px; } div.pt img{ /*豎直圖片*/ margin:0px; height:135px; width:90px; } div.pic ul{ /*陣列模式，不顯式照片信息*/ display:none; }
/*設置圖像的寬度，如果確認圖像的大小恰好是90像素和135像素，就可以不用設置。這里設置的作用是如果圖像的大小不是正好這么大，可以強制以正確的大小顯示*/
效果圖：
3、/*為寬度大於高度的圖片增加一個帶有陰影的邊框：橫向的90*125像素*/
4、/*為寬度大於高度的圖片增加一個帶有陰影的邊框：橫向的90*125像素*/ /*為高度大於寬度的圖片增加一個帶有陰影的邊框：豎向的135*90像素*/
5、/*設置圖像的寬度，如果確認圖像的大小恰好是90像素和135像素，就可以不用設置。這里設置的作用是如果圖像的大小不是正好這么大，可以強制以正確的大小顯示*/
6、目前在陣列模式，不需要顯示照片的具體文字信息，因此將<ul>標記的display設置為none。
{3}調整超鏈接塊位置，增加鼠標指針經過時的背景圖：
div.ls a{ display:block; /*定義為塊元素*/ padding:34px 14px 36px 11px; /*將超鏈接區域擴大到整個背景塊*/ } div.pt a{ display:block; /*定義為塊元素*/ padding:11px 36px 14px 34px; /*將超鏈接區域擴大到整個背景塊*/ } div.ls a:hover{ /*鼠標指針經過時修改背景圖片*/ background:url(framels_hover.jpg) no-repeat center; /*為寬度大於高度的“水平方向”圖片增加一個橘色背景：橫向的90*125像素*/ } div.pt a:hover{ background:url(framept_hover.jpg) no-repeat center /*為高度大於寬度的“豎直方向”圖片增加一個橘色背景：橫向的135*90像素*/ }
/*設置圖像的寬度，如果確認圖像的大小恰好是90像素和135像素，就可以不用設置。這里設置的作用是如果圖像的大小不是正好這么大，可以強制以正確的大小顯示*/
”陣列模式“效果圖：
7、將超鏈接設置為塊元素，並且利用padding值將作用范圍擴大到整個div塊“160px*160px”范圍，同時通過調整4個值，實現照片正好放到背景圖的白色矩形區域中的效果。
8、考慮到超鏈接的凸出的效果，再分別為鼠標指針經過照片是制作兩幅橘黃色的背景，一幅用於水平照片，一張用於豎直照片。
3、制作“單列模式”電子相冊
先來看圖再說：
上圖中，所有照片豎直排列，每張照片的右側顯示關於該照片的詳細信息。
下面繼續引用前面介紹的“簡單案例”html部分的結構，css部分再添加部分css的修飾。（添加的部分css修飾用粉紅色表明）
{1}將圖片的超鏈接設置為向左浮動，照片信息不隱藏：
div.pic{ width:450px; height:160px; margin:5px; } div.pic img{ border:none; } div.pic a.tn{ float:left; } div.ls{ background:url(framels.jpg) no-repeat left; /* 水平相片的背景 */ } div.pt{ background:url(framept.jpg) no-repeat left; /* 豎直相片的背景 */ } div.ls img{ /* 水平相片 */ /*之所以將圖片設置固定的寬度、高度，是為了配合剛添加的背景圖，讓圖片看起來更美觀*/ margin:0px; height:90px; width:135px; } div.pt img{ /* 豎直相片 */ margin:0px; height:135px; width:90px; } div.ls a{ display:block; padding:34px 14px 36px 11px; /* 將超鏈接區域擴大到整個背景塊 */ } div.pt a{ display:block; padding:11px 36px 14px 34px; /* 將超鏈接區域擴大到整個背景塊 */ } div.ls a:hover{ background:url(framels_hover.jpg) no-repeat center; } div.pt a:hover{ background:url(framept_hover.jpg) no-repeat center; }
“添加的部分css修飾用粉紅色表明”解釋：由於div 中的a元素設置為左浮動，因此它后面的列表文字就環繞它，從而顯示在其右側了。
效果圖：
{2}設置<ul>列表的整體位置，邊框等屬性；針對三個項目列表<li>添加各自的樣式：
div.pic ul{
margin:0 0 0 170px;
padding:0 0 0 0.5em;
background:#dceeff;
border:2px solid #a7d5ff;
font-size:12px;
list-style:none;
font-family:Arial,Helvetica,sans-serif;
position:relative;
top:50px;
}
div.pic li{
line-height:1.2em;
margin:0;
padding:0;
}
div.pic li.title{
font-weight:bold;
padding-top:0.4em;
padding-bottom:0.2em;
border-bottom:1px solid #a7d5ff;
color:#0044586;
}
div.pic li.canto{
color:#0068c9;
margin:0 2px 0 13em;
padding-left:5px;
border-left:1px solid #a7d5ff;
}
div.pic li.price{
color:#0068c9;
font-style:italic;
margin::-1.2em 2px 0 18em;
padding-left:5px;
border-left:1px solid #a7d5ff;
}
效果圖：
到這里基本的方法已經介紹完了。