云道首页简易设计

index.html

<!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">   <!-- 放logo 左浮 -->
				<a href="#"><img src="images/logo.png" /></a>
			</div>  
			<div class="nav">   <!-- 放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-head">
			<h3><img src="images/ser.png" /></h3>
			<p>			
				shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！
			</p>
		</div>
		<div class="service-body">
			<ul>
				<li>
					<img src="images/icon1.png" />
					<h3>我是卖家</h3>
					<p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们
						从互联网时代品牌建设和品牌营销的全
						新视角，赋予了品牌商城及独立电商更
						大的生存空间和存在价值！</p>
					<a href="#">我要建站</a>			
				</li>
				<li class="yingxiao">
					<img src="images/icon1.png" />
					<h3>我是卖家</h3>
					<p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们
						从互联网时代品牌建设和品牌营销的全
						新视角，赋予了品牌商城及独立电商更
						大的生存空间和存在价值！</p>
					<a href="#">我要建站</a>			
				</li><li>
					<img src="images/icon1.png" />
					<h3>我是卖家</h3>
					<p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们
						从互联网时代品牌建设和品牌营销的全
						新视角，赋予了品牌商城及独立电商更
						大的生存空间和存在价值！</p>
					<a href="#">我要建站</a>			
				</li>
			</ul>
		</div>
	</div>
<!-- 服务导航栏结束 -->

</body>
</html>

index.css

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #fafafa;
}
/*顶部导航栏开始*/
.header {
	height: 100px;
	background-color: #fff;
}
.inner {
	width: 1200px;
	height: 100px;
	/*background-color: pink;*/
	margin: 0 auto;
}
.logo {
	float: left;
}
.nav {
	float: right;
}
.nav ul li {
	float: left;
	list-style: none;
	line-height: 100px;
	margin: 0 20px;
}
.nav li a {
	text-decoration: none;
	color: #333;
}
.nav li a:hover {
	color: #2288f6;
}
/*banner start*/
.banner {
	height: 600px;
	background: url(../images/banner.jpg) no-repeat top center;
}
/*banner end*/
.service {
	/*margin-top: 75px; */
	width: 1055px;
	height: 660px;
	/*background-color: pink;*/
	margin: 75px auto 0;
}
.service-head {
	border-top: 1px solid #ccc;
	margin: 0 25px;
}
.service-head h3 {
	width: 167px;
	height: 46px;
	margin: -15px auto 0;
}
.service-head p {
	color: #666;
	line-height: 26px;
	text-align: center;
	width: 830px;
	margin: 15px auto 0;
	font-size: 12px;
}
.service-body {
	margin-top: 40px;
}
.service-body li {
	width: 314px;
	height: 510px;
	/*background-color: pink;*/
	float: left;
}
.service-body li {
	list-style: none;
	border: 1px solid #e7e8e9;
}

.service-body img {
	margin: 40px 35px;
}
.service-body h3 {
	text-align: center;
	color: #333;
	font-size: 18px;
	font-weight: normal;
	height: 40px;
}
.service-body p{
	color: #666;
	font-size: 12px;
	width: 235px;
	line-height: 26px;
	margin: 0 auto;
}
.service-body a {
	width: 148px;
	height: 38px;
	display: block;
	border: 1px solid #ff9412;
	margin: 30px auto 0;
	line-height: 38px;
	text-align: center;
	color: #ff9412;
	text-decoration: none;
	font-size: 12px;
	border-radius: 5px;
}
.service-body a:hover {
	background-color: #ff9412;
	color: white;
}
.yingxiao {
	margin: 0 45px;
}

效果预览

具体内容和图片需要重新修改和添加
云道首页简易设计