CSS 图片廊
使用CSS创建图片廊：
显示如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/837/831/318/1476339949246926.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">1</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/153/383/263/1476339955769441.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">2</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/815/625/584/1476339961304990.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">3</div>
</div>
<div class="img">
<a href="#"><img src="http://img.php.cn/upload/image/870/504/597/1476339972616793.jpg"
alt="Klematis" width="110" height="90"></a>
<div class="desc">4</div>
</div>
</body>
</html>代码解释：
CSS图片廊，每显示一个图片用2层div；外层的css类为img,包含一个<a>标签，在<a>标签中的<img>标签设置图像路径，alt属性是鼠标移上显示的提示；内层div显示图像描述，其css类是desc；
div.img, .是css类选择器，定义"img"类的属性：
外边距：2px;
边框：1px，实线，颜色；
高度：自动；
宽度：自动；
向左浮动；
文本中间对齐；
div.img （img标签为行内元素）
行内元素； 自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的；
外边距：3px;
边框：1px, 实线，颜色；
div.desc
文本对齐：中间对齐
字体粗细：正常
宽度：120px
外边距：2px
div.img a:hover img {border: 1px solid #0000ff;}
鼠标悬停时img边框和颜色改变
哈哈哈
做个图片展示栏不错
8年前 添加回复 0