本文介绍了一个使用HTML5和CSS3创建的商品展示示例，通过CSS样式设置，实现了商品图片的边框变换、悬停效果以及阴影遮罩层。代码中涉及到的关键元素包括div, ul, li, dl, dt, dd等，并利用浮动布局和定位来布局商品列表。
demo.html
商品展示
demo.css
div,ul,li,dl,dt,dd {
margin:0;
padding:0;
}
ul,li,dl,dt,dd {
list-style: none;
}
.demo{
width:930px;
}
.demo ul li {
float:left;
width:300px;
margin-right: 6px;
position:relative;
}
.demo ul li img{
border:none;
position:relative;
z-index:22;
}
.demo ul li a{
width:300px;
display:block;
border:2px solid #ccc;
}
.demo ul li a:hover{
border:2px solid #C03;
}
.demo ul li a span{
position:absolute;
z-index:33;
bottom:2px;
left:2px;
width:300px;
height:40px;
filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;
background:#000;
color:#fff;
line-height:40px;
text-align:center;
display:none;
}
.demo ul li a:hover span{
display:block;
}
效果：
图片
21:32:21 2017-09-06
1082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
