web前端作业3

最新推荐文章于 2024-06-20 15:06:48 发布

深红一号

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量139

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_71474212/article/details/129950198

版权

1，完成电商列表

代码

<!DOCTYPE html>
<html>
<head>
    <title>商品列表</title>
    <meta charset="utf-8">
    <style>
        /*统配设置整个文件为宋体，12号字*/
        *{
            font-family: '楷体';
            font-size:12px;
        }
        /*设置商品列表宽度占浏览器60%，居中*/
        #main {
            
            width:60%;
            height: 600px;
            margin: 0 auto;
            border:0px solid green;
        }

        /*设置图片宽高*/
        img {
            width: 140px;
            height: 200px;
            padding: 25px 25px 0px 25px;

        }
        /*设置图片边框*/
        .sfz_01_34 {
            width:200px;
            height: 400px;
            border: 2px solid green;
            border-radius:10px;/*设置圆角矩形*/
            margin-left: 5px;
            margin-bottom: 20px;/*边框上下距离*/
            margin-right: 5px;
        }
        .sfz_02_34{
            color: red;
            text-align: center;
        }
        .sfz_03_34{
            height: 60px;
            color:black;
            text-indent: 2em;
        }
        /*设置加入购物单*/
        .sfz_04_34{
           margin-left:5px;
            padding-top:10px
            padding-bottom:10px; 
            text-align: center;
            font-size: 10px;
            border-radius:0px;
            color: white;
            width: 50%;
           line-height: 20px;
            background: red;
            float: left;
        }
        .sfz_05_34{
           margin-right: 5px;/*靠边框距离*/
            color: white;
            font-size: 10px;
            width: 40%;
            height: 20px;
            line-height: 20px;/*字在中间*/
            text-align: center;
            background: blue;
            float: right;
           
        }
        
        /*去掉列表序号去掉*/
        ul {
            list-style: none;
            overflow: hidden;
        }
        /*设置左浮动*/
        ul li {
            float: left;
        }
        
        /*设置默认状态是黑色字体*/
        a:link {
            color: black;
        }
        /*设置鼠标放上去后显示红色*/
        div:hover {
           border-color:red;
        }
    </style>
</head>
<body>
<div id="main"> 
    <ul>
          <li>  
            <div class="sfz_01_34"><img src="iphone11.png"><a href="#"></a>

            <p class="sfz_02_34">¥5999.00</p>
            <p class="sfz_03_34">iphone 11(A2223)128GB绿色移动联通电信4G手机双卡双待</p>
            <p class="sfz_04_34">加入购物车</p>
            <p class="sfz_05_34">立即购买</p>
            </div>
            
        </li>
        <li>
            <div class="sfz_01_34"><img src="iphone11pro.png">
            <p class="sfz_02_34">¥10899.00</p>
            <p class="sfz_03_34">iphone 11proMax(A2220)256GB深空灰色移动联通电信4G手机双卡双待</p>
            <p class="sfz_04_34">加入购物车</p>
            <p class="sfz_05_34">立即购买</p>
            </div>
            </li>
        <li>
            <div class="sfz_01_34"><img src="iphonexr.png">
            <p class="sfz_02_34">¥4999.00</p>
            <p class="sfz_03_34">iphone XR(A2108)128GB红色移动联通电信4G手机双卡双待</p>
            <p class="sfz_04_34">加入购物车</p>
            <p class="sfz_05_34">立即购买</p>
            </div>
        </li>
        <li>
            <div class="sfz_01_34"><img src="mate 30 pro.png">
            <p class="sfz_02_34">¥5799.00</p>
            <p class="sfz_03_34">mate 30 pro.png128GB绿色移动联通电信4G手机双卡双待</p>
            <p class="sfz_04_34">加入购物车</p>
            <p class="sfz_05_34">立即购买</p>
            </div>
        </li>
        <li>
            <div class="sfz_01_34"><img src="p30 pro.png">
             <p class="sfz_02_34">¥4998.00</p>
            <p class="sfz_03_34">p30 pro 超感光四摄10倍混合变焦麒麟980芯片屏内指纹8GB+128GB天空之镜全网通版4G手机</p>
            <p class="sfz_04_34">加入购物车</p>
            <p class="sfz_05_34">立即购买</p>
            </div>
        </li>
        <li>
            <div class="sfz_01_34"><img src="p30.png">
            <p class="sfz_02_34">¥3998.00</p>
            <p class="sfz_03_34">p30 超感光麒麟980AL智能芯片全面屏屏内指纹版手机8G+128GB全网通4G手机</p>
            <p class="sfz_04_34">加入购物车</p>
            <p class="sfz_05_34">立即购买</p>
            </div>
        </li>
       
    </ul>
</div>
</body>
</html>

2，西瓜视频登录页

代码

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>西瓜视频登录</title>
        <style type="text/css">
            body {
                background-color: #ccc;
            }
 
            .container {
                width: 660px;
                height: 480px;
                margin: 100px auto 100px;
                background-color: white;
                border-radius: 5px;
            }
 
            .head_1 {
                width: 610px;
                height: 66px;
                padding-left: 25px;
                padding-right: 25px;
                border-bottom: 1px solid #F1F1F1;
            }
 
            .head_1>.font_1 {
                font-size: 20px;
                color: #0c0d0f;
                line-height: 66px;
            }
 
            .head_1>.close {
                display: inline-block;
                line-height: 66px;
                font-weight: bold;
                color: #999999;
                float: right;
            }
 
            .body_1 {
                width: 660px;
                height: 260px;
                padding-top: 40px;
            }
 
            .body_1>.box_1 {
                width: 330px;
                height: 260px;
                padding-left: 60px;
                padding-right: 28px;
                border-right: 1px solid #F1F1F1;
                float: left;
            }
 
            .body_1>.box_2 {
                width: 241px;
                height: 260px;
                float: left;
            }
 
            .foot_1 {
                width: 330px;
                height: 20px;
                padding-left: 60px;
                padding-right: 28px;
                margin-top: 16px;
                margin-bottom: 36px;
            }
 
            .foot_2 {
                width: 475px;
                height: 20px;
                color: #606266;
                font-size: 14px;
                padding-bottom: 20px;
                padding-left: 185px;
            }
 
            .line_1,
            .box_2_l1 {
                width: 330px;
                height: 20px;
                padding-bottom: 16px;
                font-size: 16px;
                color: #0c0d0f;
            }
 
            .line_2,
            .line_3 {
                width: 310px;
                height: 32px;
                background-color: #F2F2F2;
                padding: 8px 10px;
            }
 
            .line_2>select {
                height: 32px;
                background-color: #F2F2F2;
                border: none;
                text-indent: 4px;
            }
 
            .line_2>.input_1 {
                width: 245px;
                height: 32px;
                border: none;
                background-color: #F2F2F2;
            }
 
            .line_3 {
                margin-top: 20px;
                font-size: 15px;
                color: #606266;
            }
 
            .line_3>.input_2 {
                width: 240px;
                height: 32px;
                border: none;
                background-color: #F2F2F2;
            }
 
            .line_4 {
                width: 330px;
                height: 40px;
            }
 
            .line_5 {
                width: 330px;
                height: 20px;
                font-size: 12px;
            }
 
            .line_5>.input_3 {
                width: 6px;
                height: 8px;
                border: 1px solid #F1F1F1;
                border-radius: 3px;
            }
 
            .line_6 {
                width: 330px;
                height: 48px;
            }
 
            .line_6>button {
                width: 330px;
                height: 48px;
                border: none;
                border-radius: 2px;
                background-color: #fe3355;
                color: #ffffff;
                font-size: 16px;
            }
 
            .box_2_l1 {
                width: 213px;
                padding-left: 28px;
                padding-bottom: 0px;
            }
 
            .box_2_l2 {
                width: 187px;
                height: 206px;
                margin-top: 16px;
                padding: 0px 28px;
            }
 
            .box_2_l2>.img_1 {
                width: 85%;
            }
 
            [class^="font_line"] {
                font-size: 14px;
                color: #606266;
                margin-bottom: 0px;
            }
 
            .font_line_2 {
                margin-top: 0px;
            }
 
            [class^="foot_font"] {
                font-size: 14px;
                color: #606266;
            }
 
            .foot_1>img {
                height: 20px;
            }
 
            .foot_font_2 {
                margin-left: 82px;
            }
 
            .input_4 {
                width: 12px;
                height: 12px;
            }
 
            .link_1 {
                color: #236ddb;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="head_1">
                <span class="font_1">登录</span>
                <span class="close">X</span>
            </div>
            <div class="body_1">
                <div class="box_1">
                    <div class="line_1">密码登录</div>
                    <div class="line_2">
                        <select name="" id="">
                            <option>+86</option>
                            <option>+852</option>
                            <option>+853</option>
                            <option>+886</option>
                        </select>
                        <input type="text" class="input_1" name="" id="" placeholder="请输入手机号">
                    </div>
                    <div class="line_3">
                        <input type="password" class="input_2" name="password" id="" placeholder="请输入密码"">忘记密码
                </div>
                <div class=" line_4">
                    </div>
                    <div class="line_5">
                        <input class="input_3 type=" checkbox" name="记住密码" id="">
                        <span class="font_2">记住密码</span>
                    </div>
                    <div class="line_6">
                        <button>登录</button>
                    </div>
                </div>
                <div class="box_2">
                    <div class="box_2_l1">扫码登录</div>
                    <div class="box_2_l2">
                        <img class="img_1" src="./img/西瓜二维码.png" alt="">
                        <p class="font_line_1">
                            打开
                            <span style="color: #fe3355;">
                                西瓜视频手机APP
                            </span>
                        </p>
                        <p class="font_line_2">
                            我的-扫一扫登录
                            <span>
                                <img src="./img/问号.png" alt="" style="width: 14px;">
                            </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="foot_1">
                <span class="foot_font_1">
                    其他方式：
                </span>
                <img src="./img/抖音.png" alt="">
                <img src="./img/QQ.png" alt="">
                <img src="./img/微信.png" alt="">
                <span class="foot_font_2">
                    手机验证码登录
                </span>
            </div>
            <div class="foot_2">
                <input class="input_4" type="checkbox" name="用户协议" id="">
                登录即代表你同意<a class="link_1" href="https://www.ixigua.com/user_agreement/" target="_blank">用户协议</a>和<a
                    class="link_1" href="https://www.ixigua.com/privacy_policy/" target="_blank">隐私政策</a>
            </div>
        </div>
    </body>
</html>

3，放小米商城页面部分区域

代码

index.html

    <!-- 菜单和广告位s -->
    <div class="idx_menu_adv container">
        <div class="menu">
            <ul class="menu">
                <li class="br bb"><a href=""></a><i class="iconfont iconshouji"></i><span>选购手机</span></li>
                <li class="br bb"><a href=""></a><i class="iconfont iconshouji"></i><span>企业团购</span></li>
                <li class="bb"><a href=""></a><i class="iconfont iconshouji"></i><span>F码通道</span></li>
                <li class="br"><a href=""></a><i class="iconfont iconshouji"></i><span>米粉卡</span></li>
                <li class="br"><a href=""></a><i class="iconfont iconshouji"></i><span>以旧换新</span></li>
                <li><a href=""></a><i class="iconfont iconshouji"></i><span>话费充值</span></li>
            </ul>
        </div>
        <a href="" class="pic"><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340"
                alt=""></a>
        <a href="" class="pic"><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340"
                alt=""></a>
        <a href="" class="pic"><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
                alt=""></a>
    </div>
    <!-- 菜单和广告位E -->
    <!-- 广告图S -->
    <div class="idx_adv container">
        <a href=""><img
                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c907ad4004b32609a589bdada203443.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                alt=""></a>
    </div>
    <!-- 广告图E -->
    <!-- 大内容区域S -->
    <div class="idx_container">
        <div class="container">
            <div class="idx_title">
                <span class="tit">手机</span>
                <a class="see_all">
                    查看全部<i class="iconfont iconxiangyou"></i>
                </a>
            </div>

            <div class="idx_phone idx_box">
                <div class="adv_box col_5" style="  float: left;">
                    <a href="" class="single"><img
                            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                            alt=""></a>
                </div>

                <div class="good_box">
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>


                </div>
                <div class="idx_adv">
                    <a href=""><img
                            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                            alt=""></a>
                </div>
            </div>

            <div class="idx_phone idx_box" style="margin-top: 40px;">
                <div class="adv_box col_5" style="  float: left;">
                    <a href="" class="single"><img
                            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                            alt=""></a>
                </div>

                <div class="good_box">
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>
                    <div class="col_5 good_item">
                        <a href="" class="pic" style=" margin-left: 25px;"><img
                                src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90"
                                alt=""></a>
                        <h3 class="name" style="text-align: center; overflow: hidden;padding-bottom:6px;"><a href="">
                                小米10 至尊版
                            </a></h3>
                        <h4 class="desc" style="text-align: center;padding-bottom:6px;height: 11px;font-size: 12px;
                        color: #b0b0b0;">120X 变焦/120W秒充/120Hz屏幕</h4>
                        <p class="price" style="text-align: center;color: #ff6700; margin-top: 8px;font-size: 20px">
                            <span>1599元</span><i>-1999元</i>
                        </p>
                    </div>


                </div>
                <div class="idx_adv">
                    <a href=""><img
                            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1149&h=113&f=webp&q=90"
                            alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 大内容区域E -->
    </div>

index.css

/* 广告图 */
.idx_adv img {
    width: 100%;
    display: block;
}

.idx_container {
    background-color: #f5f5f5;
    margin-top: 40px;
    overflow: hidden;
}

.idx_title {
    overflow: hidden;
    line-height: 60px;
    margin-top: 20px;
}

.idx_container .tit {
    font-size: 22px;
    color: #666;
    line-height: 60px;
}

.idx_container .see_all {
    float: right;
    font-size: 16px;
    color: #666;
    position: relative;
    top: 18px;
}

.idx_container .see_all:hover {
    color: #ff6700;
}


.idx_container .col_5 {
    width: 229px;
    margin-left: 15px;
    margin-bottom: 15px;
    background-color: #fff;
    float: left;
}

.idx_container .idx_box {
    clear: both;
}

.idx_container .adv_box {
    float: left;
}

.adv_box .col_5 {
    margin-left: 0;


}

.idx_container .adv_box .single img {
    width: 229px;
    display: block;
    height: 615px;
}

.idx_box .good_box {
    float: right;
    width: 976px;
}

.idx_contaier .good_item {
    background-color: #fff;
    height: 300px;
    position: relative;
}