需要素材点击图片联系我或私信、评论
效果图
html源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>云道</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
<div class="box">
<img src="img/logo.png" alt="">
<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 class="banner">
<div class="img">
<img src="img/banner1.png" alt="">
<img src="img/banner2.png" alt="">
<img src="img/banner3.png" alt="">
<img src="img/banner0.png" alt="">
</div>
<ul>
<li class="now"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="subject">
<div class="box">
<div class="content">
<div class="serve">
<div class="serve1">
<div class="server">
<h3>我们的服务</h3>
<div class="txt">PROGRAM HIGHLIGHTS</div>
</div>
<p>
shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！
</p>
</div>
<div class="serve2">
<div class="icon1">
<img src="img/icon1.png" alt="">
<p class="line">我是卖家</p>
<p class="main">shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们从互联网时代品牌建设和品牌营销的全新视角，赋予了品牌商城及独立电商更大的生存空间和存在价值！</p>
<button class="buttons">我要建站</button>
</div>
<div class="icon2">
<img src="img/icon2.png" alt="">
<p class="line">我要营销</p>
<p class="main">云道不断完善的营销系统，联合优质媒体资源，集成常用的网络营销模式及终端，以最简单的产品形态，帮助独立商城实现店铺及商品信息在全网的快速分销。</p>
<button class="buttons">我要推广</button>
</div>
<div class="icon3">
<img src="img/icon3.png" alt="">
<p class="line">媒体合作</p>
<p class="main">真正的全民营销时代，无需学习，无需维护。通过您的网站、朋友圈、媒体流量、移动展现、媒体解决方案获取收益。我们致力于实现合作媒体流量价值的最大化</p>
<button class="buttons">我要合作</button>
</div>
</div>
</div>
<div class="demo1">
<div class="demo1_1">
<h3>经典案例</h3>
<div class="txt">THE CLASSIC CASE</div>
</div>
<div class="damo1_2">
<div class="ser">
<img src="img/pro1.png" alt="">
<div class="text">
帮助中小企业快速开启阿萨德打撒电子商务
</div>
<div class="suspend">
<img src="img/fdj.png" alt="">
</div>
</div>
<div class="ser space">
<img src="img/pro2.png" alt="">
<div class="text">
帮助中小企业快速开启阿萨德打撒电子商务
</div>
<div class="suspend">
<img src="img/fdj.png" alt="">
</div>
</div>
<div class="ser">
<img src="img/pro3.png" alt="">
<div class="text">
帮助中小企业快速开启阿萨德打撒电子商务
</div>
<div class="suspend">
<img src="img/fdj.png" alt="">
</div>
</div>
<div class="clear"></div>
<a href="" class="button button_l"><</a>
<a href="" class="button button_r">></a>
</div>
</div>
<div class="demo2">
<div class="demo2_1">
<h3>合作媒体</h3>
<div class="txt">ASSOCIATED MEDIA</div>
</div>
<div class="shop">
<div class="shop1">
<div class="ass"></div>
<div class="ass"></div>
<div class="ass"></div>
<div class="ass"></div>
<div class="ted"></div>
</div>
<div class="shop2">
<div class="ass"></div>
<div class="ass"></div>
<div class="ass"></div>
<div class="ass"></div>
<div class="ted"></div>
</div>
<div class="shop3">
<div class="ass"></div>
<div class="ass"></div>
<div class="ass"></div>
<div class="ass"></div>
<div class="ted"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tail">
<span>
<a class="foot" href="#">shopcmd</a> |
<a class="foot" href="#">首页</a> |
<a class="foot" href="#">官网云商城</a> |
<a class="foot" href="#">智慧门店</a> |
<a class="foot" href="#">营销平台</a> |
<a class="foot" href="#">媒体联盟</a> |
<a class="foot" href="#">关于我们</a>
</span>
<p>©Copyright 2015 苏州海云网络科技有限公司版权所有 | 苏ICP备15038170号-3</p>
</div>
</body>
</html>
css源码：
* {
margin:0;
padding:0;
box-sizing:border-box;
}
.body {
background-color:#fafafa;
}
li {
list-style:none;
}
a {
color:#333333;
text-decoration:none;
}
a:hover {
color:#2288f6;
}
.clear {
clear:both;
}
.box {
width:1056px;
margin:0 auto;
background-color:#fafafa;
}
.header {
width:100%;
height:100px;
}
.header ul {
float:right;
}
.header ul li {
float:left;
height:100px;
line-height:100px;
margin:0 20px;
}
.banner {
width:100%;
height:620px;
margin:auto;
position:relative;
background-color:#fafafa;
}
.img img {
position: absolute;
width:100%;
height:620px;
width: 100%;
}
.banner ul {
width:60px;
height:15px;
position:absolute;
left:50%;
padding-top:585px;
}
.banner ul li {
float:left;
list-style: none;
width: 12px;
height: 12px;
border:1px solid white;
border-radius: 50px;
background-color:white;
margin:2px;
margin:3px 4px;
}
.banner ul li:hover {
background-color:rgba(0,0,0,0);
}
.subject {
width:100%;
padding-top:64px;
text-align:center;
background-color:#fafafa;
}
.content {
width:1056px;
padding:50px 0;
background-color:#fafafa;
}
.content .serve {
height:700px;
}
.serve1,
.demo1,
.demo2 {
border-top:1px solid #ccc;
background-color:#fafafa;
}
.serve1 {
position:relative;
padding:40px 110px;
}
.content .serve1 p {
font-size:14px;
line-height:28px;
text-align:center;
color:#666666;
}
.server {
position:absolute;
width:170px;
height:56px;
left:50%;
margin-left:-85px;
top:-28px;
background-color:#fafafa;
}
h3 {
text-align:center;
font-size:24px;
color:#333333;
background-color:#fafafa;
}
.txt {
font-size:14px;
color:#666666;
text-align:center;
line-height:30px;
}
.serve2 {
background-color:#fafafa;
}
.icon1,
.icon2,
.icon3 {
width:320px;
height:510px;
border:1px solid #e7e8e9;
background-color:#ffffff;
position:absolute;
margin-top:20px;
padding:50px 40px 50px 40px;
}
.icon2 {
margin-left:368px;
}
.icon3 {
margin-left:736px;
}
.line {
font-size:22px;
text-align:center;
padding-top:40px;
color:#333333;
}
.main {
text-align:left;
font-size:14px;
padding-top:20px;
color:#666666;
}
.buttons {
width:150px;
height:38px;
font-size:14px;
color:#ff9412;
background-color:#ffffff;
border:1px solid #ff9412;
border-radius:5px;
margin-top:40px;
}
.buttons:hover {
color:#ffffff;
background-color:#ff9412;
}
.demo1 {
position:relative;
height: 350px;
top:-28px;
background-color:#fafafa;
margin-top:64px;
}
.demo1_1 {
position:absolute;
width:170px;
height:56px;
left:50%;
margin-left:-85px;
top:-28px;
}
.demo1_2 {
width:1056px;
position:relative;
}
.ser {
float:left;
position:relative;
width: 322px;
height: 211px;
top:80px;
}
.space{
margin: 0px 42px;
}
.ser .text{
text-align: center;
color: white;
line-height: 45px;
background-color: rgba(0,0,0,0.3);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-size: 14px;
}
.suspend{
width: 100%;
height: 211px;
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 69px 0 0 0;
box-sizing: border-box;
display: none;
}
.ser:hover .suspend{
display: block;
}
.button_l,
.button_r {
text-decoration: none;
width: 60px;
height: 60px;
background-color:#e6e6e6;
border-radius: 50%;
position: absolute;
margin-top: -50px;
font-size: 30px;
color: white;
text-align: center;
line-height: 60px;
border:none;
}
.button_l{
left: -77px;
}
.button_r{
right: -77px;
}
.button:hover {
background-color:#57a9ef;
color:white;
}
.demo2 {
position:relative;
height: 350px;
top:-28px;
background-color:#fafafa;
margin-top:64px;
}
.demo2_1 {
position:absolute;
width:170px;
height:56px;
left:50%;
margin-left:-85px;
top:-28px;
}
.shop {
width:1165px;
height:252px;
float:left;
margin-top:80px;
margin-left:-50px;
position:relative;
}
.shop1 .shop3 {
width:1165px;
height:84px;
float:left;
}
.shop2 {
width:1165px;
height:84px;
border-top:1px dashed #cccccc;
border-bottom:1px dashed #cccccc;
float:left;
}
.ass {
width:233px;
height:84px;
border-right:1px dashed #cccccc;
float:left;
background-image:url(../img/tb.png);
background-repeat:no-repeat;
background-position: 65px 20px;
}
.ted {
width:233px;
height:84px;
float:left;
background-image:url(../img/tb.png);
background-repeat:no-repeat;
background-position: 65px 20px;
}
.tail {
width:100%;
height:170px;
background-color:#212425;
text-align:center;
padding-top:60px;
}
.tail>span {
font-size:14px;
color:#F0F1F1;
}
.foot {
font-size:14px;
color:#F0F1F1;
}
.tail>p {
font-size:14px;
color:#888888;
margin-top:20px;
}