【Web】CSS（No.32）Css页面布局经典案例（二）《云道商城首页》

于 2019-06-13 01:29:09 发布
阅读量3k 收藏 38
点赞数 8
分类专栏： Web-Css 文章标签： Web Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43251850/article/details/91492819
版权


需要素材点击图片联系我或私信、评论

效果图

在这里插入图片描述

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">&lt;</a>
		      <a href="" class="button button_r">&gt;</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>&nbsp;&nbsp;|&nbsp;&nbsp;
	    <a class="foot" href="#">首页</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	    <a class="foot" href="#">官网云商城</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	    <a class="foot" href="#">智慧门店</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	    <a class="foot" href="#">营销平台</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	    <a class="foot" href="#">媒体联盟</a>&nbsp;&nbsp;|&nbsp;&nbsp;
	    <a class="foot" href="#">关于我们</a>
	  </span>
	  <p>©Copyright&nbsp;2015&nbsp;苏州海云网络科技有限公司版权所有&nbsp;|&nbsp;苏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);
}

/*.banner ul li.now {
	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;
	/*top: 50%;*/
	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 div {
	width:233px;
	height:84px;
	background-image:url(img/);
	background-repeat:no-repeat;
}*/

.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;
}
Sherry Lupus
关注
  • 8
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
专栏目录
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值