开发手册HTMLCSSJavaScript
HTML手册CSS手册CSSCSS 教程CSS 简介CSS 基础语法CSS 高级语法CSS 派生选择器CSS id 选择器CSS 类选择器CSS 属性选择器CSS 创建CSS 背景CSS 文本CSS 字体CSS 链接CSS 列表CSS 表格CSS 轮廓CSS 框模型概述CSS 内边距CSS 边框CSS 外边距CSS 外边距合并CSS 定位概述CSS 相对定位CSS 绝对定位CSS 浮动CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代选择器CSS 子元素选择器CSS 相邻兄弟选择器CSS 伪类CSS 伪元素CSS 对齐CSS 尺寸CSS 分类CSS 导航栏CSS 图片库CSS 图片透明CSS 媒介类型CSS 注意事项CSS 总结CSS 实例CSS 参考手册CSS 选择器CSS 听觉参考手册CSS 网络安全字体CSS 单位CSS 颜色CSS 颜色值CSS 颜色名CSS 颜色十六进制CSS3CSS相关JavaScript手册

CSS 图片库

CSS 可用来创建图片库。

演示:CSS 图片库

Ballade
在此处添加对图像的描述
Ballade
在此处添加对图像的描述
Ballade
在此处添加对图像的描述
Ballade
在此处添加对图像的描述

图片库

下面的图片库是由 CSS 创建的:

实例

<!doctype html>
<html>
<head>
<style>
div.img
  {
  margin:3px;
  border:1px solid #bebebe;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #bebebe;
  }
div.img a:hover img
  {
  border:1px solid #333333;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:150px;
  font-size:12px;
  margin:10px 5px 10px 5px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="/i/tulip_ballade.jpg">
  <img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_flaming_club.jpg">
  <img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_fringed_family.jpg">
  <img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_peach_blossom.jpg">
  <img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

</body>
</html>

亲自试一试

关于千图| 赞助千图 |千图首页   Copyright2014千图网   沪ICP备10011451号-6   用时:0.021秒

千图网提示