<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Document
</title
>
<link rel
="stylesheet" href
="css/index.css">
</head
>
<body
>
<!-- 头部导航栏开始
-->
<div
class="header">
<div
class="inner">
<div
class="logo"> <!-- 放logo左浮动
-->
<!-- <img src
="images/logo.png" alt
=""> -->
<!-- 一般网页的logo都是可以点进首页的，所以在这里也可以套上一层a标签
-->
<a href
="#"><img src
="images/logo.png" alt
=""></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
>
<!-- 头部导航栏结束
-->
<!-- banner start
-->
<div
class="banner">
</div
>
<!-- banner end
-->
<!-- 我们的服务模块 start
-->
<div
class="service">
<div
class="service-hd">
<h3
><img src
="images/ser.png" alt
=""></h3
>
<p
>
shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系
...
</p
>
<p
>
我们致力于打造一个服务于品牌商城
/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！
</p
>
</div
>
<div
class="service-bd">
<ul
>
<li
>
<img src
="images/icon1.png" alt
="">
<h4
>我是卖家
</h4
>
<p
>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们从互联网时代品牌建设和品牌营销的全新视角，赋予了品牌商城及独立电商更大的生存空间和存在价值！
</p
>
<a href
="#">我要建站
</a
>
</li
>
<li
class="yinxiao">
<img src
="images/icon1.png" alt
="">
<h4
>我要营销
</h4
>
<p
>云道不断完善的营销系统，联合优质媒体资源，集成常用的网络营销模式及终端，以最简单的产品形态，帮助独立商城实现店铺及商品信息在全网的快速分销。
</p
>
<a href
="#">我要推广
</a
>
</li
>
<li
>
<img src
="images/icon1.png" alt
="">
<h4
>媒体合作
</h4
>
<p
>真正的全民营销时代，无需学习，无需维护。通过您的网站、朋友圈、媒体流量、移动展现、媒体解决方案获取收益。我们致力于实现合作媒体流量价值的最大化
</p
>
<a href
="#">我要合作
</a
>
</li
>
</ul
>
</div
>
</div
>
<!-- 我们的服务模块 end
-->
<!-- 经典案例 start
-->
<div
class="case">
<div
class="service-hd">
<h3
><img src
="images/case.png" alt
=""></h3
>
</div
>
<div
class="case-bd clearfix">
<ul
>
<li
>
<img src
="images/pro1.png" alt
="">
<div
class="text">帮助中小企业快速开启阿萨德打撒电子商务
</div
>
<div
class="mask"></div
>
</li
>
<li
class="case-bd-m"><img src
="images/pro.png" alt
=""></li
>
<li
><img src
="images/pro.png" alt
=""></li
>
</ul
>
<a href
="#" class="left"><</a
>
<a href
="#" class="right">></a
>
</div
>
</div
>
<!-- 经典案例 end
-->
<!-- 合作媒体 start
-->
<div
class="media">
<div
class="service-hd">
<h3
><img src
="images/media.png" alt
=""></h3
>
</div
>
<div
class="media-bd">
<ul
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
<li
><a href
="#"><img src
="images/tb.png" alt
=""></a
></li
>
</ul
>
</div
>
</div
>
<!-- 合作媒体 end
-->
<!-- 底部开始
-->
<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
;
}
.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(../images
/banner
.jpg
) no
-repeat top center
;
}
.service
, .case, .media
{
width
: 1056px
;
margin
:75px auto
0;
}
.service
-hd
{
border
-top
: 1px solid #ccc
;
margin
:0 25px
;
}
.service
-hd h3
{
width
: 167px
;
height
: 46px
;
margin
:-15px auto
15px
;
}
.service
-hd p
{
font
-size
: 12px
;
color
: #
666;
line
-height
: 26px
;
text
-align
: center
;
}
.service
-bd
{
margin
-top
: 40px
;
overflow
: hidden
;
}
.service
-bd li
{
float
: left
;
width
: 320px
;
height
: 510px
;
background
-color
: #fff
;
border
:1px solid #e7e8e9
;
}
.yinxiao
{
margin
:0 45px
;
}
.service
-bd li img
{
margin
:40px
35px
;
}
.service
-bd h4
{
text
-align
: center
;
font
-size
: 18px
;
font
-weight
: 400;
height
: 40px
;
}
.service
-bd p
{
color
: #
666;
font
-size
: 12px
;
width
: 235px
;
margin
:0 auto
;
line
-height
: 26px
;
}
.service
-bd a
{
display
: block
;
width
: 148px
;
height
: 38px
;
border
:1px solid #ff9412
;
margin
:30px auto
;
text
-decoration
: none
;
text
-align
: center
;
line
-height
: 38px
;
color
: #ff9412
;
font
-size
: 12px
;
border
-radius
: 5px
;
}
.service
-bd a
:hover
{
background
-color
: #ff9412
;
color
: #fff
;
}
.case-bd
{
margin
-top
: 80px
;
position
: relative
;
}
.case-bd li
{
width
: 325px
;
height
: 210px
;
background
-color
: pink
;
float
: left
;
position
: relative
;
}
.case-bd li img
{
width
: 325px
;
}
.case-bd
-m
{
margin
: 0 40px
;
}
.text
{
height
: 45px
;
width
: 100%;
position
: absolute
;
bottom
: 0;
font
-size
: 12px
;
text
-align
:center
;
line
-height
: 45px
;
color
:#fff
;
background
: rgba(0,0,0,0.3);
z
-index
: 2;
display
: none
;
}
.mask
{
height
: 210px
;
width
: 100%;
background
: rgba(0,0,0,0.5) url("../images/fdj.png") no
-repeat center
;
position
: absolute
;
left
: 0;
top
: 0;
display
: none
}
.case-bd li
:hover
.text
, .case-bd li
:hover
.mask
{
display
: block
;
}
.left
, .right
{
width
: 60px
;
height
: 60px
;
background
-color
: rgba(0,0,0,.3);
position
: absolute
;
top
: 50%;
margin
-top
: -30px
;
text
-align
: center
;
color
: #fff
;
line
-height
: 60px
;
text
-decoration
: none
;
font
-size
: 25px
;
border
-radius
: 50%;
}
.case-bd a
:hover
{
background
-color
: rgba(0,0,0,.4);
}
.left
{
left
: -90px
;
}
.right
{
right
: -90px
;
}
.clearfix
:after
{
content
: "";
display
: block
;
height
: 0;
clear
: both
;
visibility
: hidden
;
}
.clearfix
{
*zoom
:1;
}
.media
-bd
{
width
: 1049px
;
height
: 282px
;
overflow
: hidden
;
}
.media
-bd ul
{
margin
-top
: 40px
;
width
: 1060px
;
}
.media
-bd li
{
width
: 210px
;
height
: 80px
;
float
: left
;
border
-right
: 1px dashed #ccc
;
border
-bottom
: 1px dashed #ccc
;
text
-align
: center
;
line
-height
: 80px
;
}
.media
-bd li img
{
vertical
-align
: middle
;
}
.footer
{
margin
-top
: 100px
;
height
: 165px
;
background
-color
: #
212425;
overflow
: hidden
;
}
.subnav
{
text
-align
: center
;
margin
-top
: 50px
;
color
: #f0f1f1
;
font
-size
: 14px
;
}
.subnav a
{
color
: #f0f1f1
;
text
-decoration
: none
;
padding
: 0 5px
;
font
-size
: 14px
;
}
.subnav a
:hover
{
color
: #
2288f6
;
text
-decoration
: underline
;
}
.footer p
{
font
-size
: 14px
;
text
-align
: center
;
color
: #
888;
margin
-top
: 30px
;
}
