界面小项目之小米商品排列

最新推荐文章于 2022-05-10 09:47:59 发布

weixin_30412013

最新推荐文章于 2022-05-10 09:47:59 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/huanghongzheng/p/11151990.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text4</title>
    <style>
        .wrapper {
            width: calc(200px * 5 + 40px) ;
            margin: 0 auto;
            border: 1px solid black;
        }
        .wrapper:after {
            content: '';
            display: block;
            clear: both;
        }
        .box {
            float: left;
            width: 200px;
            height: 260px;
            background-color: orange;
            margin-right: 10px;
            margin-bottom: 10px;
            /*position: relative;*/
        }
        .box:nth-child(5n) {
            margin-right: 0;
        }
        .t, .b {
            height: 125px;
            background-color: pink;
        }
        .t {
            margin-bottom: 10px;
        }
        .b1 {
            background-image: url("img/001.jpg");
            background-repeat: no-repeat;
            background-size: 200px 260px;
        }

        .b2 .b2-d1{
            height: 260px;
            width: 200px;
            background-color: white;
            position: relative;
        }
        .b2 .b2-d1 div {
            position: absolute;
            width: 50px;
            height: 30px;
            background-color: forestgreen;
            color: white;
            text-align: center;
            line-height: 30px;
            left:calc(50% - 25px)
        }

        .b2 .b2-d1 img {
            width: 150px;
            position: absolute;
            left: calc(50% - 75px);
            top: 50px;
        }

        .b2 .b2-d1 p {
            position: absolute;
            background-color: #cccccc;
            font-size: 15px;
            bottom: 10px;
            width: calc(100%);
            text-align: center;
        }

        .b2 .b2-d1 .f {
            width: calc(100%);
            background-color: #ff6700;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 0;
            overflow: hidden;
            transition: 0.2s;
        }
        .b2:hover .f{
            height: 60px;
        }
        .box {
            transition: 0.2s;
            top: 0;
        }
        .b2:hover .b2-d1{
            top: -5px;
            box-shadow: 0 0 5px 0 black;
        }
        /*.b2 {*/
            /*width: 200px;*/
            /*height: 260px;*/
            /**/
        /*}*/

        .b3 .d1 {
            width: 200px;
            height: 260px;
            position: relative;
        }
        .b3 .d1 div {
            position: absolute;
            width: 50px;
            height: 30px;
            background-color: forestgreen;
            color: white;
            text-align: center;
            line-height: 30px;
            left:calc(50% - 25px)
        }
        .b3 .d1 img {
            width: 150px;
            position: absolute;
            left: calc(50% - 75px);
            top: 50px;
        }
        .b3 .d1 p {
            position: absolute;
            background-color: #cccccc;
            font-size: 15px;
            bottom: 10px;
            width: calc(100%);
            text-align: center;
        }
        .b3 .d1 .t {
            width: calc(100%);
            background-color: #ff6700;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 0;
            overflow: hidden;
            transition: 0.2s;
        }
        .b3:hover .t{
            height: 60px;
        }
        .b3:hover .d1{
            top: -10px;
            box-shadow: 0 0 5px 0 black;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box b1"></div>
        <div class="box b2">
            <div class="b2-d1">
            <div>新品</div>
            <img src="img/002.jpg" alt="">
            <p>小米反馈方便快捷发</p>
            <div class="f">12545粉红色开发和是否国家和高科技回复可见高考恢复工具会计法哈饭卡i阿富汗高科技爱看飞机送就6</div>
            </div>
        </div>
        <div class="box b3">
            <div class="d1">
                <div>新品</div>
                <img src="img/003.jpg" alt="">
                <p>小米米家门锁</p>
                <div class="t">12545粉红色开发和是否国家和</div>
            </div>
        </div>
        <div class="box">

        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box">
            <div class="t"></div>
            <div class="b"></div>
        </div>
    </div>

</body>
</html>

转载于:https://www.cnblogs.com/huanghongzheng/p/11151990.html

weixin_30412013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
界面小项目之小米商品排列

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>text4</title> <style> .wrapper { width: calc(200px * 5 + 40px) ; ...
复制链接

扫一扫