WebStorm开发应用—

由于课程设计的需要，第一次上手WebStorm开发一个手机端应用。在这之前，我利用html，css，js写前端页面用得比较多的还是eclipse和MyEclipse，不过总感觉做出的页面不尽如人意甚至可以说是面目可憎非常丑陋。（它们总是不按我想要的样子排列！太可恶了）
由于之前有过用可视化的VS2010“随心所欲拖控件，双击控件写逻辑”制作web页面这样非常轻松愉快的体验，对于html总有望而却步之感。不过既然这次课设要用，就打算系统地再练练手。这次项目实训类似功能服务性质的应用。
这个项目前端页面主要用到的是html（页面内容由html构成），css（利用排版，样式将页面内容进行美化），js（脚本语言使页面具有交互性）

首先上效果图

因为第二个页面企业项目里有三个页面，所以一共是是七个页面。首先做第一个页面第一个页面新建一个html5页面，命名为DropletService.html 观察第一个页面从上到下其实是由蓝色背景标题栏，图片，表格，黑色背景导航栏这四部分组成的，所以分别来写。

CSS样式分为三种样式
外部样式（写在css文件里再link href 引用），页内样式（在head标签内写style标签），行内样式（代码写在具体一个元素内，如<div style="color:#f00"></div>）

该如何选用这三种样式呢？如果一个样式在项目中多次重复使用，为减少代码量和提高可维护性应使用外部样式；当一个样式在项目中出现次数很少，代码量稍大，应使用页内样式；如果一个样式在项目中出现次数很少，代码量也很少使应使用行内样式。综上，第一部分标题栏和第四部分导航栏在每个页面中样式均相同，应写在ExternalStyle.css内。

外部样式ExternalStyle.css

*{margin: 0;padding: 0;
}
body{background: rgb(244,244,246);padding-top: 44px;padding-bottom: 49px;
}header{background: rgb(40,133,202);line-height: 44px;font-size: 18px;text-align: center;color: white;width: 100%;left: 0;top: 0;position: fixed;
}
.DS_second_section img{width: 100%;
}
footer{display: table;width: 100%;background: black;height: 49px;left: 0;bottom: 0px;position: fixed;
}footer a{text-decoration: none;display: table-cell;width: 20%;text-align: center;vertical-align: middle;}footer a img{width: 18px;
}footer a span{display: block;font-size: 12px;color: white;}

关于ExternalStyle.css的一些说明
1.* 这东西叫“通配符”用来匹配页面上所有元素。body ,ul, li ,p,h1~h6,dd,dt 等都有默认的margin 或padding值的，加上这句就可以删除浏览器这些默认值，方面后面的设置。
2.padding-top: 44px; padding-bottom: 49px;如果没有这一句标题栏和导航栏会将一部分图片和表格内容覆盖。
3. width: 100%;是为了让图片铺满屏幕；标题栏和导航栏是绝对定位 position: fixed;
4. 导航栏相当于一行五列的表格，相当于每个width: 20%;
5. 有重合用padding无重合用margin，水平方向上分为left，center，right，竖直方向上分为top，middle，bottom
6.display: table;将此元素作为块级表格来显示，表格前后带有换行符。display: table-cell;将此元素作为一个表格单元格显示 display: block;将此元素显示为块级元素，此元素前后会带有换行符。

第一个页面小滴服务

页面一、小滴服务 DropletService.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>王卓健</title><link rel="short icon" href="Resource/icon.png"><!--stylesheet用来加载外部样式表--><link rel="stylesheet" href="ExternalStyle.css"><style>/*成行的标签写法 display：table  width：需求值*/ul{display: table;width: 100%;background:white ;height: 100px;margin-bottom: 10px;}/*成列的标签写法 display：table-cell  width：需求值*/li{display: table-cell;width: 33.3%;text-align: center;vertical-align: middle;}.DS_second_section img{margin-bottom: -6px;}ul li span{display: block;}</style>
</head>
<body>
<!--第一部分-->
<header class="DS_header">
<span>小滴服务</span>
</header>
<!--第二部分--><section class="DS_second_section">
<img src="Resource/banner-1.png" alt="请检查一下您的网络~">
</section>
<!--第三部分-->
<section>
<ul><li><img src="Resource/index1.png"alt=""><span>企业项目</span><li><img src="Resource/index2.png"alt=""><span>平台风采</span><li><img src="Resource/index3.png"alt=""><span>报名流程</span></ul>
<ul><li><img src="Resource/index4.png"alt=""><span>客户管理</span><li><img src="Resource/index5.png"alt=""><span>账务管理</span><li><img src="Resource/index6.png"alt=""><span>新闻公告</span></ul>
<ul><li><img src="Resource/index7.png"alt=""><span>工程案例</span><li><img src="Resource/index8.png"alt=""><span>修改密码</span><li><img src="Resource/index9.png"alt=""><span>会员注册</span></ul></section>
<!--第四部分--><footer>
<a href=""><img src="Resource/nav11.png" alt=""><span style="color: red">小滴服务</span>
</a><a href="BusinessProject.html"><img src="Resource/nav20.png" alt=""><span>企业项目</span>
</a><a href="ServiceProcedure.html"><img src="Resource/nav30.png" alt=""><span>服务流程</span>
</a><a href="Platform.html"><img src="Resource/nav40.png" alt=""><span>平台风采</span>
</a><a href="MyDroplet.html"><img src="Resource/nav50.png" alt=""><span>我的小滴</span>
</a>
</footer>
</body>
</html>

关于DropletService.html 的一些说明
1.写在meta中的name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"是适配器，用来适配不同型号的手机屏幕，固定代码背会就好。
2.关于点击导航栏字体和图标变红是如何实现呢？每个图标都有两张，一张是红色一张是白色，当html页面跳转到新页面时，把新页面的图片素材换成红色的，之前的html换成白色就可实现，至于文字更简单，在新页面用css行内样式改成红色，之前的html改成白色即可，我这里素材号码末尾是0代表1代表红色，小滴服务的图片就是nav11.png

第二个页面企业项目（这个页面由三个页面组成这是 1.钻石创业者）

页面二、企业项目（1.钻石创业者） BusinessProject.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>王卓健</title><link rel="short icon" href="Resource/icon.png"><!--stylesheet用来加载外部样式表--><link rel="stylesheet" href="ExternalStyle.css"><style>.BP_first_section{display: table;width: 100%;background: rgb(244,244,246);height: 44px;left: 0;top:44px;position: fixed;}.BP_first_section a span {color: black;}.BP_first_section a{display: table-cell;width: 33.3%;text-decoration: none;text-align: center;vertical-align: middle;}.Commen_section img{width: 100%;}.BP_external_div{background: white;text-align: center;}.BP_span{font-size: 14px;}.BP_img{width: 100%;}.BP_first_p{font-size: 10px;color: gray;}.BP_external_div_sec{text-align: center;}.BP_inner_div{text-align: left;padding-left: 20px;font-size: 10px;color: gray;line-height:2em;}</style></head>
<body>
<!--第一部分-->
<header class="DS_header"><span>企业项目</span>
</header>
<!--第二部分-->
<section class="BP_first_section"><a style="background: white"><span style="color: rgb(63,149,211);">钻石创业者</span></a><a href="BusinessProjectGold.html"><span>金牌创业者</span></a><a href="BusinessProjectSilver.html"><span>银牌创业者</span></a>
</section>
<!--第三部分-->
<section class="Commen_section"><img style="padding-top: 44px" src="Resource/banner2.png">
</section>
<!--第四部分-->
<div class="BP_external_div"><span class="BP_span">服务内容</span><img class="BP_img" src="Resource/50w_1.png"><p class="BP_first_p">提供两个学院的技术支持、咨询服务、课件学习等内容</p>
</div>
<!--第五部分-->
<div class="BP_external_div_sec"><span class="BP_span">创业者享受的回报收益</span><img class="BP_img" src="Resource/50w_2.png" alt=""><div class="BP_inner_div"><p>x : 渠道可享有的股份额度; </p><p>y : 渠道个人业绩流水总额累计; </p><p>z :历年渠道全部各方业绩流水总额累计; </p><p>b :宏鑫互联网集团所拥有的上市或者充足公司纵谷本数;<p>q : 宏鑫互联网集团上市总股本数的20%;</p></div>
</div>
<!--第六部分-->
<div class="BP_external_div"><span class="BP_span">获得收益条件</span><div class="BP_inner_div"><p>①N210人; </p><p>@业绩流水>1.2亿。</p><p>当满足以上2个条件时，钻石创业者才能取得期权。</p><p>注:上面的y、z为财务数据，由财务部I门按期提供，录入即可。</p>宏鑫互联网集团上市总股本数的20%;</p></div>
</div>
<!--第七部分-->
<footer><a href="DropletService.html"><img src="Resource/nav10.png" alt=""><span>小滴服务</span></a><a href=""><img src="Resource/nav21.png" alt=""><span style="color: red">企业项目</span></a><a href="ServiceProcedure.html"><img src="Resource/nav30.png" alt=""><span>服务流程</span></a><a href="Platform.html"><img src="Resource/nav40.png" alt=""><span>平台风采</span></a><a href="MyDroplet.html"><img src="Resource/nav50.png" alt=""><span>我的小滴</span></a>
</footer>
</body>
</html>

关于 BusinessProject.html的一些说明
1.整体分为了七部分来做，第一部分标题栏和第七部分导航栏不变，第二部分仍用表格做，三个选项每项 width: 33.3%; 第一，第二，第七部分为绝对定位。line-height:2em;行高是两倍文字大小；页面二由三个子页面组成，这个和下面两个子页面非常相似

第二个页面企业项目（这是 2.金牌创业者）。

页面二、企业项目（2.金牌创业者） BusinessProjectGold.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>王卓健</title><link rel="short icon" href="Resource/icon.png"><!--stylesheet用来加载外部样式表--><link rel="stylesheet" href="ExternalStyle.css"><style>.BP_first_section{display: table;width: 100%;background: rgb(244,244,246);height: 44px;left: 0;top:44px;position: fixed;}.BP_first_section a span {color: black;}.BP_first_section a{display: table-cell;width: 33.3%;text-decoration: none;text-align: center;vertical-align: middle;}.Commen_section img{width: 100%;}.BP_external_div{background: white;text-align: center;}.BP_span{font-size: 14px;}.BP_img{width: 100%;}.BP_first_p{font-size: 10px;color: gray;}.BP_external_div_sec{text-align: center;}.BP_inner_div{text-align: left;padding-left: 20px;font-size: 10px;color: gray;line-height:2em;}</style></head>
<body>
<!--第一部分-->
<header class="DS_header"><span>企业项目</span>
</header>
<!--第二部分-->
<section class="BP_first_section"><a href="BusinessProject.html"><span>钻石创业者</span></a><a style="background: white"><span style="color: rgb(63,149,211);">金牌创业者</span></a><a href="BusinessProjectSilver.html"><span>银牌创业者</span></a>
</section>
<!--第三部分-->
<section class="Commen_section"><img style="padding-top: 44px" src="Resource/banner21.png">
</section>
<!--第四部分-->
<div class="BP_external_div"><span class="BP_span">服务内容</span><img class="BP_img" src="Resource/30w_1.png"><p class="BP_first_p">提供两个学院的技术支持、咨询服务、课件学习等内容</p>
</div>
<!--第五部分-->
<div class="BP_external_div_sec"><span class="BP_span">创业者享受的回报收益</span><img class="BP_img" src="Resource/30w_2.png" alt=""><div class="BP_inner_div"><p>x : 渠道可享有的股份额度; </p><p>y : 渠道个人业绩流水总额累计; </p><p>z :历年渠道全部各方业绩流水总额累计; </p><p>b :宏鑫互联网集团所拥有的上市或者充足公司纵谷本数;<p>q : 宏鑫互联网集团上市总股本数的20%;</p></div>
</div>
<!--第六部分-->
<div class="BP_external_div"><span class="BP_span">获得收益条件</span><div class="BP_inner_div"><p>①N210人; </p><p>@业绩流水>1.2亿。</p><p>当满足以上2个条件时，钻石创业者才能取得期权。</p><p>注:上面的y、z为财务数据，由财务部I门按期提供，录入即可。</p>宏鑫互联网集团上市总股本数的20%;</p></div>
</div>
<!--第七部分-->
<footer><a href="DropletService.html"><img src="Resource/nav10.png" alt=""><span>小滴服务</span></a><a href=""><img src="Resource/nav21.png" alt=""><span style="color: red">企业项目</span></a><a href="ServiceProcedure.html"><img src="Resource/nav30.png" alt=""><span>服务流程</span></a><a href="Platform.html"><img src="Resource/nav40.png" alt=""><span>平台风采</span></a><a href="MyDroplet.html"><img src="Resource/nav50.png" alt=""><span>我的小滴</span></a>
</footer>
</body>
</html>

第二个页面企业项目（这是 3. 银牌创业者）

页面二、企业项目（3.银牌创业者） BusinessProjectSilver.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>王卓健</title><link rel="short icon" href="Resource/icon.png"><!--stylesheet用来加载外部样式表--><link rel="stylesheet" href="ExternalStyle.css"><style>.BP_first_section{display: table;width: 100%;background: rgb(244,244,246);height: 44px;left: 0;top:44px;position: fixed;}.BP_first_section a span {color: black;}.BP_first_section a{display: table-cell;width: 33.3%;text-decoration: none;text-align: center;vertical-align: middle;}.Commen_section img{width: 100%;}.BP_external_div{background: white;text-align: center;}.BP_span{font-size: 14px;}.BP_img{width: 100%;}.BP_first_p{font-size: 10px;color: gray;}.BP_external_div_sec{text-align: center;}.BP_inner_div{text-align: left;padding-left: 20px;font-size: 10px;color: gray;line-height:2em;}</style></head>
<body>
<!--第一部分-->
<header class="DS_header"><span>企业项目</span>
</header>
<!--第二部分-->
<section class="BP_first_section"><a href="BusinessProject.html"><span>钻石创业者</span></a><a href="BusinessProjectGold.html"><span>金牌创业者</span></a><a style="background: white"><span  style="color: rgb(63,149,211);">银牌创业者</span></a>
</section>
<!--第三部分-->
<section class="Commen_section"><img style="padding-top: 44px" src="Resource/banner22.png">
</section>
<!--第四部分-->
<div class="BP_external_div"><span class="BP_span">服务内容</span><img class="BP_img" src="Resource/10w_1.png"><p class="BP_first_p">提供两个学院的技术支持、咨询服务、课件学习等内容</p>
</div>
<!--第五部分-->
<div class="BP_external_div_sec"><span class="BP_span">创业者享受的回报收益</span><img class="BP_img" src="Resource/10w_2.png" alt="">
</div>
<!--第七部分-->
<footer><a href="DropletService.html"><img src="Resource/nav10.png" alt=""><span>小滴服务</span></a><a href=""><img src="Resource/nav21.png" alt=""><span style="color: red">企业项目</span></a><a href="ServiceProcedure.html"><img src="Resource/nav30.png" alt=""><span>服务流程</span></a><a href="Platform.html"><img src="Resource/nav40.png" alt=""><span>平台风采</span></a><a href="MyDroplet.html"><img src="Resource/nav50.png" alt=""><span>我的小滴</span></a>
</footer>
</body>
</html>

这是第三个页面服务流程

页面三、服务流程 ServiceProcedure.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>王卓健</title><link rel="short icon" href="Resource/icon.png"><!--stylesheet用来加载外部样式表--><link rel="stylesheet" href="ExternalStyle.css">
</head>
<body>
<!--第一部分-->
<header class="DS_header"><span>服务流程</span>
</header>
<!--第二部分--><section class="DS_second_section"><img src="Resource/banner3.png" alt="请检查一下您的网络~">
</section>
<!--第三部分-->
<section><img style="margin: 10px 20px; width: 90%" src="Resource/process.png">
</section>
<!--第四部分-->
<footer><a href="DropletService.html"><img src="Resource/nav10.png" alt=""><span>小滴服务</span></a><a href="BusinessProject.html"><img src="Resource/nav20.png" alt=""><span>企业项目</span></a><a href=""><img src="Resource/nav31.png" alt=""><span style="color: red">服务流程</span></a><a href="Platform.html"><img src="Resource/nav40.png" alt=""><span>平台风采</span></a><a href="MyDroplet.html"><img src="Resource/nav50.png" alt=""><span>我的小滴</span></a>
</footer>
</body>
</html>

这是第四个页面平台风采

页面四、平台风采 Platform.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>王卓健</title><link rel="short icon" href="Resource/icon.png"><!--stylesheet用来加载外部样式表--><link rel="stylesheet" href="ExternalStyle.css">
<style>article{margin: 20px;}h3{color: red;font-size: 18px;border-bottom: 1px solid #dddddd;padding-bottom: 10px;}h4{font-size: 14px;}article p{font-size: 12px;text-indent: 2em;line-height: 2em;}
</style></head>
<body>
<!--第一部分-->
<header class="DS_header"><span>平台风采</span>
</header>
<!--第二部分--><section class="DS_second_section"><img src="Resource/banner4.png" alt="请检查一下您的网络~">
</section><!--第三部分-->
<article><h3>公司简介</h3><h4>华山科技(北京)有限公司</h4><p>华形技(北尔)有限公司一直隶建在向新和经拉的路上， 我们只做行业第一 ”致力于为整个互联网科技行业输送高级技术人才、做好每一款外包项目 。</p><p>华杉科技(北京)有限公司是家既专注于培养高级|IT技术人才，为学员提供定制化IT职业规划方案及意见咨询服务，又是国内领先的智能手机软件外包服务商。公司由原东方爱智技术总监，原58同城技术总监，河南大学软件学院优秀毕业生共同创立。</p><p>华杉科技(北京)有限公司拥有业内知名的教研团队和雄厚的课程研发能力，课程的快速迭代时刻紧跟当今较为流行的前沿技术、不同行业的外包项目作为支撑，强有力的保证了学员的核心竞争力。强竞争力的一线技术人员和完善的外包服务流程充分保证了每一款项目的顺利执行。</p>
</article><footer><a href="DropletService.html"><img src="Resource/nav10.png" alt=""><span>小滴服务</span></a><a href="BusinessProject.html"><img src="Resource/nav20.png" alt=""><span>企业项目</span></a><a href="ServiceProcedure.html"><img src="Resource/nav30.png" alt=""><span>服务流程</span></a><a href=""><img src="Resource/nav41.png" alt=""><span  style="color: red">平台风采</span></a><a href="MyDroplet.html"><img src="Resource/nav50.png" alt=""><span>我的小滴</span></a>
</footer>
</body>
</html>

关于Platform.html 的一些说明

text-indent: 2em;代表文字大小的两倍，首行缩进两格； line-height: 2em;行高是文字高度的两倍如文字12px，行高为24px，中间文字上下留空白6px，文字居中。

这是第五个页面我的小滴

页面五、我的小滴 MyDroplet.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>王卓健</title><link rel="short icon" href="Resource/icon.png"><!--stylesheet用来加载外部样式表--><link rel="stylesheet" href="ExternalStyle.css"><style>.MD_bg_img{width: 100%;}.MD_external_div{position: relative; /*设置参照物*/z-index: -1;}.MD_inner_div{left: 50%;top: 50%;margin-left: -33px;margin-top: -60px;position: absolute;width: 66px;height: 120px;text-align: center;}button{margin-top: 20px;background: rgb(40,133,202);width: 66px;height: 20px;font-weight: bold;}.MD_third_div{border: 1px solid #cccccc;width: 90%;margin: 0 auto;border-radius: 5px;height: 50px;line-height: 50px;}.MD_left_img{float: left;margin-top: 15px;margin-left: 10px;margin-right: 20px;}.MD_right_img{float: right;margin-right: 10px;margin-top: 15px;}</style>
</head>
<body>
<!--第一部分-->
<header class="DS_header"><span>我的小滴</span>
</header>
<!--第二部分-->
<div class="MD_external_div"><img class="MD_bg_img" src="Resource/banner5.png" alt=""><div class="MD_inner_div"><img src="Resource/head.png" alt=""><span>华山科技</span><button>退出登录</button></div>
</div><!--第三部分-->
<div class="MD_third_div">
<img class="MD_left_img" src="Resource/gr_1.png" alt=""><span>我的客户</span><img class="MD_right_img" src="Resource/jt.png">
</div><div class="MD_third_div"><img class="MD_left_img" src="Resource/gr_2.png" alt=""><span>我的余额</span><img class="MD_right_img" src="Resource/jt.png">
</div><div class="MD_third_div"><img class="MD_left_img" src="Resource/gr_3.png" alt=""><span>注册客户</span><img class="MD_right_img" src="Resource/jt.png">
</div><div class="MD_third_div"><img class="MD_left_img" src="Resource/gr_4.png" alt=""><span>修改密码</span><img class="MD_right_img" src="Resource/jt.png">
</div><!--第四部分-->
<footer><a href="DropletService.html"><img src="Resource/nav10.png" alt=""><span>小滴服务</span></a><a href="BusinessProject.html"><img src="Resource/nav20.png" alt=""><span>企业项目</span></a><a href="ServiceProcedure.html"><img src="Resource/nav30.png" alt=""><span>服务流程</span></a><a href="Platform.html"><img src="Resource/nav40.png" alt=""><span>平台风采</span></a><a href=""><img src="Resource/nav51.png" alt=""><span  style="color: red">我的小滴</span></a>
</footer></body>
</html>

关于 MyDroplet.html的一些说明
1.这个页面第二部分背景图片和用户头像是相对定位left: 50%; top: 50%; margin-left:-33px; margin-top:-60px;内部块左上角顶点位于外部块中央，所以内部快图案整体向右向下各偏离了宽高的一半，所以要补偿回来。
2. 若第三部分项目数较多，向上滑动页面时，由于背景图片外部块相对定位使标题栏被覆盖，z-index: -1;可解决一问题。z-index的默认值是auto可看作0，z轴坐标相当于是屏幕和程序员的距离（可取负），可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。相当于标题栏离我们更近，背景图片外部块在后面，这样就不会覆盖了。