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边框和颜色改变