首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
Google
用CSS做滑动效果的图片画廊
来源:天极网 2006年06月12日 21:28 网友评论:0条 点击:

以下是引用片段:
<style>
#galleryh {
  padding:0;
  margin:0 auto 5em auto;
  list-style-type:none;
  overflow:hidden;
  width:495px;
  height:240px;
  border:1px solid #888;
  background:#fff url(/imagelist/06/24/o9642o826u4n.gif);
  }
#galleryh li {
  float:left;
  }
#galleryh li a {
  display:block;
  height:240px;
  width:28px;
  float:left;
  text-decoration:none;
  border-right:1px solid #fff;
  cursor:default;
  }
#galleryh li a img {
  width:28px;
  height:240px;
  border:0;
  }
#galleryh li a:hover {
  background:#eee;
  width:320px;
  }
#galleryh li a:hover img {
  width:320px;
  }
</style>

以下是引用片段:
<ul id="galleryh">
<li><a href="#nogo">
<img src="/imagelist/06/24/433movw9ni5t.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="/imagelist/06/24/5j2s3486qur7.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="/imagelist/06/24/6g5c95l21jr0.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="/imagelist/06/24/vt3bd2g7qyqk.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="/imagelist/06/24/90850kbw77is.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="/imagelist/06/24/7a3sv6r1j4ak.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="/imagelist/06/24/7ej8grn86b3u.jpg" alt="#7" title="#7" /></a></li>
</ul>

 

上一篇:用CSS打造可折叠伸缩名片菜单   下一篇:CSS+DIV:让文本字符环绕在你的图片周围
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】