<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动定位练习-团购界面</title>
<style>
*{
margin:0;
padding:0;
}
div{
width: 300px;
height: 330px;
border: 2px solid #ccc;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
div .hot{
width: 55px;
height: 50px;
background: url("top_tu.gif") no-repeat -1px 3px;
position: absolute;
left: 0;
top: -4px;
}
div img{
width: 270px;
height: 200px;
position: absolute;
left: 15px;
top: 10px;
}
div .diyihangwenzi{
width: 280px;
height: 50px;
position: absolute;
bottom: 60px;
left: 8px;
border: none;
}
div .see{
width: 134px;
height: 42px;
background: url("see.jpg") no-repeat 2px 6px;
position: absolute;
left: 210px;
bottom: 25px ;
}
div .jiage{
width: 280px;
height: 20px;
font-size: 20px;
color:red;
font-weight: bold;
position: absolute;
bottom: 35px;
border:none;
}
div .yigou{
width: 134px;
height: 10px;
font-size: 5px;
position: absolute;
left: 226px;
bottom: 20px ;
border: none;
}
</style>
</head>
<body>
<div>
<img src="adv.jpg" alt="bingqilin tupian">
<span class="hot"></span>
<div class=diyihangwenzi>【12店通用】领航冰品哈根达斯:冰淇淋双球,口味任选2种,节约通用</div>
<div class=jiage>   ¥20.8 <xiao style="font-size: 10px;color:#D3D3D3">原价¥38</xiao></div>
<span class="see" ></span>
<div class="yigou"><red style="color: red">32</red><hei>人已购买</hei></div>
</div>
</body>
</html>
更多推荐
网页设计与网站规划 作业19 浮动和定位 网格团购界面
发布评论