有觉得能改的更好的,欢迎也把代码共享一下。
*********************************************************************************
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">
/*初始化几个要用的标签*/
*{ padding:0; margin:0; list-style:none;}
body{ line-height:1.7; font-size:12px; font-family:Verdana, Arial, "宋体"; margin:10px;
color

000000}
h1,h3{font-size:15px; font-family:"楷体"; color

000000;}
h1{line-height:45px; background

84B726; padding-left:14px; color

000000;}
h2{font-size:12px;color

fff; text-align:center;background

95CC2D; border-bottom:1px solid
#84B726;}
img{display:block;}
/*全局链接样式*/
a

nk,a:visited{color

000000;text-decoration:none;}
a:hover,a:active{color

fff;text-decoration:none;}
/*常用的三个样式*/
.l{ float:left;}
.r{ float:right; }
.c{ clear:both; overflow:hidden; height:0;}
/*全局框架用*/
#pic{ background

B5DF63; width:900px; height:420px; border-left:3px solid #3B8C54; border-
right:3px solid #8CC128;
overflow:hidden}
.main{width:250px; }
.sidebar{width:480px; float:center;height:320px;overflow:hidden}
.pager{clear:both;}
/*第一页的特殊处理*/
#yan{ padding:120px 0 0 80px;}
#kai{background

3B8C54; width:460px;margin:130px 0 0 70px; padding-left:5px; overflow:hidden}
#kai img{ display:block; border-left:2px solid #B5DF63; padding:5px;}
/*相册正式开始*/
.pic{height:450px;}
.main li { text-align:center; float:left; width:120px; margin-top:10px;}
.main li span{padding:5px;display:block; margin:auto}
.main li img{ width:90px; height:65px; display:block;border:1px solid #A5D845;; padding:5px;
margin:0 auto;
background

FFFFFF}
/*照片上的链接样式*/
a

nk span,a:visited span{border:1px solid #B5DF63; background

B5DF63}
a:hover span,a:active span{ background

95CC2D; border:1px solid #84B726; border-top:1px solid
#FFF;border-left:1px
solid #FFF}
.sidebar img{padding:25px;}
.sidebar p{padding:1px 1px;}
.sidebar span{background

95CC2D;display:block;border-top:1px solid #fff;}
.sidebar li{ height:600px;}
.sidebar{ border:1px solid #A5D845; border-top:none; padding:0 1px 1px 1px;background

Fff;
margin:15px 25px; }</style>
<div id="info">
<ul id="pic">
<li class="pic"><a id="a01" name="a01"></a>
<div class="l main">
<div id="yan">
<h3> 员工寄语</h3>
<p>我不去想何时能够获得成功,<br />
既然选择加洛哪怕风雨兼程。<br />
我不去想未来多少冷雨寒风,<br />
既然希望成为一名优秀员工,<br />
留给后人的只能是奋斗背影。<br />
我不去想未来平坦还是泥泞,<br />
既然承担了这份责任,<br />
唯有“感恩于心,责任于行”。</p>
</div>
</div>
<div class="r">
<div id="kai"><a href="#a02"><img border="0" alt="Open up" src="../images/open.gif"
/></a></div>
</div>
<div class="c"> </div>
</li>
<li class="pic"><a id="a02" name="a02"></a>
<div class="l main">
<ul>
<li><a href="#b01"><span><img alt="2013新春年会" src="../images/full/1.jpg" />2013新春年会
</span></a></li>
<li><a href="#b02"><span><img alt="2012突出贡献奖" src="../images/full/2.jpg" />2012突出贡
献奖</span></a></li>
<li><a href="#b03"><span><img alt="希拉穆仁大草原" src="../images/full/3.jpg" />希拉穆仁大
草原</span></a></li>
<li><a href="#b04"><span><img alt="普会寺" src="../images/full/4.jpg" />普会寺
</span></a></li>
<li><a href="#b05"><span><img alt="2012新春年会" src="../images/full/5.jpg" />2012新春年会
</span></a></li>
<li><a href="#b06"><span><img alt="2011优秀员工" src="../images/full/6.jpg" />2011优秀员工
</span></a></li>
</ul>
<div class="pager">
<p align="center"><a href="#a03">下一页</a></p>
</div>
</div>
<div class="sidebar">
<ul>
<li><a id="b01" name="b01"></a><span><img alt="" src="../images/full/1.jpg" />
</span></li>
<li><a id="b02" name="b02"></a><span><img alt="" src="../images/full/2.jpg" />
</span></li>
<li><a id="b03" name="b03"></a><span><img alt="" src="../images/full/3.jpg" />
</span></li>
<li><a id="b04" name="b04"></a><span><img alt="" src="../images/full/4.jpg" />
</span></li>
<li><a id="b05" name="b05"></a><span><img alt="" src="../images/full/5.jpg" />
</span></li>
<li><a id="b06" name="b06"></a><span><img alt="" src="../images/full/6.jpg" />
</span></li>
</ul>
</div>
</li>
<li class="pic"><a id="a03" name="a03"></a>
<div class="l main">
<ul>
<li><a href="#b07"><span><img alt="加洛十周年庆" src="../images/full/7.jpg" />加洛十周年庆
</span></a></li>
<li><a href="#b08"><span><img alt="2011拓展" src="../images/full/8.jpg" />2011拓展
</span></a></li>
<li><a href="#b09"><span><img alt="加洛年底答谢会" src="../images/full/9.jpg" />加洛年底答
谢会</span></a></li>
</ul>
<div class="pager">
<p align="center"><a href="#a02">上一页</a></p>
</div>
</div>
<div class="sidebar">
<ul>
<li><a id="b07" name="b07"></a><span><img alt="" src="../images/full/7.jpg" />
</span></li>
<li><a id="b08" name="b08"></a><span><img alt="" src="../images/full/8.jpg" />
</span></li>
<li><a id="b09" name="b09"></a><span><img alt="" src="../images/full/9.jpg" />
</span></li>
</ul>
</div>
</li>
</ul>
</div>
<div> </div>