上一篇的文章技术方面的内容讲得很宽泛，这节给大家详细说一下，主要分为上下两篇，先讲一下前端的学习内容，再说一下产品经理需要的技术储备。内容较多，全是干货！仅属个人观点，不喜勿喷！
图片来自网络，只是觉得很酷(侵删)
上篇前端基础技术储备
一．WEB端网页制作
必备学习技能：HTML5、CSS3、Bootstrap、JavaScript、PS、PHP、少许特效JQuery。首先，HTML5是比较简单和基础的标签代码，可以登录W3Cschool或者菜鸟教程学习，要知道每个标签都是做什么的，注意标签的使用方法和内外层嵌套规则，这部分一定要亲手敲代码，一个一个的实验，记笔记学不会啊！学会了HTML就相当于把房子的框架搭好了，然后进行局部美化，调节字体大小颜色啊，整段向右向右靠啊，还有图片方正圆形控制什么的，这就是CSS，工作能用到的很多，需要记住的代码却不多，和H5在一个网站上就能学到，这个也不难。BOOTSTRAP这个也有相关的网站可以学习，当时用的不是很多，官网的内容看了至少两三遍，然鹅，已经全还给官网了，像这种已经打包好直接可以用的东西是很方便的，但是你要进行修改找东西就比较费劲了。如果页面需要小小的动态交互，这个时候就可以去JQuery网站上查找，简单的都不收费，只要下载下来文件位置放好基本都能用，但是有些特效的兼容性一定要引起注意！PS这部分不需要太精通，一般来说能切图保存，知道这个颜色的代码是什么就够用了，但还是建议系统的学习一下PS，因为用处真的很多，我通常是在腾讯课堂，网易云课堂这些上面找学习视频，跟着做，一节课不到五分钟，如果忘了或者没时间学也没关系，百度上都能查到。最后JS和PHP前端用的不太多，我是学完就忘了，因为之前工作的时候用的很少，能记得的部分可以一直在用，不会的就去官网查，或者百度出来代码，会用就可以。
因为是半路出家的和尚，代码部分的学习沿用了之前的学习习惯，收效甚微，反复记反复记不住，看到网站知道是马冬梅，关掉网页马什么梅来着，再打开网页知道了是马冬梅，实际工作的时候你得知道马冬梅住几楼，哪屋，怎么上去，楼下大爷叫啥.......也是在那个时候才清晰的认识到，不写原生代码，不用每个标签都记住，只要需要的时候在百度上能看懂，能拿过来用就可以。
WEB前端制作网页行内叫做切图，以下是在最初入行时很有经验的前辈传授的知识笔记，作为一名WEB前端，从收到项目美工图，创建这个项目，和制作过程及上线都有很详细的指导，那个时候的手机和电脑版都用H5+CSS3代码，只是控制不同屏幕尺寸显示不同的CSS代码而已，还有许多业内通用的代码书写规范以及注意事项，希望对你有用。
切站：
（1）收到美工图后，与美工沟通，确定网站布局、特效，详细讨论手机版网页显示的图片、logo及特效等内容；
（2）分析网页布局，先在图纸上画出大概布局及命名；
（3）用PS切图片（电脑版）；
（4）创建网站文件（CSS\JS\HTML）；
（4）先切主页（首页）即index.html，使用DIV+CSS+JQUERY/BOOTSTRAP；
（5）再切二级页（内页）；
（6）切电脑版时要想到某些部分在手机版的显示或替换问题；
（7）最好将所有CSS文件写入一个文件中；
（8）修改样式表实现响应式（屏幕尺寸不同，页面显示样式不同）；
（9）加入链接；
（10）书写说明文档；
（11）上传服务器进行测试；
前端应包含的内容：首页、内容页、产品页、产品详细页、资讯页、咨询详细页、留言板、图册页、拓扑图（说明书）、
代码书写：
1.分析页面布局
（1）DIV做最外层，并在最后加载出来。
（2）确定安全区class=“container”内容
（3）使用div、盒子模型进行内部页面布局
（4）每部分结束后加入清理层<div class=”clear”></div>
2.头部需要包含的内容：
(1).<meta charset="utf-8">
(2).<meta http-equiv="X-UA-Compatible" content="IE=edge">
(3).防止页面上下滑动
<meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
(4).
< meta name="description" content="内容描述" >
< meta name="keywords" content="关键词" >
尖括号内有空格 使用时注意取消
(5).网站首页要有的内容网站首页</title>
<link rel="stylesheet" type="text/css" href="css/wheelmenu.css" />
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/slick.css">
<linkhref="css/bootstrap.min.css"rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
(6).调用js所需要的js库
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- lb -->
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
3.css样式表
（1）版本：
< link rel=… common.css?ver3.0>网站使用3.0版本
< script rel=… style.js?ver3.0>
（2）注释（统一样式表）：
作者：姓名、QQ、Email、电话、/公司网站要填写公司信息
时间：年月日
版本：1.0
（3）common.css
/* CSS Document */
@charset "utf-8";
/*共用样式表*/
*{margin:0;padding:0;} /*格式化样式*//** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements结构元素 */
dl, dt, dd, ul, ol, li, /* list elements列表元素 */
pre, /* text formatting elements文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements表单元素 */
th, td /* table elements表格元素 */ {
margin: 0;
padding: 0;
}
/**设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
address, cite, dfn, em, var { font-style: normal; } /*将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /*统一等宽字体 */
small { font-size: 12px; } /*小于 12px 的中文很难阅读, 让 small 正常化 */
/**重置列表元素 **/
ul, ol { list-style: none; }
/**重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; }
/*重置, 减少对行高的影响 */
sub { vertical-align: text-bottom; }
/**重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /*使得表单元素在 ie 下能继承字体大小 */
/*注：optgroup 无法扶正 */
/**重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
/*重置 HTML5 元素 */
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
display: block;
margin: 0;
padding: 0;
}
mark { background: #ff0; }
（4）style.css
index.css(/*name version*/)
Header(/*公共样式*/)
Content(/*公共样式*/)
Footer(/*公共样式*/)
类公共样式放在最下面
*样式不从头写，由内往外写，先写最接近的部分。
4.css进行样式修改
(1)确定样式表链接方式
外链 < link> 性能最优
内链< style>可取可取
行内< a style=”>性能最直接但是不通用
(2)适用于所有元素
*{margin：0；padding：0；}
但是浏览器不兼容
(3)去除浏览器默认样式
Body,p,div,a……{margin:0;padding:0;}
(4)body{font-family:设置字体样式；}
(5)body要设置background-color以屏蔽网站保护颜色，一般设置为白色
注意问题：
1.寻找网站特效时注意H4、H5的兼容性，H4文件头部很长，有DTD文件
2.地域不同，网页风格不同
3.Div不是层，DIV+Position是层
4.书写开始标签时一定紧跟结束标签，并且可以添加注释以便区分
5.Logo设置最好使用百分比
6.手机版上下左右间距可以使用百分比，可在小范围内岁随屏幕调节大小
7.< img max-width:100%；>应用于移动端，响应式中对图片的处理
8.Logo等需要透明背景的图片用png格式,其他可用jpg格式
9.块级元素可以内嵌行内元素，行内元素不可以嵌套块级元素
10.样式表css：
（1）ul li{list-style:none}去除列表之前的点
（2）可在统一的样式表内定义h1-h6的大小，
fl{float:left;} fr{float:right}
claerfix:清除浮动
clear:both；清楚左右两边的内容
w:定义安全宽度
（3）10-15px为最佳宽度范围，5px为NEWS的最佳间距
（4）标准行高：字体2倍+1 ；25px为通用；其余可选14px\29px
（5）首行缩进：2em
11.标签使用：
（1）布局多使用：<div> <ul><li> <dt><dl> <table>
（2）<p>最好不用于布局，适合文字排版使用
（3）<span>可用于改变字体颜色、大小
（4）<ul><li>用于导航、循环
（5）<div>父级元素，全能，但性能较弱
（6）千万不要使用<br>可能产生隐性DOM，出现BUG
12.margin-left\margin-right在IE浏览器中显示双倍
13.position:relative\absolute\fixed上部使用相对定位，下部使用绝对定位，否则按Body定位
14.高度设定：
min-height:xxpx;height:auto;
15.手机电脑端显示问题：
.pc{display:none;}
.mobile{display:block}
@media(min-width:768px;){
.pc{display: block;}
.mobile{display: none; }
}
16.排查问题时可以采用注释法和添加背景颜色的方法
引用新特效后发现有些功能失效，检查JS和CSS文件的顺序放置，调换顺序即可解决。
17.CSS书写顺序：通常修饰一部分页面需要在一个标签的CSS中加入多个修饰代码，以下为收集到的最佳代码书写顺序。
（1）位置属性：position\top\right\Z-index\display\float
（2）大小：Width\height\padding\margin
（3）文字系列：font\line-height\letter-spacing\color\text-align
（4）背景 : background\border
（5）其他：animation\transition
18.PS使用注意：
Alt+Delte :填充前景颜色；
Ctrl+Delte :填充背景颜色；
Ctrl+J :新建图层；
Ctrl+空格 : 中英文切换；
Alt+滚轮 : 可放大缩小图片；
Ctrl+Shift+Alt+C :一个美工小姐姐教我的保存图片的方法；
Png结尾图片背景为空；
吸管可吸取颜色添加至色板；
选框+填充，选取内容识别可以去除图上标记；
笔刷可以下载使用；
橡皮擦擦后露出背景；
背景橡皮擦擦掉背景；
魔术橡皮擦，点一下消除背景；
二．APP软件制作
最先使用的软件是普元，这个工具有自己的代码书写规则，所以是学了一段时间才开始做一些简单的页面和交互，这个时候就开始需要写JS了，经常是半夜一两点都毫无困意，当然，对我这种底子薄的人确实有难度，但是专业选手就能很快上手。因为普元用的并不是很广泛，当时的学习资源也只有软件的文档和之前大神们写过的代码，所以这里不做赘述。
接下来我被调到了VUE组，赶鸭子上架的既视感，不得不说，互联网行业，真的是得时刻保持着学习能力啊！这部分的学习就更快了，因为有一位公司同事录制了一个多小时的教学视频，手把手的教给你如何完成一个简单APP的制作，看完就能直接上手做了。为什么这么简单？因为之前的知识底子在，而使用的是Freamwork7+VUE的框架，标题栏啊、弹框啊、下拉框啊还有轮播图都是现成的插件，直接拽进去用就好了。但是姐姐这么强的求知欲这点东西怎么能满足呢！所以继续在菜鸟教程还有一些学习网站上学习原生VUE，只是后来从没有用到过，也就，你懂得。
这次的分享先到这里，虽然我APP做的比WEB要久，但是代码积累最多是在WEB的时候，许多代码经常用就记住了，而且做APP的时候中间跨度也不是很大，但是不包括专业做安卓和IOS的前端们，那部分我是真的没有接触过，所以不做评论。在接下来的篇章里我会为大家分享我为产品经理职位进行的知识储备与经验积累，继续看不要停！
网友评论