利用HTML、CSS仿小米商城商品列表-CFANZ编程社区

HTML源码：

<!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>
</head>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="../css/buju.css">

<body>

    <div class="box">
        <div class="one">
            <!-- 图片 -->
            <a href="#">
                <img src="../img/k50.jpg" alt="Redmi K50 电竞版" class="pic">
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <h5 class="font">
                    Redmi K50 电竞版
                </h5>
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <p class="ms">
                    全线拉满的冷血旗舰
                </p>
            </a>
            <!-- 价格 -->
            <a href="#">
                <p class="jg">3299元起</p>
            </a>
        </div>
        <div class="tow">
            <!-- 图片 -->
            <a href="#">
                <img src="../img/12.jpg" alt="xiaomi 12 Pro" class="pic">
            </a>
            <a href="#">
                <!-- 商品描述 -->
                <h5 class="font">
                    xiaomi 12 Pro
                </h5>
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <p class="ms">
                    全新骁龙8
                </p>
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <p class="ms2">
                    2kAMODED屏幕
                </p>
            </a>
            <!-- 价格 -->
            <a href="#">
                <p class="jg">4699元起</p>
            </a>
        </div>
        <div class="three">
            <!-- 图片 -->
            <a href="#">
                <img src="../img/mi12.jpg" alt="Xiaomi  12" class="pic">
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <h5 class="font">
                    Xiaomi 12
                </h5>
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <p class="ms">
                    全新骁龙8
                </p>
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <p class="ms2">
                    5000万主摄
                </p>
            </a>
            <!-- 价格 -->
            <a href="#">
                <p class="jg">3699元起</p>
            </a>
        </div>
        <div class="four">
            <!-- 图片 -->
            <a href="#">
                <img src="../img/12x.jpg" alt="Xiaomi 12X" class="pic">
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <h5 class="font">
                    Xiaomi 12X
                </h5>
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <p class="ms">
                    骁龙870
                </p>
            </a>
            <!-- 商品描述 -->
            <a href="#">
                <p class="ms2">
                    5000万主摄
                </p>
            </a>
            <!-- 价格 -->
            <a href="#">
                <p class="jg">2999元起</p>
            </a>
        </div>
    </div>
</body>

</html>

css源码：

* {
    /* 全局设定内外边距为0 */
    margin: 0px;
    padding: 0px;
}
body{
    /* body颜色为f5f5 */
    background-color: #f5f5f5;
}
body a{
    /* 去掉下划线 */
    text-decoration: none;
}
.box {
    /* 最外层div居中显示 */
    width: 1400px;
    height: 450px;
    margin: 180px auto;
}
/* 关键帧 100%时1.1倍放大 */
@keyframes donghua {  
    100%{
        transform: scale(1.1);
        }
}
.one:hover {
    /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.tow:hover {
    /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.three:hover {
      /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.four:hover {
     /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}

.box .pic {
    /* 图片内边距 */
    padding: 0px 20px;
} 
.box .font{
    /* 字体大小 外边距 */
    color: #5f5f5f;
    margin:10px 60px;
    font-size: 14px;
}
.box .ms {
    /* 左浮动 字体大小 外边距 */
    float: left;
    color: #c2c2c2;
    font-size: 12px;
    margin-left: 60px;
}
.box .ms2 {
    /* 左浮动 字体大小 内、外左边距  左侧边框颜色和字体颜色一样*/
    float: left;
    color: #c2c2c2;
    font-size: 12px;
    margin-left: 5px;
    padding-left: 5px;
    border-left: 2px solid #c2c2c2;
}
.box .jg {
    /* 外边距 字体颜色 */
    margin: 50px 100px;
    color: #FFAF78;
}
.one {
    /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 300px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
    
}
 .tow {
    /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */

    float: left;
    width: 300px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}
.three {
    /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */

    float: left;
    width: 300px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}
.four {
    /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */

    float: left;
    width: 300px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}