产品使用及交流论坛

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

【分享】改了个html的相册,可以放在简介下面。 [复制链接]

1#
        有觉得能改的更好的,欢迎也把代码共享一下。

*********************************************************************************



<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;
color000000}
h1,h3{font-size:15px; font-family:"楷体"; color000000;}
h1{line-height:45px; background84B726; padding-left:14px; color000000;}
h2{font-size:12px;colorfff; text-align:center;background95CC2D; border-bottom:1px solid
#84B726;}
img{display:block;}
/*全局链接样式*/
ank,a:visited{color000000;text-decoration:none;}
a:hover,a:active{colorfff;text-decoration:none;}
/*常用的三个样式*/
.l{  float:left;}
.r{ float:right;  }
.c{ clear:both; overflow:hidden; height:0;}
/*全局框架用*/
#pic{ backgroundB5DF63; 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{background3B8C54; 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;
backgroundFFFFFF}
/*照片上的链接样式*/
ank span,a:visited span{border:1px solid #B5DF63; backgroundB5DF63}
a:hover span,a:active span{ background95CC2D; 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{background95CC2D;display:block;border-top:1px solid #fff;}
.sidebar li{ height:600px;}
.sidebar{ border:1px solid #A5D845; border-top:none;  padding:0 1px 1px 1px;backgroundFff;
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>&nbsp;&nbsp;&nbsp;员工寄语</h3>
    <p>我不去想何时能够获得成功,<br />
    既然选择加洛哪怕风雨兼程。<br />
    我不去想未来多少冷雨寒风,<br />
    既然希望成为一名优秀员工,<br />
    留给后人的只能是奋斗背影。<br />
    我不去想未来平坦还是泥泞,<br />
    既然承担了这份责任,<br />
    唯有&ldquo;感恩于心,责任于行&rdquo;。</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">&nbsp;</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>&nbsp;</div>
分享 转发
TOP
2#

戴口罩的表情其实是:冒号#
闪电表情是:冒号li
TOP
发新话题 回复该主题