實(shí)例作品
<html>
<head>
<title>電子相冊(cè)</title>
<link rel="stylesheet" href="11-6catalog.css">
</head>
<body>
<div class="pic ls">
<a href="photo/01.jpg" class="tn"><img src="photo/thumb/01.jpg"></a>
<ul>
<li class="title">鳴沙山</li>
<li class="catno">Trip01</li>
<li class="price">¥79.9</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/02.jpg" class="tn"><img src="photo/thumb/02.jpg"></a>
<ul>
<li class="title">鳴沙山的植被</li>
<li class="catno">Trip02</li>
<li class="price">¥59.7</li>
</ul>
</div>
<div class="pic pt">
<a href="photo/03.jpg" class="tn"><img src="photo/thumb/03.jpg"></a>
<ul>
<li class="title">莫高窟的花</li>
<li class="catno">Trip03</li>
<li class="price">¥48.6</li>
</ul>
</div>
<div class="pic pt">
<a href="photo/04.jpg" class="tn"><img src="photo/thumb/04.jpg"></a>
<ul>
<li class="title">影子</li>
<li class="catno">Trip04</li>
<li class="price">¥90.5</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/05.jpg" class="tn"><img src="photo/thumb/05.jpg"></a>
<ul>
<li class="title">高昌古城</li>
<li class="catno">Trip06</li>
<li class="price">¥74.1</li>
</ul>
</div>
<div class="pic pt">
<a href="photo/06.jpg" class="tn"><img src="photo/thumb/06.jpg"></a>
<ul>
<li class="title">磕頭機(jī)</li>
<li class="catno">Trip07</li>
<li class="price">¥88.2</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/07.jpg" class="tn"><img src="photo/thumb/07.jpg"></a>
<ul>
<li class="title">魔鬼城</li>
<li class="catno">Trip07</li>
<li class="price">¥79.9</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/08.jpg" class="tn"><img src="photo/thumb/08.jpg"></a>
<ul>
<li class="title">路邊的狗尾巴草</li>
<li class="catno">Trip08</li>
<li class="price">¥52.9</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/09.jpg" class="tn"><img src="photo/thumb/09.jpg"></a>
<ul>
<li class="title">217國(guó)道</li>
<li class="catno">Trip09</li>
<li class="price">¥78.4</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/10.jpg" class="tn"><img src="photo/thumb/10.jpg"></a>
<ul>
<li class="title">國(guó)道旁的羊</li>
<li class="catno">Trip10</li>
<li class="price">¥76.3</li>
</ul>
</div>
<div class="pic pt">
<a href="photo/11.jpg" class="tn"><img src="photo/thumb/11.jpg"></a>
<ul>
<li class="title">217國(guó)道的天</li>
<li class="catno">Trip11</li>
<li class="price">¥49.9</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/12.jpg" class="tn"><img src="photo/thumb/12.jpg"></a>
<ul>
<li class="title">石頭堆</li>
<li class="catno">Trip12</li>
<li class="price">¥50.2</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/13.jpg" class="tn"><img src="photo/thumb/13.jpg"></a>
<ul>
<li class="title">喀納斯河</li>
<li class="catno">Trip13</li>
<li class="price">¥82.5</li>
</ul>
</div>
<div class="pic pt">
<a href="photo/14.jpg" class="tn"><img src="photo/thumb/14.jpg"></a>
<ul>
<li class="title">臥龍灣</li>
<li class="catno">Trip14</li>
<li class="price">¥95.6</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/15.jpg" class="tn"><img src="photo/thumb/15.jpg"></a>
<ul>
<li class="title">禾木橋</li>
<li class="catno">Trip15</li>
<li class="price">¥82.4</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/16.jpg" class="tn"><img src="photo/thumb/16.jpg"></a>
<ul>
<li class="title">禾木的晨光</li>
<li class="catno">Trip16</li>
<li class="price">¥89.5</li>
</ul>
</div>
<div class="pic pt">
<a href="photo/17.jpg" class="tn"><img src="photo/thumb/17.jpg"></a>
<ul>
<li class="title">朵朵葵花向太陽(yáng)</li>
<li class="catno">Trip17</li>
<li class="price">¥83.4</li>
</ul>
</div>
<div class="pic ls">
<a href="photo/18.jpg" class="tn"><img src="photo/thumb/18.jpg"></a>
<ul>
<li class="title">額爾齊斯河</li>
<li class="catno">Trip18</li>
<li class="price">¥72.1</li>
</ul>
</div>
<div class="pic pt">
<a href="photo/19.jpg" class="tn"><img src="photo/thumb/19.jpg"></a>
<ul>
<li class="title">火燒石</li>
<li class="catno">Trip19</li>
<li class="price">¥73.3</li>
</ul>
</div>
<div class="pic pt">
<a href="photo/20.jpg" class="tn"><img src="photo/thumb/20.jpg"></a>
<ul>
<li class="title">甜就一個(gè)字</li>
<li class="catno">Trip20</li>
<li class="price">¥69.5</li>
</ul>
</div>
</body>
</html>