11-1.html
<html>
<head>
<style type="text/css">
<!--
body {
  margin:0px;
  font-size:13px;
  font-family:Arial;
}
#container{
  position:relative;
  width:100%;
}
#banner{
  height:80px;
  border:1px solid #000000;
  text-align:center;
  background-color:#a2d9ff;
  padding:10px;
  margin-bottom:2px;
}
#content{
  float:left;
  text-align:center;
  padding-right:200px;  /* 内容往回挤200px */
}
#links{
  float:right;
  width:200px;
  border:1px solid #000000;
  margin-left:-200px;    /* 强行往左拉回200px */
  text-align:center;
}
#footer{
  clear:both;        /* 不受float影响 */
  text-align:center;
  height:30px;
  border:1px solid #000000;
}
-->
</style>
<title>CSS排版</title><body>
<div id="container">
  <div id="banner">banner</div>
  <div id="content">
    <div class="blog">
      <div class="date">date</div>
      <div class="blogcontent">
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
content content content content content content content content content content<br>
      </div>
    </div>
    <div class="others">others</div>
  </div>
  <div id="links">
    <div class="calendarhead">links<br>links<br>links<br>links</div>
    <div class="calendartable">links<br>links<br>links<br>links</div>
    <div class="side">links<br>links<br>links<br>links</div>
    <div class="syndicate">links<br>links<br>links<br>links</div>
    <div class="friends">links<br>links<br>links<br>links</div>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>
11-2.html
<html>
<head>
<title>个人主页</title>
<style>
<!--
body, html{
  margin:0px; padding:0px;
  text-align:center;
  background:#e9fbff;
}
#container{
  position: relative;
  margin: 0 auto;
  padding:0px;
  width:700px;
  text-align: left;
  background:url(container_bg.jpg) repeat-y;
}
#banner{
  margin:0px; padding:0px;
}
#links{
  font-size:12px;
  margin:-18px 0px 0px 0px;
  padding:0px;
  position:relative;
}
#links ul{
  list-style-type:none;
  padding:0px; margin:0px;
  width:700px;
}
#links ul li{
  text-align:center;
  width:100px;
  display:block;
  float:left;
}
#links br{
  display:none;
}
#leftbar{
  background-color:#d2e7ff;
  text-align:center;
  font-size:12px;
  width:150px; float:left;
  padding-top:20px;
  padding-bottom:30px;
  margin:0px;
}
#leftbar p{
  padding-left:12px; padding-right:12px;
}
#content{
  font-size:12px;
  float:left; width:550px;
  padding:5px 0px 30px 0px;
  margin:0px;
  background:url(bg1.jpg) no-repeat bottom right;
}
#content p, #content h4{
  padding-left:20px; padding-right:15px;
}
#footer{
  clear:both; font-size:12px;
  width:100%;
  padding:3px 0px 3px 0px;
  text-align:center;
  margin:0px;
  background-color:#b0cfff;
}
.pic1{
  border:1px solid #00406c;
}
p.leftcontent{
  text-align:left;
  color:#001671;
}
h4{
  text-decoration:underline;
  color:#0078aa;
  padding-top:15px;
  font-size:16px;
}
-->
</style>
     </head>
<body>
<div id="container">
  <div id="banner">
    <img src="banner1.jpg" border="0">
  </div>
  <div id="links">
    <ul>
      <li>首页</li>
      <li>心情日记</li>
      <li>Free</li>
      <li>一起走到</li>
      <li>从明天起</li>
      <li>纸飞机</li>
      <li>下一站</li>
    </ul>
    <br>
  </div>
  <div id="leftbar">
    <p><img src="selfpic1.jpg" class="pic1">
    <br>我的日记本</p>
    <p class="leftcontent">秋天过半的时候，我搭上了一列火车。我不知道它将要去往的方向，那铁路看上去无休无止地延伸着。</p>
    <p><img src="selfpic2.jpg" class="pic1">
    <br>心情轨迹</p>
    <p class="leftcontent">无意间发见，白云的上面，长着许许多多的蒲公英。它在我面前迅速的长大，风吹过的时候，纷纷升起，飞向无数的远方。</p>
  </div>
  <div id="content">
    <h4>介绍</h4>
    <p>火车经过一个又一个站台，窗外漫卷的蒲公英向我微笑着。我逐渐记起了自己旅行的目的，一直都在下一站的前方。火车缓缓地驶入站台，汽笛声响的那一瞬间，车厢变得透明，我看见，自己和这长长的列车一起，正在漫天飘舞着的蒲公英中飞行。</p>
    <h4>转播设备</h4>
    <p>我现在是在万泉河附近，我们的转播车就在旁边不远的地方，师傅马上将会把车开过来。我们的转播设备非常的先进，具体怎么先进我也说不清，师傅比我清楚，总之就是特别特别先进。好，现在师傅已经把转播车开过来了。……
    </p>
    <h4>旅程</h4>
    <p>夕阳 染红蓝天<br>
    带走 美好的一天<br>
    风 吹过大地<br>
    炫美的世界<br>
    <br>
    霞光 点亮星辰<br>
    燃起 辽远的梦幻<br>
    流星 划过夜空<br>
    忆起 逝夜的歌声<br>
    <br>
    是谁昨夜背上行囊<br>
    唱一首满载风尘的歌<br>
    今夜才又想起拥抱的时刻<br>
    <br>
    独自走的一段旅程<br>
    是否还装满苦涩<br>
    一路风雨飘摇 那坎坷对谁说<br>
    <br>
    来吧看这远处亮起的点点星火<br>
    伸手触摸那写在匆匆旅程的歌<br>
    谁在转过的街口从容挥手<br>
    谁用欢笑和拥抱<br>
    记住这一刻
    </p>
  </div>
  <div id="footer">版权所有 2006.12.7 Next Station</div>
</div>
</body>
</html>
11-3.html
<html>
<head>
<title>个人主页</title>
<style>
<!--
body, html{
  margin:0px; padding:0px;
  background:#e9fbff;
}
#container{
  position: relative;
  left:50%;
  width:700px;
  margin-left:-350px;
  padding:0px;
  background:url(container_bg.jpg) repeat-y;
}
#banner{
  margin:0px; padding:0px;
}
#links{
  font-size:12px;
  margin:-18px 0px 0px 0px;
  padding:0px;
  position:relative;
}
#links ul{
  list-style-type:none;
  padding:0px; margin:0px;
  width:700px;
}
#links ul li{
  text-align:center;
  width:100px;
  display:block;
  float:left;
}
#links br{
  display:none;
}
#leftbar{
  background-color:#d2e7ff;
  text-align:center;
  font-size:12px;
  width:150px; float:left;
  padding-top:20px;
  padding-bottom:30px;
  margin:0px;
}
#leftbar p{
  padding-left:12px; padding-right:12px;
}
#content{
  font-size:12px;
  float:left; width:550px;
  padding:5px 0px 30px 0px;
  margin:0px;
  background:url(bg1.jpg) no-repeat bottom right;
}
#content p, #content h4{
  padding-left:20px; padding-right:15px;
}
#footer{
  clear:both; font-size:12px;
  width:100%;
  padding:3px 0px 3px 0px;
  text-align:center;
  margin:0px;
  background-color:#b0cfff;
}
.pic1{
  border:1px solid #00406c;
}
p.leftcontent{
  text-align:left;
  color:#001671;
}
h4{
  text-decoration:underline;
  color:#0078aa;
  padding-top:15px;
  font-size:16px;
}
-->
</style>
     </head>
<body>
<div id="container">
  <div id="banner">
    <img src="banner1.jpg" border="0">
  </div>
  <div id="links">
    <ul>
      <li>首页</li>
      <li>心情日记</li>
      <li>Free</li>
      <li>一起走到</li>
      <li>从明天起</li>
      <li>纸飞机</li>
      <li>下一站</li>
    </ul>
    <br>
  </div>
  <div id="leftbar">
    <p><img src="selfpic1.jpg" class="pic1">
    <br>我的日记本</p>
    <p class="leftcontent">秋天过半的时候，我搭上了一列火车。我不知道它将要去往的方向，那铁路看上去无休无止地延伸着。</p>
    <p><img src="selfpic2.jpg" class="pic1">
    <br>心情轨迹</p>
    <p class="leftcontent">无意间发见，白云的上面，长着许许多多的蒲公英。它在我面前迅速的长大，风吹过的时候，纷纷升起，飞向无数的远方。</p>
  </div>
  <div id="content">
    <h4>介绍</h4>
    <p>火车经过一个又一个站台，窗外漫卷的蒲公英向我微笑着。我逐渐记起了自己旅行的目的，一直都在下一站的前方。火车缓缓地驶入站台，汽笛声响的那一瞬间，车厢变得透明，我看见，自己和这长长的列车一起，正在漫天飘舞着的蒲公英中飞行。</p>
    <h4>转播设备</h4>
    <p>我现在是在万泉河附近，我们的转播车就在旁边不远的地方，师傅马上将会把车开过来。我们的转播设备非常的先进，具体怎么先进我也说不清，师傅比我清楚，总之就是特别特别先进。好，现在师傅已经把转播车开过来了。……
    </p>
    <h4>旅程</h4>
    <p>夕阳 染红蓝天<br>
    带走 美好的一天<br>
    风 吹过大地<br>
    炫美的世界<br>
    <br>
    霞光 点亮星辰<br>
    燃起 辽远的梦幻<br>
    流星 划过夜空<br>
    忆起 逝夜的歌声<br>
    <br>
    是谁昨夜背上行囊<br>
    唱一首满载风尘的歌<br>
    今夜才又想起拥抱的时刻<br>
    <br>
    独自走的一段旅程<br>
    是否还装满苦涩<br>
    一路风雨飘摇 那坎坷对谁说<br>
    <br>
    来吧看这远处亮起的点点星火<br>
    伸手触摸那写在匆匆旅程的歌<br>
    谁在转过的街口从容挥手<br>
    谁用欢笑和拥抱<br>
    记住这一刻
    </p>
  </div>
  <div id="footer">版权所有 2006.12.7 Next Station</div>
</div>
</body>
</html>
11-4.html
<html>
<head>
<title>左中右</title>
<style>
<!--
body{
  margin:0px; padding:0px;
  font-family:arial;
  color:#060;
  background-color:#DDDDDD;
}
#left{
  position:absolute;
  top:0px;
  left:0px;
  margin:0px;
  background:#cce9ff;
  width:190px;          /* 固定宽度 */
}
#middle{
  padding:10px;
  background:#ffffff;
  margin:0px 190px 0px 190px;    /* 左右空190px */
  margin-top:0px;
}
#right{
  position:absolute;
  top:0px;
  right:0px;
  margin:0px;
  background:#cce9ff;
  width:190px;          /* 固定宽度 */
}
p{
  font-size:12px;
  line-height:22px;
  margin:20px 0px 10px 0px;
  padding:10px;
}
pre{
  font-size:12px;
  line-height:20px;
  margin:20px 0px 10px 0px;
  font-family:arial;
}
-->
</style>
     </head>
<body>

<div id="left">
  <p>left</p>
</div>

<div id="middle">

<pre>
body{
  margin:0px; padding:0px;
  font-family:arial;
  color:#060;
  background-color:#CCC;
}
#left{
  position:absolute;
  top:0px;
  left:0px;
  margin:0px;
  background:#FFF;
  width:190px;/* 固定宽度 */
}
#middle{
  padding:10px;
  background:#FFF;
  margin:0px 190px 0px 190px;/* 左右空190px */
  margin-top:0px;
}
#right{
  position:absolute;
  top:0px;
  right:0px;
  margin:0px;
  background:#FFF;
  width:190px;/* 固定宽度 */
}
p{
  font-size:12px;
  line-height:22px;
  margin:20px 0px 10px 0px;
  padding:10px;
}
pre{
  font-size:12px;
  line-height:20px;
  margin:20px 0px 10px 0px;
  font-family:arial;
}
</pre>
</div>

<div id="right">
  <p>right</p>
</div>
</body>
</html>
11-5.html
<html>
<head>
<title>块的背景色问题</title>
<style>
<!--
body{
  margin:0px; padding:0px;
  font-family:arial;
  background-color:#f8e5a9;  /* 设置成跟#right块一样 */
}
#container{
  margin:0px; padding:0px;
  background:url(bg2.jpg) repeat-y;  /* 用背景图片填补#left的空白，又不影响#right */
}
#left{
  position:absolute;
  top:0px;
  left:0px;
  margin:0px;
  background:#afdcff;
  width:190px;
}
#middle{
  position:relative;
  padding:1px 15px 10px 15px;
  margin:-10px 190px 0px 190px;
  font-size:13px;
  background:#e9fbff url(bg1.jpg) no-repeat bottom right;
}
#right{
  position:absolute;
  top:0px;
  right:0px;
  margin:0px;
  background:#f8e5a9;
  width:190px;
  padding:20px 0px 20px 0px;
  font-size:12px;
}
#left ul{
  list-style:none;
  margin:1em 20px 0px 0px;
  padding:0px 0px 15px 22px;
}
#left li{
  font-size:80%;
  border-bottom:1px dotted #B2BCC6;
  margin-bottom:0.3em;
}
#left a:link, #nav a:visited{
  text-decoration:none;
  color:#2A4F6F;
  background-color:transparent;
}
#left a:hover{
  color:#778899;
}
#left h2{
  font:110% Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
  color:#2A4F6F;
  padding:0px 5px 0px 12px;
  text-decoration:underline;
}
#middle h4{
  text-decoration:underline;
  color:#0078aa;
  padding-top:15px;
  font-size:16px;
}
#footer{
  font-size:12px;
  width:100%;
  padding:3px 0px 3px 0px;
  text-align:center;
  margin:0px;
  background-color:#b0cfff;
  position:relative;
}
#right img{
  border:1px solid #0073cc;
  margin-bottom:5px;
}
#right p{
  text-align:center;
  padding:0px 15px 0px 15px;
}
-->
</style>
     </head>
<body>
<div id="container">
  <div id="mainbox">
    <div id="left">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">精华区</a></li>
        <li><a href="#">收藏夹</a></li>
        <li><a href="#">分类讨论区</a></li>
        <li><a href="#">邮箱</a></li>
      </ul>
      <h2>经典推荐</h2>
      <ul>
        <li><a href="#">一起走到</a></li>
        <li><a href="#">从明天起</a></li>
        <li><a href="#">纸飞机</a></li>
        <li><a href="#">下一站</a></li>
      </ul>
    </div>
    <div id="middle">
      <h4>转播设备</h4>
      <p>我现在是在万泉河附近，我们的转播车就在旁边不远的地方，师傅马上将会把车开过来。我们的转播设备非常非常的先进，具体怎么先进我也说不清，师傅比我清楚，总之就是特别特别的先进。好，现在师傅已经来了。……
      </p>
      <h4>旅程</h4>
      <p>夕阳 染红蓝天<br>
      带走 美好的一天<br>
      风 吹过大地<br>
      炫美的世界<br>
      <br>
      霞光 点亮星辰<br>
      燃起 辽远的梦幻<br>
      流星 划过夜空<br>
      忆起 逝夜的歌声<br>
      <br>
      是谁昨夜背上行囊<br>
      唱一首满载风尘的歌<br>
      今夜才又想起拥抱的时刻<br>
      <br>
      独自走的一段旅程<br>
      是否还装满苦涩<br>
      一路风雨飘摇 那坎坷对谁说<br>
      <br>
      来吧看这远处亮起的点点星火<br>
      伸手触摸那写在匆匆旅程的歌<br>
      谁在转过的街口从容挥手<br>
      谁用欢笑和拥抱<br>
      记住这一刻
      </p>
    </div>
    <div id="right">
      <p><img src="pic1.jpg"><br>永远的记忆</p>
      <p><img src="pic2.jpg"><br>匆匆的脚步</p>
      <p><img src="pic3.jpg"><br>温暖而忙碌</p>
    </div>
  </div>
  <div id="footer">版权所有 2006.12.7 Next Station</div>
</div>
</body>
</html>
11-6.html
<html>
<head>
<title>电子相册</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">磕头机</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国道</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">国道旁的羊</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国道的天</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">朵朵葵花向太阳</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">甜就一个字</li>
      <li class="catno">Trip20</li>
      <li class="price">￥69.5</li>
    </ul>
  </div>
</body>
</html>
11-6catalog.css
body{
  margin: 0.8em;
  padding: 0px;
}
div.pic{
  width: 450px; height: 160px;       /* 块的大小 */
  margin: 6px;
  padding: 0px;
}
div.pic img{
  border: 1px solid #82c3ff;
}
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;
}
div.pic ul{               /* 设置相片信息的样式 */
  margin: 3px 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;
}
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: #004586;
}
div.pic li.catno{
  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;
  float: left;
}
11-6ppt.css
body{
  margin: 0.8em;
  padding: 0px;
}
div.pic{
  float: left;             /* 向左浮动 */
  height: 160px; width: 160px;     /* 每幅图片块的大小 */
  margin: 6px;
  padding: 0px;
}
div.pic img{
  border: 1px solid #82c3ff;
}
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;          /* 幻灯片模式，不显式图片信息 */
}
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网页样式与布局 》