前端实例-小米商城案例

最新推荐文章于 2023-12-08 14:49:02 发布

慕慕和小绵羊

最新推荐文章于 2023-12-08 14:49:02 发布

阅读量330

点赞数

分类专栏：前端Vscode 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_46617150/article/details/129300941

版权

前端Vscode 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

实现结果

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城案例</title>
    <style>
        /* 本案例使用到li，所以在样式开始之前需要清空内外边距以及li自带的圆点样式 */
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        /* 下面是布局的大框架，使用浮动布局将大致盒子位置先摆放 */
        .box {
            background-color: #f5f5f5;
            width: 1600px;
            height: 830px;
            margin: 0 auto;
        }
        li img {
            width: 280px;
            height: 355px;
        }
        .header {
            width: 1600px;
            height: 50px;
        }
        .header_left {
            float: left;
            font-size: 28px;
            font-family: "微软雅黑";
            font-weight: 200;
            margin-left: 30px;
            
        }
        .header_right {
            float: right;
            font-size: 20px;
            font-family: "微软雅黑";
            font-weight: 200;
            margin-right: 100px;
        }
        .left {
            width: 280px;
            height: 740px;
            float: left;
            margin-left: 30px;
        }
        .right {
            width: 1180px;
            height: 740px;
            float: left;
            margin-left: 20px;
        }
        .left img {
            width: 280px;
            height: 740px;
        }
        .right li {
            float: left;
            width: 280px;
            height: 360px;
            margin-right:20px;
            margin-bottom:20px;
            background-color: white;
        }
        li img {
            width: 280px;
            height: 240px;
        }
        .right .four,.right .last {
            margin-right:0px;
        }
        .right .five,.right .six,.right .seven,.right .last {
            margin-bottom: 0px;
        }
        /* 以下代码是li盒子里的文字信息部分 */
        li h3 {
            height: 30px;
            text-align: center;
            font-weight: 400;
        }
        li p {
            padding-left: 20px;
            height: 30px;
            color: #b0b0b0;
            font-size: 15px;
        }
        .prize {
            height: 60px;
            color: #ff6700;
            font-size: 20px;
            text-align: center;
        }
        /* 鼠标移动到链接上有阴影效果 */
        .left img:hover {
            box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
        }
        .right li:hover {
            box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">
            <span class="header_left">手机</span>
            <span class="header_right">查看更多</span>
        </div>
        <div class="left">
            <a href="#"><img src="imgs/mi_1.PNG"></a>
        </div>
        <div class="right">
            <ul>

                <li>
                   <a href="#"><img src="imgs/mi_2.PNG"></a>
                    <h3>Redmi 12C</h3>
                    <p>高性能长续航，5000万像素超清双摄</p>
                    <div class="prize">669元起</div>   
                </li>
                <li>
                    <a href="#"><img src="imgs/mi_3.PNG"></a>
                    <h3>Redmi K60</h3>
                    <p>晓龙8+|2K高光直屏|5500mAh+67...</p>
                    <div class="prize">2499元起</div>                   
                </li>
                <li>
                    <a href="#"><img src="imgs/mi_4.PNG"></a>
                    <h3>Redmi K60 Pro</h3>
                    <p>【第二代晓龙8】狂暴引擎</p>
                    <div class="prize">3299元起</div>
                </li>
                <li class="four">
                    <a href="#"><img src="imgs/mi_5.PNG"></a>
                    <h3>Redmi Note 12 Pro 极速版</h3>
                    <p>高通骁龙778G，OLED柔性直屏+一亿...</p>
                    <div class="prize">1669元起</div>
                </li>
                <li class="five">
                    <a href="#"><img src="imgs/mi_6.PNG"></a>
                    <h3>Xiaomi 13 限定定制色</h3>
                    <p>全新第二代晓龙8|徕卡专业光学镜头...</p>
                    <div class="prize">4999元</div>
                </li>
                <li class="six">
                    <a href="#"><img src="imgs/mi_7.PNG"></a>
                    <h3>Xiaomi 13Pro</h3>
                    <p>全新第二代晓龙8|徕卡专业光学镜头...</p>
                    <div class="prize">4999元起</div>
                </li>
                <li class="seven">
                    <a href="#"><img src="imgs/mi_8.PNG"></a>
                    <h3>Xiaomi 13</h3>
                    <p>全新第二代晓龙8|徕卡专业光学镜头...</p>
                    <div class="prize">3999元起</div>
                </li>
                <li class="last">
                    <a href="#"><img src="imgs/mi_9.PNG"></a>
                    <h3>Redmi Note 12 5G</h3>
                    <p>三星OLED护眼屏|晓龙5G芯|50</p>
                    <div class="prize">1199元起</div>
                </li>

            </ul>

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