首页 前端知识 HTML CSS仿淘宝商城商品栏模块

HTML CSS仿淘宝商城商品栏模块

2024-06-30 22:06:55 前端知识 前端哥 821 983 我要收藏

效果图:

代码展示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>仿淘宝</title>
        <style>        
            .goods {
                width: 220px;
                height: 360px;
                border: 1px solid #EDEDED;
            }
            
            .goods:hover {
                border-color: #f40;
            }
            
            .img_1 {
                width: 220px;
                height: 220px;
                background-size: 220px 220px;
                background-image: url("img/鸡哥卫衣图片.png");
                position: relative;
            }
            
            .img_1:hover>.block_1,.img_1:hover>.block_2 {
                display: block;
            }
            
            .block_1 {
                display: inline-block;
                width: 109px;
                height: 30px;
                background-color: #FF4400;
                margin-top: 190px;
                text-align: center;
                line-height: 30px;
                font-size: 15px;
                border-right: 1px solid white;
                position: absolute;
                display: none;
            }
            
            .block_2 {
                display: inline-block;
                width: 110px;
                height: 30px;
                background-color: #FF4400;
                margin-left: 110px;
                margin-top: 190px;
                text-align: center;
                line-height: 30px;
                font-size: 15px;
                position: absolute;
                display: none;
            }
            
            .block_1>a,.block_2>a {
                color: white;
                text-decoration: none;
            }

            .price {
                margin-top: 4px;
                padding: 0px 10px 0px;
            }

            .price>span {
                line-height: 22px;
                vertical-align: middle;
            }

            .price>span:first-child {
                color: #f40;
                font-size: 16px;
                font-weight: bold;
            }

            .price>span:nth-child(2) {
                font-size: 10px;
                background-color: #f40;
                color: white;
                padding-left: 1px;
                padding-right: 1px;
            }

            .price>span:last-child {
                float: right;
                font-size: 12px;
                color: #888;
            }

            #des {
                margin-top: 5px;
                padding: 0px 10px 0px;
            }

            #des>a {
                color: #444;
                font-size: 12px;
                text-decoration: none;
            }

            #des>a:hover {
                text-decoration: underline;
                color: #f40;
            }
            
            .text {
                margin-top: 5px;
                padding: 0px 10px 0px;
                /* border: 1px solid navy; */
            }

            .text_left {
                display: inline-block;
                margin-top: 6px;
                padding: 0px;
                width: 13px;
                height: 12px;
                /* border: 1px solid red; */
                float: left;
            }

            .text_left>.wire {
                display: inline-block;
                margin-top: 2px;
                padding: 0px;
                width: 8px;
                height: 2px;
                background-color: #FF4400;
                float: left;
            }

            .font_1 {
                font-size: 12px;
                padding: 0px;
                /* border: 1px solid green; */
            }

            .address {
                color: #888888;
                font-size: 12px;
                line-height: 23px;
                float: right;
                /* border: 1px solid green; */
            }
            
            .text>a:link {
                color: #888888;
            }
            
            .text>a:visited {
                color: #888888;
            }
            
            .text>a:hover {
                color: #FF4400;
            }
            
            .box {
                height: 18px;
                /* border: 1px solid red; */
                margin-top: 10px;
                padding: 0px 10px 0px;
            }
            .box>.picture_left_1 {
                display: inline-block;
                width: 16px;
                height: 16px;
                background-image: url('./img/淘宝精灵图左下角.png');
                background-position: 103px 73px;
                /* border: 1px solid black; */
                line-height: 20px;
            }
            
            .box>.picture_left_2 {
                display: inline-block;
                width: 16px;
                height: 16px;
                background-image: url('./img/淘宝精灵图左下角.png');
                background-position: 21px 111px;
                /* border: 1px solid black; */
            }
            
            .box>.picture_right_1 {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-image: url('./img/淘宝精灵图右下角.png');
                background-position: 24px 373px;
                float: right;
                /* border: 1px solid black; */
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="goods">
                <div class="img_1">
                    <span class="block_1"><a href="#">找同款</a></span>
                    <span class="block_2"><a href="#">找相似</a></span>
                </div>
                <div class="price">
                    <span>¥34.56</span>
                    <span>包邮</span>
                    <span>1亿+人付款</span>
                </div>
                <div id="des">
                    <a href="#">我家坤坤同款卫衣,穿上唱跳篮球rap属性拉满</a>
                </div>
                <div class="text">
                    <a href="#">
                        <span class="text_left">
                            <span class="wire"></span>
                            <span class="wire"></span>
                            <span class="wire"></span>
                        </span>
                        <span class="font_1">
                            鸡哥旗舰店
                        </span>
                    </a>
                    <span class="address">
                        广东&nbsp;广州
                    </span>    
                </div>
                <div class="box">
                    <div class="picture_left_1"></div>
                    <div class="picture_left_2"></div>
                    <div class="picture_right_1"></div>
                </div>
            </div>
        </div>
    </body>
</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13711.html
标签
评论
发布的文章

在echarts中使用geojson地图

2024-07-29 00:07:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!