通用多栏目商品展示模板-网页编程网

当前位置：主页 >> DIV+CSS >> 正文

通用多栏目商品展示模板

阅读：3594 输入：2020-05-29 16:39:08

隐藏展示图片用的是opacity。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通用多栏目商品展示模板</title>
<style>
body,ul{margin:0;padding: 0;}
#wrap{
width:960px;
height:660px;
margin:100px auto;
background-color: pink; 
}
#wrap ul li{
float: left;
position: relative;
width:300px;
height:318px;
margin: 0 20px 20px 0;
list-style: none;
overflow: hidden;
}
.img-link{
width: 100%;
height: 170px;

}
.img-link img{width:300px;height: 170px;}
.p-title{
margin: 13px 20px 2px;
font:700 20px/32px 'Microsoft YaHei';
}
.p-txt{
	margin:0 16px 13px;
	padding: 10px 2px;
font:700 14px/32px 'Microsoft YaHei';
color: #b1b1b1;
border-bottom: 1px solid #ccc;
}
.gw-link{
	position: absolute;
	right: 20px;
	bottom: 8px;
	width:88px;
	height:30px;
	line-height: 30px;
	text-align: center;
font-size: 12px;
text-align: center;
}
.b-img{
position: absolute;
top:-100px;
width:300px;
height: 170px;	
opacity:0;
background-image: url('1.jpg');
transition:.5s;
}
.img-link:hover .b-img{
	top:0;
	opacity: 1;
}
</style>
	</head>
	<body>
		<div id="wrap">
			<ul>
				<li>
				<a class="img-link" href=""><img src="2.jpg" /><div class="b-img"></div></a>
				<p class="p-title">我爱你！</p>
				<p class="p-txt">好想娶你，你愿意吗？好想娶你好想娶你好想娶你</p>
				<a class="gw-link" href="">进入官网</a>
				</li>
				<li>
				<a class="img-link" href=""><img src="2.jpg" /><div class="b-img"></div></a>
				<p class="p-title">我爱你！</p>
				<p class="p-txt">好想娶你，你愿意吗？好想娶你好想娶你好想娶你</p>
				<a class="gw-link" href="">进入官网</a>
				</li>
				<li>
				<a class="img-link" href=""><img src="2.jpg" /><div class="b-img"></div></a>
				<p class="p-title">我爱你！</p>
				<p class="p-txt">好想娶你，你愿意吗？好想娶你好想娶你好想娶你</p>
				<a class="gw-link" href="">进入官网</a>
				</li>
				<li>
				<a class="img-link" href=""><img src="2.jpg" /><div class="b-img"></div></a>
				<p class="p-title">我爱你！</p>
				<p class="p-txt">好想娶你，你愿意吗？好想娶你好想娶你好想娶你</p>
				<a class="gw-link" href="">进入官网</a>
				</li>
				<li>
				<a class="img-link" href=""><img src="2.jpg" /><div class="b-img"></div></a>
				<p class="p-title">我爱你！</p>
				<p class="p-txt">好想娶你，你愿意吗？好想娶你好想娶你好想娶你</p>
				<a class="gw-link" href="">进入官网</a>
				</li>
				<li>
				<a class="img-link" href=""><img src="2.jpg" /><div class="b-img"></div></a>
				<p class="p-title">我爱你！</p>
				<p class="p-txt">好想娶你，你愿意吗？好想娶你好想娶你好想娶你</p>
				<a class="gw-link" href="">进入官网</a>
				</li>
			</ul>
		</div>
	</body>
</html>

相关阅读: 页面在移动端出现右边空白，为何不能全撑满; css实现a标签按钮化; html5视频作为页面背景，无插件