頁面結構 / 樣式效果分析：
細節分析：
① 頁面頭部由 header 標簽嵌套 img 標簽。
② 每個是商品由 div 標簽嵌套 img 標簽構成，商品上面的文字層由 div 標簽嵌套 h3 和 p 標簽構成。
③ 商品列表下方的文字由 section 標簽嵌套 p 標簽構成，頁面最下面的部分由 footer 標簽嵌套 p 標簽和 div 標簽構成。
④ “最新肉肉”按鈕用 css 圓角邊框。
⑤ 當鼠標懸停到每個商品上面時 ，會顯示出文字信息的 div 層，該層上應用了旋轉和過渡組合，形成了旋轉出現的動畫效果，z-index 值設置為 4000，因為要顯示在最上面。
⑥ 商品圖片層中間還有兩個交匯的三角形的效果，它們不是兩個 div 構成，而是使用 css 偽選擇器 “:before” 和 “:after” 結合 css3 旋轉和過渡、定位等給商品 div 前后添加的動畫背景。
代碼實現：
HTML結構
<!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; 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); /* 變形： 旋轉55度，水平（向右）移動60px */ transform: rotate(55deg) translateX(60px); -webkit-transform: rotate(55deg) translateX(60px); transform-origin: 100% 0%; /* 設置元素變形起始點 */ -webkit-transform-origin: 100% 0%; /* 過渡動畫：所有屬性都改變，時長 0.5s，速率逐漸變慢，延遲 0.3s */ transition: all 0.5s ease 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; }