别开生面纯CSS实现相册预览 ximicc.com

body{

font-size:12px;

color: #CC0000;

}

p {

background-color: #F1FAFE;

}

#gallery {

width:495px;

height:240px;

border: 1px solid #888;

margin:0 auto;

padding:0;

list-style:none;

background:#fff url(/files/080628/1_133958.gif);

}

#gallery li {

float: left;

}

#gallery li a {

display: block;

width: 28px;

height: 240px;

border-right: #fff 1px solid;

overflow: hidden;

cursor: default;

}

#gallery li a img {

border:0;

}

#gallery li a:hover {

width: 320px;

}

#gallery2 {

margin:0 auto;

padding:0;

list-style-type:none;

overflow:hidden;

width:572px;

height:238px;

border:1px solid #000;

background:#fff url(/files/080628/1_134055.gif);

}

#gallery2 li {

float:left;

}

#gallery2 li a {

display:block;

height:30px;

width:572px;

float:left;

overflow: hidden;

text-decoration:none;

border-bottom:1px solid #000;

cursor:default;

}

#gallery2 li a img {

border:0;

}

#gallery2 li a:hover {

background:#eee;

height:144px;

}

#gallery2 li a:hover img {

height:144px;

}

-->

原文地址:Sliding Photograph Galleries

翻译整理:西米CC www.ximicc.com

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]

html图片滚动浏览,ul结合CSS制作网页相册滑动浏览效果相关推荐

  1. html做相册浏览,ul结合CSS制作网页相册滑动浏览效果

    别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...

  2. html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果

    ul结合CSS制作网页相册滑动浏览效果 互联网   发布时间:2008-10-17 19:25:02   作者:佚名   我要评论 英文原文:Sliding Photograph Galleries ...

  3. 做网页很实用代码集合和CSS制作网页小技巧整理

    做网页很实用代码集合 控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...

  4. html css 制作网站,HTML/CSS制作网页

    HTML/CSS代码练习 要求效果图 polo360.jpg 用ps裁剪提取要用的图片 3.png html代码 polo360练习 HOME Back to home PRODUCTS What w ...

  5. CSS制作类似 Photoshop 模糊蒙版效果

    CSS制作类似 Photoshop 模糊蒙版效果 引言 不兼容IE的纯css实现代码 实现代码 实现原理 兼容IE10,IE11的模糊蒙版效果,使用canvas 实现代码 实现原理 引言 为了使一个在 ...

  6. html css做网页总结,学习CSS制作网页总结的一些经验

    学习CSS制作网页总结的一些经验 互联网   发布时间:2008-10-17 19:28:20   作者:佚名   我要评论 让你使用DIV CSS排版 不是让你用换个标签然后再去按照表格的方式去排版 ...

  7. web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码

    web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...

  8. 利用html制作网页的小结,HTML_CSS制作网页的一些经验分享,CSS制作网页总结的一些经验 1: - phpStudy...

    CSS制作网页的一些经验分享 CSS制作网页总结的一些经验 1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用 类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形 ...

  9. 纯CSS制作3D旋转风车动画效果

    效果图展示        HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...

最新文章

  1. System.Data.SqlClient.SqlException:“对象名 'customer' 无效。
  2. 10 Linux引导过程和服务控制
  3. Linux Shell脚本多循环语句练习题
  4. windows7下面sublime中使用virtualenv切换python版本并运行
  5. win更改文件默认打开方式
  6. ASP.NET Core 源码学习之 Options[1]:Configure
  7. Exchange Online基于网络位置限制使用
  8. 内存管理(C语言中malloc和free的用法)
  9. MongoDB中的分页–如何真正避免性能下降?
  10. freeradius+mysql+pptpd+radiusmanager 游戏×××代理站完整实验过程
  11. HTTP基础(图解HTTP笔记)幕布
  12. Julia : csv =hdf5
  13. iphone分屏功能怎么用_除iOS12.4苹果还为旧款设备推送了更新 来看iPhone迁移怎么用...
  14. Node on Mac 初步
  15. 信息安全与管理的分析理解
  16. 带你实战Android深色模式,深入原理剖析
  17. deficit记忆_背单词:不要让“捷径”欺骗你的记忆
  18. 教师招聘面试视频 计算机,怎么准备教师招聘面试试讲?(附视频)
  19. MBR30300VPT-ASEMI肖特基二极管MBR30300VPT
  20. Google Map开发之实战

热门文章

  1. Zen Garden驾到:首批Metal游戏已登录iTunes应用商店
  2. apache中怎么配置网站的默认首页
  3. 【网络】tcp三次握手协议
  4. DataGrid实现简单的行分组
  5. MATLAB学习笔记(十二)
  6. golang 导入自定义包_二、Go基本命令及定制自定义第三方包
  7. python 3.9 发布_Python 3.9.0 稳定版发布
  8. Java NIO学习篇之StandardOpenOption详解
  9. Python数据结构:汉诺塔问题
  10. php携程语比,PHP 协程