电商平台界面设计与功能模块示例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_71169037/article/details/129626484

淘宝

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>淘宝</title>
        <style>
            .goods{
                width: 220px;
                height: 360px;
                border: 1px solid #f40;
            }
            img{
                width: 220px;
            }
            .price{
                margin-left: 5px;
                margin-right: 5px;
            }
            .price>span{
                line-height: 20px;
                vertical-align: middle;
            }
            .price>span:first-child{
                color: #f40;
                font-size: 20px;
                font-weight: bold;
            }
            .price>span:nth-child(2){
                font-size: 12px;
                background-color: #f40;
                color: white;
                padding-left: 1px;
                padding-right: 1px;
            }
            .price>span:last-child{
                float: right;
                font-size: 12px;
                color: #888;
            }
            #des{
                margin-left: 5px;
                margin-right: 5px;
            }
            #des>a{
                color: #444;
                font-size: 12px;
                text-decoration: none;
            }
            #la:hover{
                background: #f40;
            }
            #la:hover > .label{
                display: block;
            }
            #la:hover > .lab{
                display: block;
            }
            #des2>a:link{
                color: #888;
                font-size: 12px;
                text-decoration: underline;
            }
            .goods>img{
                float: left;
                text-align: center;
                position: relative;
            }
            .goods>img:hover{
                background: #f40;
            }
            .label{
                width:109px;
                height: 30px;
                border-right: 2px solid white;
                float: left;
                top:199px;
                text-align: center;
                line-height: 30px;
                background: #f40;
                color: white;
                position: absolute;
                display: none;
            }
            .lab{
                width:109px;
                height: 30px;
                float: right;
                top:199px;
                right:27px;
                text-align: center;
                line-height: 30px;
                background: #f40;
                color: white;
                position:absolute;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="goods">
                <a id="la" href="#"><img src="../../picture/cloth.jpg" alt=""></a>
                <div class="label">
                    <span>找同款</span>
                </div>
                <div class="lab">
                    <span>找相似</span>
                </div>
                <div class="price">
                    <span>￥34.56</span>
                    <span>包邮</span>
                    <span>1亿+人付款</span>
                </div>
                <div id="des">
                    <a href="#">我家坤坤同款卫衣，穿上唱跳篮球rap，属性拉满</a>
                </div>
                <div id="des2">
                    <a href="#">坤坤旗舰店</a>
                </div>
                
            </div>
        </div>
    </body>
</html>

小米商城

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>小米商城</title>
        <style type="text/css">
            .td1{
                width: 240px;
                height: 200px;
                background-color: #757575;
            }
            .td1>div{
                width: 80px;
                height: 100px;
                float: left;
                text-align: center;
            }
            .bz{
                border-left: 1px solid white;
                margin-left: 10px;
                opacity: 0.5;
            }
            .mf{
                border-left: 1px solid white;
                margin-left: 10px;
                opacity: 0.5;
            }
            .img{
                opacity: 0.5;
                margin-top: 5px;
            }
            .img:hover{
                opacity: 1;
            }
            a{
                font-size: 20px;
                text-decoration: none;
                color: white;
                
            }
            a:hover{
                opacity: 1;
            }
            .td2{
                width:240px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <table>
                <tbody>
                    <tr>
                        <td class="td1">
                            <div class="bz">
                                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                                    <div class="img">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&amp;h=48" alt="服务保障">
                                        <br>保障服务
                                    </div>
                                </a>
                            </div>
                            <div class="bz">
                                <a href="https://qiye.mi.com/">
                                    <div class="img">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&amp;h=48" alt="企业团购">
                                        <br>企业团购
                                    </div>
                                </a>
                            </div>
                            <div class="bz">
                                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                                    <div class="img">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&amp;h=48" alt="F码通道">
                                        <br>F码通道
                                    </div>
                                </a>
                            </div>
                            <div class="mf">
                                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                                    <div class="img">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&amp;h=48" alt="米粉卡">
                                        <br>米粉卡
                                    </div>
                                </a>
                            </div>
                            <div class="mf">
                                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                                    <div class="img">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&amp;h=48" alt="以旧换新">
                                        <br>以旧换新
                                    </div>
                                </a>
                            </div>
                            <div class="mf">
                                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                                    <div class="img">
                                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&amp;h=48" alt="话费充值">
                                        <br>话费充值
                                    </div>
                                </a>
                            </div>
                        </td>
                        <td class="td2">
                            <a href="https://www.mi.com/shop/buy/detail?product_id=18075">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&amp;h=340" alt="">
                            </a>
                        </td>
                        <td class="td2">
                            <a href="https://www.mi.com/shop/buy/detail?product_id=10050021">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&amp;h=340" alt="">
                            </a>
                        </td>
                        <td class="td2">
                            <a href="https://www.mi.com/xiaomimixfold2">
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&amp;h=340" alt="">
                            </a>
                        </td>
                    </tr>
                </tbody>
        </table>
    </body>
</html>