项目3_花匠小妙招

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/succulent.css"> <title>多肉商城</title> </head> <body> <header> <img src="images/head.jpg"> </header> <div class="border-radius">最新肉肉</div> <div class="main"> <div class="view"> <img src="images/1.jpg" alt=""> <div class="hover"> <h3>多肉仙人掌</h3> <p>多肉植物防辐射肉肉植物花卉绿植盆栽</p> </div> </div> <div class="view"> <img src="images/7.jpg" alt=""> <div class="hover"> <h3>创意组合</h3> <p>多肉组合盆栽净化空气办公桌礼物套餐</p> </div> </div> <div class="view"> <img src="images/3.jpg" alt=""> <div class="hover"> <h3>创意组合</h3> <p>多肉组合盆栽净化空气办公桌礼物套餐</p> </div> </div> <div class="view"> <img src="images/4.jpg" alt=""> <div class="hover"> <h3>创意组合</h3> <p>多肉组合盆栽净化空气办公桌礼物套餐</p> </div> </div> <div class="view"> <img src="images/5.jpg" alt=""> <div class="hover"> <h3>创意组合</h3> <p>多肉组合盆栽净化空气办公桌礼物套餐</p> </div> </div> <div class="view"> <img src="images/6.jpg" alt=""> <div class="hover"> <h3>创意组合</h3> <p>多肉组合盆栽净化空气办公桌礼物套餐</p> </div> </div> <div class="view"> <img src="images/2.jpg" alt=""> <div class="hover"> <h3>多肉仙人掌</h3> <p>多肉植物防辐射肉肉植物花卉绿植盆栽</p> </div> </div> <div class="view"> <img src="images/8.jpg" alt=""> <div class="hover"> <h3>创意组合</h3> <p>多肉组合盆栽净化空气办公桌礼物套餐</p> </div> </div> </div> <section> <p>多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花（Flower ['flauə]）、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。全世界共有多肉植物一万余种，它们绝大部分属于高等植物（绝大多数是被子植物）。在植物分类上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。 </p> </section> <footer> <p>偏安一偶静静生活</p> <div class="services">品质保障|七天无理由退换货|特色服务体验 </div> </footer> </body> </html> CSS: 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: 'STXingkai'; font-size:18px; color: #fff; line-height:30px; padding: 20px; text-indent: 2em;/*文本段落首行缩进两格*/ } footer { width: 880px; margin: 0 auto; } footer>p { font-family: 'STXingkai'; 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 #fff; border-radius: 50px;/*四个边框圆角半径都是50px*/ font-family: 'Microsoft Yahei'; font-size:25px; color: #fff; line-height:50px; text-align: center; } /*当鼠标悬停在该元素时，绝对定位在父元素顶部-5px，以及给该元素加盒阴影*/ .border-radius:hover { top: -5px; box-shadow: 0 0 15px #AAA;/*模糊值为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: #fff; transform: rotate(55deg);/*变形：旋转55度*/ -webkit-transform: rotate(55deg); transition: all 0.5s;/*过渡：所有属性都改变，时长0.5s*/ -webkit-transition: all 0.5s; overflow: hidden; height: 0; z-index: 4000; /*设置元素的堆叠顺序，属性值越大，该元素层离用户越近*/ } .hover h3 { color: #fff; border-bottom: 2px solid rgba(76, 179,77, 0.5); padding-bottom: 10px; } .view:hover .hover { height: 120px; transform: rotate(0deg); -webkit-transform: rotate(0deg); } /*before after为选择器，一般给选择器加动画背景，设置动画样式*/ .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);/*变形：旋转55度，水平（向右）移动60px*/ -webkit-transform: rotate(55deg) translateX(60px); transform-origin: 100% 0%;/*设置元素变形起始点*/ -webkit-transform-origin: 100% 0%; transition: all 0.5s ease 0.3s;/*过渡动画：所有属性都改变，时长0.5s,速率逐渐变慢，延迟0.3s*/ -webkit-transition: all 0.5s ease 0.3s; } /*写好样式，进行隐藏，用top:-240px;*/ .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) translateX(-60px); -webkit-transform: rotate(55deg) translateX(-60px); transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; transition: all 0.5s ease 0.3s; -webkit-transition: all 0.5s ease 0.3s; } .view:hover:after { bottom: 0px; }

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220

项目3

数百个品种！来看这对“多肉夫妇”的“花花世界”~

红星社区举办多肉盆栽DIY活动

家庭养花知识大全(家庭养花知识大全与技巧)

养花知识大全,养花技巧大全

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处

项目3