代码地址：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; }