前端----静态网页的实现
学习了一个多月啦！终于到了检验成果的时候啦。下面的就是这次检测的 psd 原图
本次项目的源文件
经过几个小时的磨难，终于完成到了下面这种程度。如效果图：
html代码如下
"en">
"UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> Document "stylesheet" href="http://at.alicdn.com/t/font_1674007_9tmaxzv3l2.css"> "stylesheet" href="./css/index.css">
"flexd"> "iconfont iconweibiaoti-"> 预约咨询
"header" class="container clear"> "header-logo"> - 启梦中国的践行者
- 以电商之行实现强企之梦，以强企之行实现强国之梦
"header-infer"> 
"./img/index-assets/weixin.png" alt=""> - 客户服务热线
- 400-161-1808
"banner"> "banner-list container"> "#">"./img/index-assets/banner.png" alt="">
"case"> "case-pic container"> "./img/index-assets/case-11.png" alt="">
"./img/index-assets/case-22.png" alt="">
"./img/index-assets/case-44.png" alt="">
"./img/index-assets/case-44.png" alt="">
"case-left"> "#">"./img/index-assets/zuo.png" alt=""> "case-right"> "#">"./img/index-assets/you.png" alt="">
"briefing" class="container"> "briefing-title"> 启梦简介
QIMENG Introduction
"briefing-main"> 启梦电商解决方案作为国家电子商务“十二五”规划专家组成员、商务部电子商务示范企业专家评审组成员、发改委电子商务示范城市专家组成员，依托14年B2B电子商务的成功经验，帮助企业一站式解决客户开展电子商务方面的所有问题，确保项目实施稳定无偏差：
"briefing-end"> - —
- 通过系统诊断分析帮助企业明确自身定位
结合企业优势制定最优的电商模式和发展路径，创新性的高效率的效果
- —
- 通过系统诊断分析帮助企业明确自身定位
结合企业优势制定最优的电商模式和发展路径，创新性的高效率的效果
- —
- 通过系统诊断分析帮助企业明确自身定位
结合企业优势制定最优的电商模式和发展路径，创新性的高效率的效果
"list"> "list-title container"> 服务周期
- Service cycle
- 2个月
相关规划+
- 4个月
相关实施+
- 6个月
运营支撑+
"icon" class="container"> "icon-title"> 成功案例
QIMENG Introduction
"icon-case"> "#">"./img/index-assets/icon-1.png" alt=""> "#">家饰类：柠檬树 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来
"#">"./img/index-assets/icon-2.png" alt=""> "#">家饰类：柠檬树 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来
"#">"./img/index-assets/icon-3.png" alt=""> "#">家饰类：柠檬树 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来
"infer"> "infer-main container"> "infer-main-title"> 新闻动态
QIMENG Introduction
更多>>
"infer-main-case"> "case-list"> 推动电子商务的第一选择，助力三网融合的首选伙伴！
今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来
推动电子商务的第一选择，助力三网融合的首选伙伴！
今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来
推动电子商务的第一选择，助力三网融合的首选伙伴！
今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来
"pic-infer"> "#">"./img/index-assets/infer-4.png" alt="">
"hot" class="container"> "hot-title"> 客户列表
QIMENG Introduction
"hot-pic">
"footer"> "footer-infer container"> "iphone"> "./img/index-assets/dianhuo.png" alt="">
- 0760-86283555
全国服务热线
"case"> 版权所有：深圳市启梦网络科技有限公司 全国统一热线： 400-161-1808 电话： 0755-61881808 传真： 0755-61881868
公司地址：深圳市福田区福田保税区绒花路 号（城市 米6公寓）4楼 邮箱： service ＠ qm-cn.com 备案：粤备 ICP14011927 号
css代码如下
/* reset */*{margin: 0;padding: 0;}ul,ol,li{ list-style: none;}img{ display: block;}a{ text-decoration: none; color:#000000;}h1,h2,h3,h4{ font-size:14px;}body{ font-size:16px; color:#000000; }html, body{width:100%;position: relative;}input{background:none;outline:none;border:0px;}
/* css common */.l{ float:left;}.r{ float:right;}.clear:after{ content:""; display: block; clear:both;}.container{ width:960px; margin:0 auto; position: relative;}.container-fluid{ position: relative;}
/* css flexd */
#flexd{position: fixed;right: 0;top: 50%;transform: translateY(-50%);width: 50px;background-color: #d11e37;display: flex;flex-direction: column;align-items: center;color: white;z-index: 1;}#flexd span{font-size: 20px;margin-top: 14px;margin-bottom: 16px;display: block;}#flexd p{font-size: 16px;display: block;width: 16px;margin-bottom: 22px;}
/* css header */
#header{height: 120px;display: flex;justify-content: space-between;align-items: center;}#header .header-logo{}#header .header-logo div{float: left;}#header .header-logo div img{}#header .header-logo ul{float: left;margin-left: 17px;padding-left: 17px;border-left: 1px solid ghostwhite;}#header .header-logo ul li:nth-of-type(1){font-size: 24px;font-weight: 400;color: #FA8100;}#header .header-logo ul li:nth-of-type(2){margin-top: 5px; font-size: 14px;color: #666666;}#header .header-infer{}#header .header-infer div{float: left;}#header .header-infer div img{}#header .header-infer ul{float: left;margin-left: 8px;}#header .header-infer ul li:nth-of-type(1){font-size: 16px;color: #333333;}#header .header-infer ul li:nth-of-type(2){font-size: 24px;color: #005C9D;}
/* css nav */
#nav{height: 50px;background-color: #00659C;}#nav .nav-list{display: flex;align-items: center;height: 50px;}#nav .nav-list li:not(:first-of-type){border-left: 1px solid white;}#nav .nav-list li{flex-grow: 1;text-align: center;}#nav .nav-list li a{color: white;}#nav .nav-list li:nth-of-type(2) a{}
/* css banner */
#banner{background-color: #e9e9e9;}
#case{background: #f6f6f6;position: relative;}#case .case-pic{display: flex;justify-content: space-between;position: relative;}#case .case-pic div{width: 213px;margin-top: 9px;margin-bottom: 9px;}#case .case-pic div ol{height: 163px;width: 100%;background-color: #006eaa;display: flex;align-items: center;justify-content: center;}#case .case-pic div ol img{transition: 1s;}#case .case-pic div ul{text-align: center;width: 100%;height: 90px;display: flex;flex-direction: column;justify-content: center;background-color: white;}#case .case-pic div ul li{font-size: 20px;}#case .case-pic div ul li a{color: #333333}#case .case-pic div ul p{font-size: 12px;}#case .case-pic div ul p a{color: #999999;}#case .case-pic .case-left{width: 57px;position: absolute;left: -64px;top: 50%;transform: translateY(-50%);}#case .case-pic .case-right{width: 57px;position: absolute;right: -100px;top: 50%;transform: translateY(-50%);}
#case .case-pic div ol:hover img{transform: rotateZ(360deg);}
/* css briefing */
#briefing{margin-bottom: 74px;}#briefing .briefing-title{display: flex;align-items: center;margin-top: 60px;}#briefing .briefing-title h2{font-size: 24px;color: #006EAA;}#briefing .briefing-title p{font-size: 16px;color: #999999;margin-left: 8px;}#briefing .briefing-main{margin-top: 30px;}#briefing .briefing-main p{font-size: 14px;color: #666666;line-height: 24px;}#briefing .briefing-end{margin-top: 14px;display: flex;justify-content: space-between;}#briefing .briefing-end div{width: 300px;overflow: hidden;}#briefing .briefing-end div ol{height: 60px;background: #006eaa;/* margin-left: 25px; */}#briefing .briefing-end div ol li{font-size: 14px;color:white;line-height: 24px;text-indent: 25px;}#briefing .briefing-end div ul{height: 71px;border: 1px solid #e8e8e8;border-top: none;/* margin-left: 25px;margin-top: 10px; */padding-left: 25px;}#briefing .briefing-end div ul p{font-size: 12px;color: gainsboro;line-height: 22px;transform: translateY(10px);}
/* css list */
#list{background-color: #006eaa;height: 104px;}#list .list-title{display: flex;justify-content: space-between;align-items: center;height: 100%;}#list .list-title ul{display: flex;align-items: center;}#list .list-title ul p{font-size: 24px;font-weight: bold;color: white;}#list .list-title ul li{font-size: 20px;color: #FBFEFF;margin-left: 10px;}#list .list-title ol{color: white;display: flex;width: 480px;justify-content: space-between;margin-right: 61px;}#list .list-title ol div{}#list .list-title ol div li{font-size: 14px;}#list .list-title ol div li span{font-size: 45px;color: #FFB31F;}#list .list-title ol div p{font-size: 18px;margin-top: -2px;}
/* css icon */
#icon{padding-bottom: 50px;}#icon .icon-title{display: flex;align-items: center;justify-content: space-between;height: 72px;}#icon .icon-title ul{display: flex;align-items: center;}#icon .icon-title ul h2{font-size: 24px;color: #006EAA;}#icon .icon-title ul p{font-size: 16px;color: #999999;margin-left: 8px;}#icon .icon-title ol{display: flex;align-self: center;}#icon .icon-title ol li{display: block;width: 15px;height: 15px;border-radius: 50%;margin-left: 8px;background-color: #c0c0c0;}#icon .icon-title ol li:last-of-type{background-color: #ffb527;}#icon .icon-case{display: flex;justify-content: space-between;}#icon .icon-case div{width: 298px;transition: 1s;perspective: 100px;}#icon .icon-case div a{transition: 1s;}#icon .icon-case div img{width: 100%;transition: 1s;}#icon .icon-case div ul{margin-top: 21px;}#icon .icon-case div ul a{font-size: 14px;color: #333333;}#icon .icon-case div ul p{font-size: 12px;color: #999999;margin-top: 9px;line-height: 22px;}
#icon .icon-case div:hover img{transform: scaleZ(2);}
/* css infer */
#infer{padding-top: 23px;border-top: 1px solid #e7e7e7;}#infer .infer-main{}#infer .infer-main .infer-main-title{display: flex;align-items: center;justify-content: space-between;height: 86px;}#infer .infer-main .infer-main-title ul{display: flex;align-items: center;}#infer .infer-main .infer-main-title ul h2{font-size: 24px;color: #006EAA;}#infer .infer-main .infer-main-title ul p{font-size: 16px;color: #999999;margin-left: 8px;}#infer .infer-main .infer-main-title > p{color: #fcb060;font-size: 12px;}#infer .infer-main .infer-main-title ol{}#infer .infer-main .infer-main-title ol li{}
#infer .infer-main .infer-main-case{display: flex;justify-content: space-between;}#infer .infer-main .infer-main-case .case-list{}#infer .infer-main .infer-main-case .case-list ul{display: flex;padding-bottom: 16px;width: 548px;border-bottom: 1px dotted gainsboro;margin-bottom: 16px;}#infer .infer-main .infer-main-case .case-list ul div{margin-right: 15px;}#infer .infer-main .infer-main-case .case-list ul ol{}#infer .infer-main .infer-main-case .case-list ul:first-of-type ol h4{color: #006EAA;}#infer .infer-main .infer-main-case .case-list ul ol h4{font-size: 14px;color: black;line-height: 34px;}#infer .infer-main .infer-main-case .case-list ul ol p{font-size: 12px;color: #999999;margin-bottom: 10px;}#infer .infer-main .infer-main-case .case-infer{}
/* css hot */
#hot{margin-top: 24px;margin-bottom: 68px;}#hot .hot-title{display: flex;align-items: center;justify-content: space-between;height: 72px;}#hot .hot-title ul{display: flex;align-items: center;}#hot .hot-title ul h2{font-size: 24px;color: #006EAA;}#hot .hot-title ul p{font-size: 16px;color: #999999;margin-left: 8px;}#hot .hot-pic{}#hot .hot-pic div{width: 100%;display: flex;justify-content: space-between;margin-bottom: 8px;}#hot .hot-pic div ul{padding: 19px 24px;border: 1px solid gainsboro;}
/* css footer */
#footer{height: 86px;background-color: #006eaa;}#footer .footer-infer{padding-top: 18px;display: flex;}#footer .footer-infer .iphone{display: flex;}#footer .footer-infer .iphone ul{width: 50px;border-radius: 5px 5px 5px 5px;background-color: white;margin-right: 15px;padding-right: 17px;}#footer .footer-infer .iphone ul img{position: relative;transform: translateX(25%)translateY(20%);}#footer .footer-infer .iphone ol{}#footer .footer-infer .iphone ol li{font-size: 20px;color: #FFFFFF;}#footer .footer-infer .case{border-left: 1px solid white;padding-left: 15px;height: 36px;margin-left: 17px;}#footer .footer-infer .case ol p{font-size: 12px;color: #E5F6FF;}#footer .footer-infer .case p{font-size: 12px;color: #E5F6FF;}
小米商城页面的实现请点击跳转小米商城