CSS 图片廊
使用CSS创建图片廊:
显示如下
php.cn
代码解释:
CSS图片廊,每显示一个图片用2层div;外层的css类为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边框和颜色改变