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

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

效果图

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;
}

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

前端学习之经典案例-云道商城首页
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
【Web】CSS（No.34）Css页面布局经典案例（四）《米柚官网》
需要素材点击图片联系我或私信.评论效果图: html源码: <!DOCTYPE html> <html lang="en"><head>< ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
CSS+DIV进行的页面布局
CSS+DIV进行的页面布局第一部分.布局概述 1.网页布局 2.页面元素定位机制第二部分.布局常用属性 1.浮动属性(float) 2.清除浮动(clear) 3.定位属性(position) ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
影响页面布局的css属性,6 和页面布局有关的CSS属性（三）
6 和页面布局有关的CSS属性(三) 03.png 04.png 05.png #box { /* 声明ID选择器,名称为box */ position:absolute; /* 设置层的定位为绝对定 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...

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

效果图

html源码：

css源码：

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

最新文章

热门文章