<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云道首页
</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="header">
<div class="inner">
<div class="logo">
<a href="#"><img src="https://s2.ax1x.com/2019/05/22/V927JU.png" /></a>
</div>
<div class="nav">
<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>
<div class="banner">
</div>
<div class="service">
<div class="service-hd">
<h3>
<img src="https://s2.ax1x.com/2019/05/22/V92HWF.png" />
</h3>
<p>shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系...
<br>我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！
</p>
</div>
<div class="service-bd">
<ul>
<li class="maijia">
<img src="https://s2.ax1x.com/2019/05/22/V92cRg.png">
<h3>我是卖家
</h3>
<p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们从互联网时代品牌建设和品牌营销的全新视角，赋予了品牌商城及独立电商更大的生存空间和存在价值！
</p>
<a href="#">我要建站
</a>
</li>
<li class="yingxiao">
<img src="https://s2.ax1x.com/2019/05/22/V924Zq.png">
<h3>我要营销
</h3>
<p>云道不断完善的营销系统，联合优质媒体资源，集成常用的网络营销模式及终端，以最简单的产品形态，帮助独立商城实现店铺及商品信息在全网的快速分销。
</p>
<a href="#">我要推广
</a>
</li>
<li class="hezuo">
<img src="https://s2.ax1x.com/2019/05/22/V92fLn.png">
<h3>媒体合作
</h3>
<p>真正的全民营销时代，无需学习，无需维护。通过您的网站、朋友圈、媒体流量、移动展现、媒体解决方案获取收益。我们致力于实现合作媒体流量价值的最大化。
</p>
<a href="#">我要合作
</a>
</li>
</ul>
</div>
</div>
<div class="case-bg">
<div class="case">
<div class="service-hd">
<h3>
<img src="https://s2.ax1x.com/2019/05/22/V92gzQ.png" />
</h3>
</div>
<div class="case-bd clearfix">
<ul>
<li>
<img src="https://s2.ax1x.com/2019/05/22/V92bz4.png">
<div class="text">帮助中小企业快速开启阿萨德打撒电子商务
</div>
<div class="mask"></div>
</li>
<li class="case-bd-m">
<img src="https://s2.ax1x.com/2019/05/22/V92TiT.gif">
<div class="text">帮助中小企业快速开启阿萨德打撒电子商务
</div>
<div class="mask"></div>
</li>
<li>
<img src="https://s2.ax1x.com/2019/05/22/V92LQJ.gif">
<div class="text">帮助中小企业快速开启阿萨德打撒电子商务
</div>
<div class="mask"></div>
</li>
</ul>
<a href="#" class="left"><
</a>
<a href="#" class="right">>
</a>
</div>
</div>
</div>
<div class="media">
<div class="service-hd">
<h3>
<img src="https://s2.ax1x.com/2019/05/22/V92IoV.png" />
</h3>
</div>
<div class="media-bd clearfix">
<ul class="clearfix">
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92Oy9.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V925d0.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92XLR.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V926JS.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92xdx.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92ve1.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V925d0.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92XLR.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V926JS.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92xdx.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92ve1.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V925d0.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92XLR.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V926JS.png">
</a>
</li>
<li>
<a href="#">
<img src="https://s2.ax1x.com/2019/05/22/V92xdx.png">
</a>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="subnav">
<a href="#">shopcmd
</a> |
<a href="#">首页
</a> |
<a href="#">官网云商城
</a> |
<a href="#">智慧门店
</a> |
<a href="#">营销平台
</a> |
<a href="#">媒体联盟
</a> |
<a href="#">关于我们
</a>
</div>
<p>
©Copyright 2015 苏州海云网络科技有限公司版权所有 | 苏ICP备15038170号-3
</p>
</div>
</body>
</html>
* {
margin: 0
;
padding: 0
;
}
body {
background-color: #fafafa
;
}
li {
list-style: none
;
}
.clearfix:after {
content: "";
display: block
;
height: 0
;
clear: both
;
visibility: hidden
;
}
.clearfix {
*
zoom: 1
;
}
.header {
height: 100px
;
background-color: #fff
;
}
.inner {
width: 1200px
;
height: 100px
;
margin: 0 auto
;
line-height: 100px
;
}
.logo {
float: left
;
}
.nav {
float: right
;
}
.nav li {
float: left
;
margin: 0 20px
;
}
.nav li a {
color: #333
;
text-decoration: none
;
}
.nav li a:hover {
color: #2288f6
;
}
.banner {
height: 620px
;
background: url(https://s2.ax1x.com/2019/05/22/V92Wss.jpg) no-repeat top center
;
}
.service {
width: 1055px
;
margin: 75px auto 0
;
}
.service-hd {
border-top: 1px solid #ccc
;
margin: 0 25px
;
}
.service-hd h3 {
width: 166px
;
height: 46px
;
margin: -13px auto 0
;
}
.service-hd p {
font-size: 12px
;
color: #666
;
line-height: 26px
;
text-align: center
;
width: 830px
;
margin: 15px auto 0
;
}
.service-bd {
margin-top: 40px
;
overflow: hidden
;
}
.service-bd li {
width: 320px
;
height: 510px
;
background-color: #fff
;
float: left
;
border: 1px solid #e7e8e9
;
}
.service-bd .maijia img {
margin: 40px 35px
;
}
.service-bd .yingxiao img {
margin: 36px 50px 28px
;
}
.service-bd .hezuo img {
margin: 40px 35px 38px
;
}
.service-bd h3 {
text-align: center
;
font-size: 18px
;
font-weight: normal
;
height: 40px
;
}
.service-bd p {
font-size: 12px
;
color: #666
;
width: 235px
;
margin: 0 auto
;
line-height: 26px
;
}
.service-bd a {
display: block
;
text-decoration: none
;
width: 148px
;
height: 38px
;
border: 1px solid #ff9412
;
margin: 30px auto 0
;
text-align: center
;
line-height: 38px
;
color: #ff9412
;
font-size: 12px
;
border-radius: 5px
;
}
.yingxiao a, .hezuo a {
margin: 56px auto 0
;
}
.service-bd a:hover {
color: #fff
;
background-color: #ff9412
;
}
.yingxiao {
margin: 0 44px
;
}
.case-bg {
background-color: #fff
;
margin-top: 60px
;
margin-bottom: 76px
;
padding: 75px 0 60px
;
}
.case {
width: 1055px
;
margin: 0 auto
;
}
.case-bd {
margin-top: 80px
;
position: relative
;
}
.case-bd li {
width: 325px
;
height: 210px
;
float: left
;
position: relative
;
}
.case-bd .case-bd-m {
margin: 0 40px
;
}
.text {
height: 45px
;
width: 100%
;
position: absolute
;
left: 0
;
bottom: 0
;
background: rgba(0,0,0,.3
);
text-align: center
;
line-height: 45px
;
color: #fff
;
font-size: 12px
;
}
.mask {
width: 100%
;
height: 100%
;
background: rgba(0,0,0,.5
) url(https://s2.ax1x.com/2019/05/22/V92RMj.png) center no-repeat
;
position: absolute
;
top: 0
;
left: 0
;
display: none
;
}
.case-bd li:hover .mask{
display: block
;
}
.left, .right{
width: 60px
;
height: 60px
;
background-color: rgba(0,0,0,.2
);
position: absolute
;
top: 50%
;
margin-top: -30px
;
text-align: center
;
line-height: 60px
;
color: #fff
;
text-decoration: none
;
font-size: 25px
;
border-radius: 50%
;
}
.left {
left: -90px
;
}
.right {
right: -90px
;
}
.case-bd a:hover {
background-color: #57a9ef
;
}
.media {
width: 1055px
;
margin: 0 auto
;
}
.media-bd {
width: 1050px
;
height: 240px
;
overflow: hidden
;
margin-top: 56px
;
}
.media-bd ul {
width: 1060px
;
}
.media-bd li {
width: 210px
;
height: 60px
;
float: left
;
border-right: 1px dashed #ccc
;
border-bottom: 1px dashed #ccc
;
text-align: center
;
padding-top: 20px
;
}
.footer {
height: 165px
;
background-color: #212425
;
margin-top: 200px
;
overflow: hidden
;
}
.subnav {
text-align: center
;
margin-top: 50px
;
color: #f0f1f1
;
font-size: 14px
;
}
.subnav a {
text-decoration: none
;
color: #f0f1f1
;
padding: 0 5px
;
font-size: 14px
;
}
.subnav a:hover {
color: #2288f6
;
text-decoration: underline
;
}
.footer p {
text-align: center
;
color: #888
;
margin-top: 30px
;
font-size: 12px
;
}
