HTML+CSS仿小米商城部分模块

? !

于 2023-03-26 20:45:14 发布

阅读量137

点赞数

分类专栏： web前端基础文章标签： css3 html5 前端 css Powered by 金山文档

本文链接：https://blog.csdn.net/qq_44829421/article/details/129784282

版权

web前端基础专栏收录该内容

5 篇文章 2 订阅

订阅专栏

效果图：

代码展示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>仿小米商城模块</title>
    <style type="text/css">
        .container_1 {
            width: 1226px;
            /* border: 1px solid red; */
            margin: auto;
        }
        .box_1 {
            width: 231px;
            height: 165px;
            background-color: #5F5750;
            /* border: 1px solid black; */
            float: left;
        }
        
        [class^="block"] {
            width: 76px;
            height: 82px;
            float: left;
            opacity: 0.5;
        }
        
        [class^="block"]:hover {
            opacity: 1;
        }
        
        .box_1 a {
            display: inline-block;
            width: 70px;
            height: 63px;
            font-size: 12px;
            text-decoration: none;
            color: #FFFFFF;
            padding: 18px 0px 0px;
            text-align: center;
        }
        
        [class^="img_block"] {
            width: 24px;
            height: 24px;
            margin: 0px 23px 4px;
        }
        
        [class^="h_line"] {
            width: 1px;
            height: 70px;
            background-color: #665E57;
            margin-top: 6px;
            float: left;
        }
        
        [class^="w_line"] {
            width: 64px;
            height: 1px;
            background-color: #665E57;
            margin-left: 6px;
            float: left;
        }
        
        .w_line_1,.w_line_2 {
            margin-right: 6px;
        }
        
        .box_2,.box_3,.box_4 {
            width: 316px;
            height: 165px;
            margin-left: 15px;
            float: left;
        }
        
        [class^="p_box"] {
            width: 316px;
        }
        
        [class^="p_box"]:hover {
            box-shadow: 10px 10px 20px #ccc;
            transition: 1s;
        }
        
        .box_5 {
            width: 1226px;
            height: 120px;
            margin-top: 32px;
            padding-top: 32px;
            background-color: #F5F5F5;
            float: left;
        }
        
        .big_box {
            width: 1226px;
        }
    </style>
</head>
<body>
    <div class="container_1">
        <div class="box_1">
            <div class="block_1">
                <a href="">
                    <img class="img_block1" src="./img/保障服务.png" alt="">
                    保障服务
                </a>
            </div>
            <div class="h_line_1"></div>
            <div class="block_2">
                <a href="">
                    <img class="img_block1" src="./img/企业团购.png" alt="">
                    企业团购
                </a>
            </div>
            <div class="h_line_2"></div>
            <div class="block_3">
                <a href="">
                    <img class="img_block1" src="./img/F码通道.png" alt="">
                    F码通道
                </a>
            </div>
            <div class="w_line_1"></div>
            <div class="w_line_2"></div>
            <div class="w_line_2"></div>
            <div class="block_4">
                <a href="">
                    <img class="img_block1" src="./img/米粉卡.png" alt="">
                    米粉卡
                </a>
            </div>
            <div class="h_line_3"></div>
            <div class="block_5">
                <a href="">
                    <img class="img_block1" src="./img/以旧换新.png" alt="">
                    以旧换新
                </a>
            </div>
            <div class="h_line_4"></div>
            <div class="block_6">
                <a href="">
                    <img class="img_block1" src="./img/话费充值.png" alt="">
                    话费充值
                </a>
            </div>
        </div>
        <div class="box_2">
            <a href="#">
                <img class="p_box_1" src="./img/K60.jpg" alt="">
            </a>
        </div>
        <div class="box_3">
            <a href="#">
                <img class="p_box_2" src="./img/mi13.jpg" alt="">
            </a>
        </div>
        <div class="box_4">
            <a href="#">
                <img class="p_box_3" src="./img/mimix.jpg" alt="">
            </a>
        </div>
        <div class="box_5">
            <a href="#">
                <img class="big_box" src="./img/米家.webp.jpg" alt="">
            </a>
        </div>
    </div>
</body>
</html>