学习了一个多月啦！终于到了检验成果的时候啦。下面的就是这次检测的 psd 原图
本次项目的源文件
经过几个小时的磨难，终于完成到了下面这种程度。如效果图：
html代码如下
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="http://at.alicdn.com/t/font_1674007_9tmaxzv3l2.css"> <link rel="stylesheet" href="./css/index.css"></head>
<body> <div id="flexd"> <span class="iconfont iconweibiaoti-"></span> <p>预约咨询</p> </div> <div id="header" class="container clear"> <div class="header-logo"> <div><a href="#"><img src="./img/index-assets/logo.png" alt=""></a></div> <ul> <li>启梦中国的践行者</li> <li>以电商之行实现强企之梦，以强企之行实现强国之梦</li> </ul> </div> <div class="header-infer"> <div><img src="./img/index-assets/weixin.png" alt=""></div> <ul> <li>客户服务热线 </li> <li>400-161-1808</li> </ul> </div> </div>
<div id="nav"> <div class="nav-list container"> <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> <li><a href="#">产品服务</a></li> <li><a href="#">产品服务</a></li> </div> </div>
<div id="banner"> <div class="banner-list container"> <a href="#"><img src="./img/index-assets/banner.png" alt=""></a> </div> </div>
<div id="case"> <div class="case-pic container"> <div> <ol><img src="./img/index-assets/case-11.png" alt=""></ol> <ul> <li><a href="#">电商顾问服务</a></li> <p><a href="#">启梦科技</a></p> </ul> </div> <div> <ol><img src="./img/index-assets/case-22.png" alt=""></ol> <ul> <li><a href="#">电商顾问服务</a></li> <p><a href="#">启梦科技</a></p> </ul> </div> <div> <ol><img src="./img/index-assets/case-44.png" alt=""></ol> <ul> <li><a href="#">电商顾问服务</a></li> <p><a href="#">启梦科技</a></p> </ul> </div> <div> <ol><img src="./img/index-assets/case-44.png" alt=""></ol> <ul> <li><a href="#">电商顾问服务</a></li> <p><a href="#">启梦科技</a></p> </ul> </div> <div class="case-left"> <a href="#"><img src="./img/index-assets/zuo.png" alt=""></a> </div> <div class="case-right"> <a href="#"><img src="./img/index-assets/you.png" alt=""></a> </div> </div>
</div>
<div id="briefing" class="container"> <div class="briefing-title"> <h2>启梦简介</h2> <p>QIMENG Introduction</p> </div> <div class="briefing-main"> <p>启梦电商解决方案作为国家电子商务“十二五”规划专家组成员、商务部电子商务示范企业专家评审组成员、发改委电子商务示范城市专家组成员，依托14年B2B电子商务的成功经验，帮助企业一站式解决客户开展电子商务方面的所有问题，确保项目实施稳定无偏差： </p> </div> <div class="briefing-end"> <div> <ol> <li>—</li> <li>通过系统诊断分析帮助企业明确自身定位 </li> </ol> <ul> <p>结合企业优势制定最优的电商模式和发展路径，创新性的高效率的效果</p> </ul> </div> <div> <ol> <li>—</li> <li>通过系统诊断分析帮助企业明确自身定位 </li> </ol> <ul> <p>结合企业优势制定最优的电商模式和发展路径，创新性的高效率的效果</p> </ul> </div> <div> <ol> <li>—</li> <li>通过系统诊断分析帮助企业明确自身定位 </li> </ol> <ul> <p>结合企业优势制定最优的电商模式和发展路径，创新性的高效率的效果</p> </ul> </div> </div> </div>
<div id="list"> <div class="list-title container"> <ul> <p>服务周期</p> <li>Service cycle</li> </ul> <ol> <div> <li><span>2</span>个月</li> <p>相关规划+</p> </div> <div> <li><span>4</span>个月</li> <p>相关实施+</p> </div> <div> <li><span>6</span>个月</li> <p>运营支撑+</p> </div> </ol> </div> </div>
<div id="icon" class="container"> <div class="icon-title"> <ul> <h2>成功案例</h2> <p>QIMENG Introduction</p> </ul> <ol> <li></li> <li></li> <li></li> </ol> </div> <div class="icon-case"> <div> <a href="#"><img src="./img/index-assets/icon-1.png" alt=""></a> <ul> <a href="#">家饰类：柠檬树</a> <p> 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来 </p> </ul> </div> <div> <a href="#"><img src="./img/index-assets/icon-2.png" alt=""></a> <ul> <a href="#">家饰类：柠檬树</a> <p> 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来 </p> </ul> </div> <div> <a href="#"><img src="./img/index-assets/icon-3.png" alt=""></a> <ul> <a href="#">家饰类：柠檬树</a> <p> 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来 </p> </ul> </div>
</div> </div>
<div id="infer"> <div class="infer-main container"> <div class="infer-main-title"> <ul> <h2>新闻动态</h2> <p>QIMENG Introduction</p> </ul> <p>更多>></p> <ol> <li></li> <li></li> <li></li> </ol> </div> <div class="infer-main-case"> <div class="case-list"> <ul> <div><a href="#"><img src="./img/index-assets/infer-1.png" alt=""></a></div> <ol> <h4>推动电子商务的第一选择，助力三网融合的首选伙伴！</h4> <p> 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来 </p> </ol> </ul> <ul> <div><a href="#"><img src="./img/index-assets/infer-1.png" alt=""></a></div> <ol> <h4>推动电子商务的第一选择，助力三网融合的首选伙伴！</h4> <p> 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来 </p> </ol> </ul> <ul> <div><a href="#"><img src="./img/index-assets/infer-1.png" alt=""></a></div> <ol> <h4>推动电子商务的第一选择，助力三网融合的首选伙伴！</h4> <p> 今天的O2O，实际是互联网经济和传济水乳交融，矛盾纠结又沟业经营的角度，我讲讲这些年来这些年来这些年来网经济和传济水乳交融来 </p> </ol> </ul> </div> <div class="pic-infer"> <a href="#"><img src="./img/index-assets/infer-4.png" alt=""></a> </div> </div> </div> </div>
<div id="hot" class="container"> <div class="hot-title"> <ul> <h2>客户列表</h2> <p>QIMENG Introduction</p> </ul> <p></p> <ol> <li></li> <li></li> <li></li> </ol> </div> <div class="hot-pic"> <div> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> </div> <div> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> <ul><a href="#"><img src="./img/index-assets/hot.png" alt=""></a></ul> </div> </div> </div>
<div id="footer"> <div class="footer-infer container"> <div class="iphone"> <ul><img src="./img/index-assets/dianhuo.png" alt=""></ul> <ol> <li>0760-86283555 </li> <p>全国服务热线</p> </ol> </div> <div class="case"> <p> 版权所有：深圳市启梦网络科技有限公司 全国统一热线： 400-161-1808 电话： 0755-61881808 传真： 0755-61881868 </p> <p> 公司地址：深圳市福田区福田保税区绒花路 号（城市 米6公寓）4楼 邮箱： service ＠ qm-cn.com 备案：粤备 ICP14011927 号 </p> </div> </div>
</div></body>
</html>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;}
小米商城页面的实现请点击跳转小米商城
