一个小作业_义10氵rlr:∫十。∮y 子kb`10:`?η!一一ii020ik201001iylq:q一下1丶-CSDN博客

本文链接：https://blog.csdn.net/RGSNbiubiubiu/article/details/108914299

这是一个关于网页设计的示例，展示了如何创建一个包含品牌闪购和商品推荐的页面布局。页面左侧是品牌闪购模块，包括品牌名称、箭头图标和促销信息。右侧则有多個商品推荐模块，每个模块包含图片、品牌名称和简短描述。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <style>
            body{
                background-color: #d9d9d9;
            }
            img{
                display: block;
                margin: 0 auto;
            }
            h6{
                color: #333;
                text-align: center;
                font-size: 16px;
                font-weight: 700;
                margin: 6px 0px 0px 0px;
            }
            a{
                text-decoration: none;
                color: #333;
                display: block;
            }
            #jd{
                background-color: white;
                width: 630px;
                height: 340px;
                margin: 0 auto;
            }
            #jd_l{
                width: 290px;
                height: 338px;
                display: inline-block;
                float: left;
                margin-left: 15px;
            }
            #jd_r{
                width: 290px;
                height: 338px;
                display: inline-block;
                float: left;
            }

            /*左侧*/
            /*        左侧头*/
            #jd_l .left_head{
                height: 60px;
                width: 288px;
            }
            .left_top_link{
                height: 100%;
                width: 100%;
            }
            .left_top_link .left_title{
                font-weight: 700;
                font-size: 24px;
                color: #333;
                line-height: 32px;
                margin: 14px 10px 0px 20px;
                display: inline-block;
            }
            .left_top_link .left_title_arrow{
                width: 14px;
                height: 14px;
                border-radius: 100%;
                display: inline-block;
                border: 1px solid orangered;
                text-align: center;
            }
            .left_top_link .left_title_arrow .span_01{
                color: orangered;
                position: relative;
                top: -5.5px;

            }
            .left_top_link .left_title_arrow:hover{
                background-color: orangered;
            }
            .left_top_link .left_title_arrow:hover span{
                color: white;
            }
                    /*左侧余下部分*/
            #jd_l .left_body{
                height: 261px;
                width: 100%;
                border: 1px solid transparent;
            }
            #jd_l .left_body .left_body_link{
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg,rgba(161,215,152,.05),rgba(31,102,26,.05));
            }
            }
            #jd_l .left_body .left_body_link .left_img_1{
                margin-top: 15px;
                margin-bottom: 6px;
                width: 70px;
                height: 35px;
            }
            #jd_l .left_body .left_body_link .left_img_2{
                width: 130px;
                height: 130px;
            }
            .gary_all{
                display: block;
                text-align: center;
                font-size: 12px;
                color: #666;
                margin-bottom: 13px;
            }



            /*右侧*/

            #jd_r .jd_r_box{
                width: 135px;
                height: 100px;
                display: inline-block;
                float: left;
            }
            #jd_r .jd_r_box:nth-child(2n-1):after{
                position: absolute;
                background: linear-gradient(180deg,white,#eeeeee,#eeeeee,white);
                content: "";
                width: 1px;
                height: 60px;
                margin-top: -80px;
                margin-left: 135px;

            }
            #jd_r .jd_r_box .jd_r_box_other{
                width: 100px;
                height: 50px;
                margin-top: 14px;
                margin-bottom: 6px;
            }
        </style>
        <div id="jd">
<!--            左侧模块设计-->
            <div id="jd_l">
<!--                左侧头部设计-->
                <div class="left_head">
                    <a href="" class="left_top_link">
                        <h6 class="left_title">品牌闪购</h6>
                        <div class="left_title_arrow"><span class="span_01">&gt;</span></div>
                    </a>
                </div>
<!--                左侧下半部分设计-->
                <div class="left_body">
                    <a href="" class="left_body_link">
                        <img src="left1.webp" class="left_img_1">
                        <h6>塞菲尔闪购专场</h6>
                        <span class="gary_all">每满300减30&nbsp;|&nbsp;还剩&nbsp;&nbsp;2&nbsp;&nbsp;天</span>
                        <img src="left2.webp" class="left_img_2">
                    </a>
                </div>
            </div>
            <div id="jd_r">
                    <a class="jd_r_box" href="a1.webp">
                        <img src="a1.webp" class="jd_r_box_other">
                        <span class="gary_all">半坡饰族金秋购</span>
                    </a>
                    <a class="jd_r_box" href="a1.webp">
                        <img src="a2.webp" class="jd_r_box_other">
                        <span class="gary_all">SPECIAL闪购专场</span>
                    </a>
                    <a class="jd_r_box" href="a1.webp">
                        <img src="a3.webp" class="jd_r_box_other">
                        <span class="gary_all">轻熟时尚品牌专场</span>
                    </a>
                    <a class="jd_r_box" href="a1.webp">
                        <img src="a4.webp" class="jd_r_box_other">
                        <span class="gary_all">麻衣森活大牌24h</span>
                    </a>
                    <a class="jd_r_box" href="a1.webp">
                        <img src="a5.webp" class="jd_r_box_other">
                        <span class="gary_all">斯凯奇闪购专场</span>
                    </a>
                    <a class="jd_r_box" href="a1.webp">
                        <img src="a6.webp" class="jd_r_box_other">
                        <span class="gary_all">爱沃驰闪购专场</span>
                    </a>

            </div>
        </div>
</body>
</html>