团购商品展示模块

最新推荐文章于 2021-06-24 23:33:42 发布

原创

最新推荐文章于 2021-06-24 23:33:42 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #HTML #CSS #团购商品 #标签

本文主要介绍了如何在前端使用HTML和CSS技术实现团购商品的展示效果，通过实例展示了设计思路和实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;