网页设计与网站规划作业19 浮动和定位网格团购界面

最新推荐文章于 2022-08-23 09:10:17 发布

Rhyme_7

最新推荐文章于 2022-08-23 09:10:17 发布

阅读量7.4k

点赞数 21

分类专栏：网页设计与网站规划文章标签： html 前端 html5

本文链接：https://blog.csdn.net/qq_54499870/article/details/121571192

版权

网页设计与网站规划专栏收录该内容

24 篇文章 16 订阅

订阅专栏

<!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>&nbsp&nbsp&nbsp¥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>