代碼地址：https://github.com/sandraryan/practise/tree/master/%E9%9D%99%E6%80%81%E9%A1%B5%E9%9D%A2/%E4%BA%91%E9%81%93%E9%9D%99%E6%80%81%E9%A6%96%E9%A1%B5
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>雲道</title> <link rel="stylesheet" href="index.css"> </head> <body> <!-- header --> <div class="header"> <div class="header-content"> <img src="images/logo.gif"> <ul> <li><a href="">首頁</a></li> <li><a href="">雲雲商城</a></li> <li><a href="">智慧門店</a></li> <li><a href="">營銷平台</a></li> <li><a href="">媒體聯盟</a></li> <li><a href="">關於雲道</a></li> </ul> </div> </div> <div> <img src="images/banner.gif"> </div> <!-- service --> <div class="service"> <h3>我們的服務</h3> <p class="slogan">PROGRAM HIGHLIGHTS</p> <p class="intro">shopcmd雲道，國內領先的獨立電商解決方案及全渠道營銷平台。完整的產品體系，簡約的系統，個性化前端，全覆蓋多渠道營銷體系... 我們致力於打造一個服務於品牌商城/獨立電商的完整生態，讓企業的獨立電商之路變得更簡單，也更有價值！ </p> <div class="sales"> <img src="images/service1.gif"> <h5>我是賣家</h5> <p>shopcmd雲電商解決方案，我們不僅僅是領先的獨立商城建站系統。我們 從互聯網時代品牌建設和品牌營銷的全 新視角，賦予了品牌商城及獨立電商更 大的生存空間和存在價值！</p> <input type="button" value="我要建站"> </div> <div class="promotion"> <img src="images/service2.gif"> <h5>我要營銷</h5> <p>shopcmd雲電商解決方案，我們不僅僅是領先的獨立商城建站系統。我們 從互聯網時代品牌建設和品牌營銷的全 新視角，賦予了品牌商城及獨立電商更 大的生存空間和存在價值！</p> <input type="button" value="我要推廣"> </div> <div class="media"> <img src="images/service3.gif"> <h5>媒體合作</h5> <p>shopcmd雲電商解決方案，我們不僅僅是領先的獨立商城建站系統。我們 從互聯網時代品牌建設和品牌營銷的全 新視角，賦予了品牌商城及獨立電商更 大的生存空間和存在價值！</p> <input type="button" value="我要合作"> </div> </div> <!-- case --> <div class="case"> <h3>經典案例</h3> <p> THE CLASSICAL CASES</p> <img class="side" src="images/left.gif" > <img class="cases" src="images/case1.gif" > <img class="cases" src="images/case2.gif" > <img class="cases" src="images/case3.gif" > <img class="side" src="images/right.gif" > </div> <!--related --> <div class="related"> <h3>合作媒體</h3> <p> RELATED MEDIA</p> <div class="links"> <ul> <li><a href=""> <img src="images/tb.gif" alt=""></a></li> <li><a href=""> <img src="images/ali.gif" alt=""></a></li> <li><a href=""> <img src="images/zks.gif" alt=""></a></li> <li><a href=""> <img src="images/jd.gif" alt=""></a></li> <li><a href=""> <img src="images/shopex.gif" alt=""></a></li> </ul> </div> <div class="links"> <ul> <li><a href=""> <img src="images/tb.gif" alt=""></a></li> <li><a href=""> <img src="images/ali.gif" alt=""></a></li> <li><a href=""> <img src="images/zks.gif" alt=""></a></li> <li><a href=""> <img src="images/jd.gif" alt=""></a></li> <li><a href=""> <img src="images/shopex.gif" alt=""></a></li> </ul> </div> <div class="links"> <ul> <li><a href=""> <img src="images/tb.gif" alt=""></a></li> <li><a href=""> <img src="images/ali.gif" alt=""></a></li> <li><a href=""> <img src="images/zks.gif" alt=""></a></li> <li><a href=""> <img src="images/jd.gif" alt=""></a></li> <li><a href=""> <img src="images/shopex.gif" alt=""></a></li> </ul> </div> </div> </body> </html>
css
body { margin: 0; padding: 0; } /* header */ .header { height: 80px; } .header-content { width: 80%; height: 80px; margin: 0 auto; } .header-content img { float: left; height: 80px; margin-left: 20px; margin-right: 80px; } .header-content ul { margin: 0 auto; list-style: none; } .header-content ul li { text-decoration: none; float: left; } .header-content ul li a { width: 80px; height: 80px; display: inline-block; text-decoration: none; color: black; margin: 0 5px; text-align: center; line-height: 80px; font-size: 16px; } .header-content ul li a:hover { color: blue; } /* service */ .service { width: 80%; margin: 0 auto; height: 650px; } .service h3 { text-align: center; font-size: 26px; margin-bottom: 0; } .service .slogan { text-align: center; margin-top: 2px; } .service .intro { font-size: 12px; color: gray; text-align: center; line-height: 26px; } .sales, .promotion, .media { width: 300px; height: 500px; border: 1px solid lightgray; float: left; margin: 10px; } .sales img, .promotion img, .media img { width: 250px; height: 130px; margin: 30px 25px; } .sales h5, .promotion h5, .media h5 { text-align: center; font-size: 18px; font-weight: 400; } .sales p, .promotion p, .media p { text-align: center; font-size: 12px; color: gray; line-height: 26px; padding: 25px; } .sales input, .promotion input, .media input{ display: block; width: 140px; height: 40px; margin: 0 80px; background-color: white; border: 1px solid orange; border-radius: 10px; } .sales input:hover, .promotion input:hover, .media input:hover{ background-color: orange; transition: 1s; } /* case */ .case{ width: 90%; margin: 50px auto; clear: both; } .case h3 { text-align: center; font-size: 26px; margin-bottom: 0; } .case p{ text-align: center; margin-top: 2px; } .case .cases{ width: 300px; height: 200px; margin: 5px 10px; } .case .side { width: 60px; height: 50px; margin: 75px 0; } /* media */ .related { width: 80%; margin: 0 auto; } .related h3 { text-align: center; font-size: 26px; margin-bottom: 0; } .related p{ text-align: center; margin-top: 2px; } .links { width: 100%; border: 1px dotted gray; height: 100px; margin: 10px; } .related ul li{ text-decoration: none; list-style: none; margin: 0 auto; } .related ul li a{ /* display: inline-block; */ float: left; text-decoration: none; margin: 10px; padding:9px 40px; } .related ul li img{ width: 80px; height: 50px; }