团购商品展示模块
发布时间
阅读量：
阅读量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>团购商品展示模块</title>
<style>
/* 清空默认边距 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0}
div{
width:300px;
height:280px;
border:2px solid #ccc;
margin:100px auto;
position:relative; /* 遵循 子绝父相 */
}
div img{
width:300px;
}
/* 设置热销样式 */
div .hot{
width:45px;
height:44px;
background:url("images/tuangou.png") no-repeat 0 -280px;
/*display:block; 定位流会脱离标准 不需要转换显示模式 */
position:absolute;
left:0;
top:0;
}
/* 价格区 */
div .money{
width:134px;
height:42px;
background:url("images/tuangou.png") no-repeat 0 -362px;
/* display:block; 定位流会脱离标准 不需要转换显示模式 */
position:absolute;
left:-7px;
top:145px;
text-align:center;
line-height:48px;
font-style:italic;
font-size:30px;
color:red;
}
</style>
</head>
<body>
<!-- 商品展示模块开始 -->
<div>
<img src="images/meat.jpg" />
<span class="hot"></span>
<span class="money">288</span>
<p>【2店通用】Love Taste爱味道牛排生活馆 双人套餐，提供免费WiFi</p>
</div>
<!-- 商品展示模块结束 -->
</body>
</html>效果图图：
全部评论 (0)
还没有任何评论哟~