前端 HTML+CSS实战篇（云道首页）

这是我自己练习着玩写的静态页面，仅用到html+css,源代码以及网页中所需图片文件已经放入百度网盘中地址链接：https://pan.baidu.com/s/1PdrZS8UMz1CS7t1KVA4Efw
提取码：ze82
自己也传上了github上一份，做成了静态网页，点击后面云道首页几个字可访问网页云道首页

效果图

代码

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="inner"><div class="logo"><a href="http://yundao.com">  <img src="data: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图--><div class="banner"></div><!--我们的服务模块--><div class="service"><div class="service-hd"><h3><img src="data:images/ser.png" alt=""></h3><p>shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！</p></div><div class="service-bd"><ul><li><img src="data:images/icon1.png" alt=""><h3>我是卖家</h3><p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和                      品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p><a href="#">我要建站</a></li><li class="yingxiao"><img src="data:images/icon1.png" alt=""><h3>我是卖家</h3><p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和                      品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p><a href="#">我要建站</a></li><li><img src="data:images/icon1.png" alt=""><h3>我是卖家</h3><p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和                      品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p><a href="#">我要建站</a></li></ul></div></div><!--经典案例模块--><div class="case"><div class="service-hd"><h3><img src="data:images/case.png" alt=""></h3></div><div class="case-bd clear"><ul><li><img src="data:images/pro1.png" alt=""><div class="text">帮助中小企业快速开启阿萨德打撒电子商务</div><div class="mask"></div></li><li class="case-bd-m"><img src="data:images/pro1.png" alt=""><div class="text">帮助中小企业快速开启阿萨德打撒电子商务</div><div class="mask"></div></li><li><img src="data:images/pro1.png" alt=""><div class="text">帮助中小企业快速开启阿萨德打撒电子商务</div><div class="mask"></div></li></ul><a href="#" class="left"><</a><a href="#" class="right">></a></div></div><!--合作媒体模块-->
<div class="case"><div class="service-hd"><h3><img src="data:images/case.png" alt=""></h3></div><div class="media-bd clear"><ul><li><a href=""><img src="data:images/tb.png" alt=""></a>  </li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li><li><a href=""><img src="data:images/tb.png" alt=""></a></li></ul><a href="#" class="left"><</a><a href="#" class="right">></a></div>
</div><!--页面底部-->
<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> |<a href="#">官网云商城</a> |<a href="#">官网云商城</a> |</div><p>@Copyright 2015 苏州海云网络科技有限公司版权所有 | 苏ICP备15038170号 -3</p>
</div></body>

css代码

*{margin:0;padding:0;
}
li{list-style:none;
}
a{text-decoration: none;
}
.clear:after{display:block;content:"";clear:both;/**清除浮动--兼容高版本浏览器**/
}
.clear{*zoom:1;/**兼容低版本浏览器**/
}
body{background: #fafafa;
}
.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 center;
}
.service,.case{width:1055px;margin:75px auto 0;
}
.service-hd{border-top:1px solid #ccc;margin:0 25px;
}
.service-hd h3{width: 167px;height: 46px;margin:-15px auto 0;
}
.service-hd p{font-size:12px;color:#666;line-height: 26px;text-align: center;width: 830px;margin:15px auto 0;
}
.service-bd{margin-top:40px;overflow: hidden;
}.service-bd li{width: 320px;height: 510px;float:left;text-align: center;}
.service-bd img{margin: 40px 35px;
}
.service-bd h3{text-align: center;font-size: 18px;height: 40px;font-weight: normal;/*取消加粗*/
}
.service-bd p{width: 234px;font-size:12px;color:#666;margin: 0 auto;line-height: 26px;
}
.service-bd a{display:block;width: 148px;height: 38px;border:1px solid  #ff9412;margin:0 auto;text-align:center;line-height: 38px;font-size:12px;color:#ff9412 ;border-radius:5px;
}
.service-bd a:hover{color:#fff;background: #ff9412 ;
}
.yingxiao{margin: 0 45px;
}
.case-bd{margin-top: 80px;position: relative;
}
.case-bd li{width: 325px;height: 210px;float: left;position: relative;
}
.case-bd-m{margin:0 40px;
}
.text{height: 45px;width: 100%;position: absolute;left: 0;bottom: 0;background: rgba(0,0,0,.3);text-align: center;line-height: 45px;color:#fff;font-size:12px ;
}
.mask{width: 100%;height:100%;position: absolute;top:0;left: 0;background: rgba(0,0,0,.5) url(../images/fdj.png) center no-repeat;display: none;
}
.case li:hover  .mask{display:block;
}
.left, .right{width: 60px;height: 60px;background: rgba(0,0,0,.2);position: absolute;top:50%;margin-top: -30px;text-align: center;line-height: 60px;color:#fff;font-size: 25px;border-radius: 50%;}
.left{left: -90px;
}
.right{right:-90px;
}
.case-bd a:hover{background:rgba(0,0,0,.4);
}
.media-bd{width: 1048px;height: 240px;overflow:hidden;margin-top: 40px;
}
.media-bd ul{width: 1060px;
}
.media-bd li {width: 210px;float: left;height: 60px;border-right: 1px dashed #ccc;border-bottom: 1px dashed #ccc;text-align: center;padding-top: 20px;
}
.footer{height: 165px;background: #212425;overflow: hidden;margin-top: 100px;
}
.subnav{text-align: center;margin-top: 50px;color:  #f0f1f1;
}
.subnav a{color: #f0f1f1;padding: 0 5px;font-size: 14px;
}
.subnav a:hover{color:#2288f6;text-decoration: underline;
}
.footer p{text-align: center;color:#888888;margin-top: 30px;
}

前端 HTML+CSS实战篇（云道首页）相关推荐

Web学习云道首页案例
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
前端自学 - CSS总结篇（一）
CSS 总结一.CSS 的简介二.CSS 的引入 (一)行内样式 (二)内联样式 (三)外联文件三.CSS 语法四.选择器 (一)选择器命名规范 (二)基本选择器 1. 元素选择器 2. ...
前端学习之经典案例-云道商城首页
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
web前端入门到实战：HTML5实现首页动态视频背景
你想实现动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景: 首先网上找一段清晰的视频下载下来,最好是MP4格式的:下载好了之后我们新建一个html文件来写代码: html代 ...
前端学习从入门到高级全程记录之11 （云道页面例子后续）
本期目标本期学习的主要目标是:1.前几期"云道页面例子"的完善.2.CSS高级技巧的学习 1.云道页面完善在前2期的云道案例中,我们完成了一半的布局,后面的内容需要用到定位等知 ...
【Web】CSS（No.32）Css页面布局经典案例（二）《云道商城首页》
需要素材点击图片联系我或私信.评论效果图 html源码: <!DOCTYPE html> <html lang="en"> <head>< ...
自学前端第十九天:云道页面综合练习
CSS之 reset.css模板 *{word-wrap:break-word} html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,p ...
仿百度html页面,HTML实战篇：html仿百度首页
原标题:HTML实战篇:html仿百度首页本篇文章主要给大家介绍一下如何使用html+css来制作百度首页页面. 1)制作页面所用的知识点我们首先来分析一下百度首页的页面效果图百度首页由头部的一 ...

前端 HTML+CSS实战篇（云道首页）

效果图

代码

HTML代码

css代码

前端 HTML+CSS实战篇（云道首页）相关推荐

最新文章

热门文章