弄了两天左右，把这个经典案例做出来了。
下面是成品图：
html代码：
<!doctype html><html> <head> <meta chart="utf-8" /> <title>云道官网</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <!-- 顶部导航栏 --> <div class="top"> <div class="top-inner"> <a href="#"><img src="img/logo.png" /></a> <ul class="nav"> <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> <!-- banner --> <div class="banner"> <a href="#"><img src="img/banner.png" ></a> </div> <!-- 我们的服务模块 --> <div class="rvice"> <div class="rvice-hd"> <h3><img src="img/r.png" ></h3> <p>shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！</p> </div> <div class="rvice-bd"> <ul> <li> <img src="img/icon1.png" > <h3>我是卖家</h3> <p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和 品牌营销的全新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p> <a href="#">我要建站</a> </li> <li class="yingxiao"> <img src="img/icon2.png" > <h3>我要营销</h3> <p>云道不断完善的营销系统,联合优质媒体资源,集成常用的网络营销模式及终端，以最简单的产品形态,帮助独立商城实现店铺及商品信息在全网的快速分销。</p> <a href="#">我要推广</a> </li> <li> <img src="img/icon3.png" > <h3>媒体合作</h3> <p>真正的全民营销时代,无需学习,无需维护。通过您的网站、朋友圈、媒体流量、移动展现、媒体解决方案获取收益。我们致力于实现合作媒体流量价值的最大化。</p> <a href="#">我要合作</a> </li> </ul> </div> </div> <!-- 经典案例模块 --> <div class="ca"> <div class="rvice-hd"> <h3><img src="img/ca.png" ></h3> </div> <div class="ca-lect"> <ul> <li> <img src="img/rv.jpg" > <p>帮助中小企业快速开启阿萨德打撒电子商务</p> <a href="#"><div class="mask"></div></a> </li> <li class="li_2"> <img src="img/download.png" > <p>帮助中小企业快速开启阿萨德打撒电子商务</p> <a href="#"><div class="mask"></div></a> </li> <li> <img src="img/pro.png" > <p>帮助中小企业快速开启阿萨德打撒电子商务</p> <a href="#"><div class="mask"></div></a> </li> </ul> <a href="#" class="ca-left"><img src="img/jt_l.png" ></a> <a href="#" class="ca-right"><img src="img/jt_r.png" ></a> </div> </div> <!-- 合作媒体模块 --> <div class="media"> <div class="rvice-hd"> <h3><img src="img/media.png" ></h3> </div> <div class="media_bd"> <ul> <li><a href="#"><div class="tb"></div></a></li> <li><a href="#"><img src="img/jd.png" alt=""></a></li> <li><a href="#"><img src="img/sp.png" alt=""></a></li> <li><a href="传染病防控#"><img src="img/al.png" alt=""></a></li> <li><a href="#"><img src="img/zk.png" alt=""></a></li> <li><a href="#"><div class="tb"></div></a></li> <li><a href="#"><img src="img/jd.png" alt=""></a></li> <li><a href="#"><img src="img/sp.png" alt=""></a></li> <li><a href="#"><img src="img/al.png" alt=""></a></li> <li><a href="#"><img src="img/zk.png" alt=""></a></li> <li><a href="#"><div class="tb"></div></a></li> <li><a href="#"><img src="img/jd.png" alt=""></a></li> <li><a href="#"><img src="img/sp.png" alt="">变色龙剧本;</a></li> <li><a href="#"><img src="img/al.png" alt=""></a></li> <li><a href="#"><img src="img/zk.png" alt=""></a></li> 网恋qq </ul> </div> </div> <!-- 底部网站信息 -->硫酸铜加氢氧化钠 <div class="footer"> <div class="footer_hd"> <a href="#">shopcmd </a> <a href="#">首页 </a> <a href="#">官网云商城 </a> <a href="#">智慧门店 </a> <a href="#">营销平台 </a> <a href="#">媒体联盟 </a> <a id="last" href="#">关于我们 </a> </div> <div class="footer_bd"> <p>@copyright 2015 苏州海云网络科技有限公司版权所有 | 苏icp备15038170号 -3</p> </div> </div> </body></html>
css代码：
*{ padding: 0px; margin: 0px;}a{ color: black; text-decoration: none;}body{ background-color: #fafafa;}li{ list-style: none;}.top{ background-color: #ffffff;}.top a:hover{ color: #2288f6;}.nav{ float: right; display: inline-block;}.nav li{ display: inline-block; margin: 0 20px;}.nav li a{ line-height: 100px;}.top-inner{ width: 1200px; height: 100px; margin: 0 auto;}.banner { text-align: center;}.rvice{ width: 1005px; margin:0 auto; margin-top:74px;}.rvice-hd{ border-top:1px solid #ccc; margin: 52px auto; width: 1005px;}.rvice-hd img{ width: 167px; height: 45px;}.rvice-hd h3{ width: 167px; height: 44px; margin:0 auto; background-color: #fff ; margin-top:-22px;}.rvice-hd p{ margin:0 auto; color:#666; text-align:center; font-size:12px; margin:15px 87.5px 0px;}.yingxiao{ margin: 0 20px;}.rvice-bd{ overflow: hidden; margin-top:40px;}.rvice-bd li{ background-color: white; width: 318px; height: 508px; list-style: none; float: left; border: 1px solid #e7e8e9;}.rvice-bd h3{ text-align: center; font-weight: normal; height: 40px;}.rvice-bd img{ margin: 40px 35px; width: 248px; height: 132px;}.rvice-bd p{ margin: 0 43px; font-size: 12px; color: #666; line-height: 25px; height: 123px;}.rvice-bd a{ display: block; width: 148px; height: 38px ; border: 1px solid #ff9412; margin: 0 auto; text-align: center; line-height: 38px; color: #ff9412; font-size: 12px; border-radius: 5px; margin-top: 20px;}.rvice-bd a:hover{ background-color: #ff9412; color: white;}.ca-lect{ margin: 80px auto 0; width: 1055px; position: relative;}.ca{ background-color: white; margin: 75px 0; padding:30px 0 40px;}.ca-lect li{ float: left; width: 322px; height: 211px; position: relative;}.ca-lect li img{ width: 322px; height: 211px;}.ca-lect li p{ width: 100%; position: absolute; bottom: 0px; line-height: 45px; background-color: rgba(6,6,6,0.3); color: #ffffff; text-align: center; font-size: 12px;}.ca-left,.ca-right{ float: left; background-color: rgba(6,6,6,0.1) ; width: 60px; height: 60px; border-radius: 100%; text-align: center; top: 38%; position: absolute;}.caccompanyinga-left{ left: -78px;}.ca-right{ right: -78px;}.ca-lect a img{ height: 50%; margin: 25% 0 0 0 ;}.ca-left:hover,.ca-right:hover{ background-color: rgba(86,169,239,0.8);}li:hover .mask{ background: rgba(6,6,6,0.5) url(../img/fdj.png) center no-repeat; height: 100%; width: 100%; position: absolute; bottom: 0;}.li:hover>.mask{}.li_2{ margin:0 40px ;}.ca ul{ overflow: hidden;}.media{ width: 1100px; margin: 0 auto;}.media_bd ul{ width: 1055px;}.media_bd{ overflow: hidden; width: 1053px; height: 240px;}.media_bd a{ text-align: center; }.media_bd li{ float: left; border-right:1px #cccccc dashed ; border-bottom:1px #ccc dashed; padding-top: 20px; width: 210px; height: 60px; text-align: center;}.tb{ display: inline-block; width: 104px; height: 41px; background: url(../img/tb.png) no-repeat center;}.tb:hover{ background: url(../img/tb2.png) no-repeat center;}.footer{ margin-top: 100px;}.footer{ height: 160px; background-color: #232425; width: 100%;}.footer_hd{ padding-top: 40px; margin: 0 auto; text-align: center;}.footer_hd a{ color: white; font-size: 14px; border-right: white solid 1px; margin-right: 10px; padding-right: 10px;}.footer_bd{ margin: 0 auto; color: #888; text-align: center; margin-top: 30px;}.footer_hd a:hover{ color: #2288f6; text-decoration: underline;}#last{ border: none;}html+css+图片素材：
本文发布于:2023-04-03 18:32:34，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/112e9c59e0d15f3a6b8714baffad68bf.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：(html+css)云道首页.doc
本文 PDF 下载地址：(html+css)云道首页.pdf
| 留言与评论（共有 0 条评论） |
