多肉植物商城

最新推荐文章于 2023-05-14 12:15:41 发布
叫我小袁就好
最新推荐文章于 2023-05-14 12:15:41 发布
阅读量3.1k
点赞数 6
本文链接：https://blog.csdn.net/qq_42788101/article/details/90404418
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多肉植物商城</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        header{
            text-align: center;
            height: 450px;
            margin-top: 20px;
        }
        section{
            width: 880px;
            margin: 0 auto;
            background-color: #AAE6DA;
        }
        section>p{
            font-family: '';
            font-size: 18px;
            color: #ffffff;
            line-height: 30px;
            padding: 20px;
            text-indent: 2em;
        }
        footer{
            width: 880px;
            margin: 0 auto;
        }
        footer>p{
            font-size: 35px;
            color: #AAE6DA;
            line-height: 20px;
            padding: 20px;
            text-align: center;
        }
        .services{
            font-family: 'Microsoft Yahei';
            font-size: 15px;
            color: #374136;
            padding-bottom: 50px;
            text-align: center;
        }
        .border-radius{
            width: 200px;
            height: 50px;
            margin: 35px auto;
            background-color: #AAE6DA;
            border: 5px solid #ffffff;
            border-radius: 50px;
            font-family: 'Microsoft Yahei';
            font-size: 25px;
            color: #ffffff;
            line-height: 50px;
            text-align: center;
        }
        .border-radius:hover{
            top: -5px;
            box-shadow: 0 0 15px #AAA;
        }
        .main{
            width: 880px;
            border: 1px solid #CCC;
            height: 440px;
            margin: 0 auto;
        }
        .view{
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
            margin: 10px;
            float: left;
        }
        .hover{
            width: 200px;
            background: rgba(0,0,0,0.5);
            position: absolute;
            top: 40px;
            left: 0;
            text-align: center;
            color: #ffffff;
            transform: rotate(55deg);
            transition: all 0.5s;
            overflow: hidden;
            height: 0;
            z-index: 4000;
        }
        .hover h3{
            color: #ffffff;
            border-bottom: 2px solid rgba(76,179,77,0.5);
            padding-bottom: 10px;
        }
        .view:hover .hover{
            height: 120px;
            transform: rotate(0deg);
        }
        .view:before{
            content: "";
            position: absolute;
            top: -240px;
            right: 0;
            width: 360px;
            height: 360px;
            background: rgba(133,203,190,0.5);
            transform: rotate(55deg) translateX(60px);
        }
        .view:hover:before{
            top: 0;
        }
        view:after{
            content: "";
            position: absolute;
            bottom: -240px;
            left: 0;
            width: 360px;
            height: 360px;
            background: rgba(133,203,190,0.5);
            transform: rotate(55deg) translate(-60px);
            transfrom-origin: 0% 100%;
            transition: all 0.5s ease 0.3s;
        }
        .view:hover{
            bottom: 0px;
        }
    </style>
</head>
<body>
<header><img src="../../img/images0302/head.jpg"></header>
<div class="border-radius">最新肉肉</div>
<div class="main">
    <div class="view">
        <img src="../../img/images0302/1.jpg">
        <div class="hover">
            <h3>多肉仙人掌</h3>
            <p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p>
        </div>
    </div>
    <div class="view">
        <img src="../../img/images0302/2.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
        </div>
    </div>
    <div class="view">
        <img src="../../img/images0302/3.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉多肉多肉多肉多肉多肉</p>
        </div>
    </div>
    <div class="view">
        <img src="../../img/images0302/4.jpg">
        <div class="hover">
            <h3>多肉仙人掌</h3>
            <p>多肉植物防辐射 肉肉植物花卉绿植盆栽</p>
        </div>
    </div>
    <div class="view">
        <img src="../../img/images0302/5.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
        </div>
    </div>
    <div class="view">
        <img src="../../img/images0302/6.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉多肉多肉多肉多肉多肉</p>
        </div>
    </div>
    <div class="view">
        <img src="../../img/images0302/7.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉组合盆栽净化空气办公桌礼物套餐</p>
        </div>
    </div>
    <div class="view">
        <img src="../../img/images0302/8.jpg">
        <div class="hover">
            <h3>创意组合</h3>
            <p>多肉多肉多肉多肉多肉多肉</p>
        </div>
    </div>
    <section>
        <p>多肉植物（succulent plantA）是指植物的根、茎、叶三种营养器官中叶是肥厚多汁并且具备储藏大量水分功能的植物，也称“黄丽”。其至少具有一种肉质组织，这种组织是一种活组织，除其他功能外，它能储藏可利用的水，在土壤含水状况恶化、植物根系不能再从土壤中吸收和提供必要的水分时，它能使植物暂时脱离外界水分供应而独立生存。据粗略统计，全世界共有多肉植物一万余种，在分类上隶属100余科。</p>
    </section>
    <footer>
        <p>偏安逸偶  精精生活</p>
        <div class="services">品质保障|七天无理由退换货|特色服务体验</div>
    </footer>


</div>
</body>
</html>
袁同学——2019年5月21日