web前端作业 3

最新推荐文章于 2024-07-17 13:47:47 发布

no caliper

最新推荐文章于 2024-07-17 13:47:47 发布

阅读量225

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/no_caliper/article/details/127870347

版权

前端 css3 html5

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用div+css布局制作一个仿淘宝商品列表

<!DOCTYPE html>
<html lang="zh">
<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>
        .good{
            border: 1px solid red;
            width: 220px;
            height: 360px;
        }
        .pic{
            width: 220px;
            height: 220px;
            position: relative;
        }
        .pic > img{
            width: 220px;
            height: 220px;
        }
        .find > div{
            width: 110px;
            background-color: #f40;
            color: white;
            text-align: center;
            float: left;
        }
        .find >div:first-child{
            width: 109px;
            border-right: 1px solid white;
        }
        .find{
            position: absolute;
            bottom: 0px;
            display: none;
        }
        .good:hover .find{
            display: block;
        }
        .find a{
            color: white;
            text-decoration: none;
        }
        .price,.des,.shopinfo,.icon{
            margin-top: 5px;
            margin-right: 5px;
            margin-left: 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){
            background-color: #f40;
            color: white;
            font-size: 14px;
        }
        .price > span:last-child{
            color: #777;
            font-size: 14px;
            float: right;
        }
        .des > a{
            color: #333;
            font-size: 14px;
            text-decoration: none;
        }
        .des > a:hover{
            color: #f40;
            text-decoration: underline;
        }
        .shopinfo > a:first-child,
        .shopinfo > span{
            color: #333;
            font-size: 14px;
        }
        .shopinfo > span{
            float: right;
        }
        .icon > span:first-child{
            display: inline-block;
            background-image: url("https://img.alicdn.com/imgextra/i1/O1CN01QuhUWL1xJKJw0hnvG_!!6000000006422-2-tps-62-32.png");
            width: 31px;
            height: 16px;
            background-size: cover;
        }
        .icon > span:nth-child(2){
            display: inline-block;
            width: 49px;
            height: 16px;
            border: 1px solid rebeccapurple;
            background-size: 308px 298px;
            background-position: -5px -113px;
            background-image: url("https://img.alicdn.com/tps/i3/TB1h9GMMpXXXXcSXVXXRJo3QFXX-616-596.png");
        }
        .icon>span:last-child {
            display: inline-block;
            float:right;
            background-size: 430px 426px;
            background-position: -172px -323px;
            width: 16px;
            height: 16px;
            background-image: url("https://img.alicdn.com/tps/i1/TB1D4e7MpXXXXbpXpXX8jvl4XXX-860-852.png");
        }
        .good{
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
        p{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="good">
            <div class="pic">
                <img src="kunkun.png" alt="">
                <div class="find">
                    <div><a href="#">找同款</a></div>
                    <div><a href="#">找相似</a></div>
                </div>
            </div>
            <div class="price">
                <span>￥219.00</span>
                <span>包邮</span>
                <span>3万+已购买</span>
            </div>
            <div class="des">
                <a href="#">我家哥哥最喜欢穿，对唱跳rap加成</a>
            </div>
            <div class="shopinfo">
                <a href="#">北冥有坤旗舰店</a>
                <span>四川成都</span>
            </div>
            <div class="icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</body>
</html>