主讲内容：
1、PhotoShop-1天
2、HTML5-2天
3、CSS3-8天
4、电商实战项目-4天
知识要点：
1、PhotoShop：
采用商业案例掌握Photoshop基本使用，能够独立完成尺寸测量、切图、图层操作、Cutterman切图神器等。
2、HTML5：
客户端和服务端交互原理、浏览器内核、语法及使用、常用标签、语义化、表单元素、HTML5 新标签、编码规范。
3、CSS3:
CSS常用属性、各种选择器、继承和优先级、数值与单位、文字文本样式、CSS盒子模型、CSS背景技巧（圆角、阴影、过渡等）、定位和浮动、伪类和伪元素、、CSS高级技巧（精灵图、滑动门、CSS三角等）、布局样式、CSS兼容性问题、Google浏览器开发者工具调试技巧。
4、实战项目（网易严选）：
布局技巧、完整的多页面网站开发、CSS模块化开发，复合选择器应用技巧、复杂网页排版和布局、特效设计等。
通过该项目培养代码组织原则，项目开发流程，注重培养分析问题、解决问题的能力、调试能力，开发思维的塑造。
什么样的代码叫好代码？
送大家以下java学习资料
简介： 大家每天都与代码打交道，但当被问道什么是好的代码时，很多人可能会先愣一下，然后给出的回答要么比较空泛，要么比较散，没办法简单明了地概括出来。显然，这个问题并没有唯一的标准答案，谁都可以谈论自己的理解，今天谈谈偶对于好代码的理解。
导读：大家每天都与代码打交道，但当被问道什么是好的代码时，很多人可能会先愣一下，然后给出的回答要么比较空泛，要么比较散，没办法简单明了地概括出来。显然，这个问题并没有唯一的标准答案，谁都可以谈论自己的理解，今天谈谈偶对于好代码的理解。
一句话概括
衡量代码质量的唯一有效标准：WTF/min —— Robert C. Martin
Bob大叔对于好代码的理解非常有趣，对偶也有很大的启发。大家编写的代码，除了用于机器执行产生大家预期的效果以外，更多的时候是给人读的，这个读代码的可能是后来的维护人员，更多时候是一段时间后的作者本人。
偶敢打赌每个人都遇到过这样的情况：过几周或者几个月之后，再看到自己写的代码，感觉一团糟，不禁怀疑人生。
大家自己写的代码，一段时间后自己看尚且如此，更别提拿给别人看了。
任何一个傻瓜都能写出计算机可以理解的代码。唯有写出人类容易理解的代码，才是优秀的程序员。—— Martin Fowler
所以，谈到好代码，首先跳入自己脑子里的一个词就是：整洁。
好的代码一定是整洁的，给阅读的人一种如沐春风，赏心悦目的感觉。
整洁的代码如同优美的散文。—— Grady Booch
好代码的特性
很难给好的代码下一个定义，相信很多人跟偶一样不会认为整洁的代码就一定是好代码，但好代码一定是整洁的，整洁是好代码的必要条件。整洁的代码一定是高内聚低耦合的，也一定是可读性强、易维护的。
高内聚低耦合
高内聚低耦合几乎是每个程序员员都会挂在嘴边的，但这个词太过于宽泛，太过于正确，所以聪明的编程人员们提出了若干面向对象设计原则来衡量代码的优劣：
开闭原则 OCP (The Open-Close Principle)单一职责原则 SRP (Single Responsibility Principle)依赖倒置原则 DIP (Dependence Inversion Principle)
最少知识原则 LKP (Least Knowledge Principle)) / 迪米特法则 (Law Of Demeter)
里氏替换原则 LSP (Liskov Substitution Principle)接口隔离原则 ISP (Interface Segregation Principle)组合/聚合复用原则 CARP (Composite/Aggregate Reuse Principle)
这些原则想必大家都很熟悉了，是大家编写代码时的指导方针，按照这些原则开发的代码具有高内聚低耦合的特性。换句话说，大家可以用这些原则来衡量代码的优劣。
但这些原则并不是死板的教条，大家也经常会因为其他的权衡（例如可读性、复杂度等）违背或者放弃一些原则。比如子类拥有特性的方法时，大家很可能打破里氏替换原则。再比如，单一职责原则跟接口隔离原则有时候是冲突的，大家通常会舍弃接口隔离原则，保持单一职责。只要打破原则的理由足够充分，也并不见得是坏的代码。
可读性
代码只要具有了高内聚和低耦合就足够好了吗？并不见得，偶认为代码还必须是易读的。好的代码无论是风格、结构还是设计上都应该是可读性很强的。可以从以下几个方面考虑整洁代码，提高可读性。
命名
大到项目名、包名、类名，小到方法名、变量名、参数名，甚至是一个临时变量的名称，其命名都是很严肃的事，好的名字需要斟酌。
► 名副其实
好的名称一定是名副其实的，不需要注释解释即可明白其含义的。
/** * 创建后的天数 **/ int d; int daysSinceCreation;
后者比前者的命名要好很多，阅读者一下子就明白了变量的意思。
► 容易区分
大家很容易就会写下非常相近的方法名，仅从名称无法区分两者到底有啥区别（eg. getAccount()与getAccountInfo()），这样在调用时也很难抉择要用哪个，需要去看实现的代码才能确定。
► 可读的
名称一定是可读的，易读的，最好不要用自创的缩写，或者中英文混写。
► 足够短
名称当然不是越长越好，应该在足够表达其含义的情况下越短越好。
格式
良好的代码格式也是提高可读性非常重要的一环，分为垂直格式和水平格式。
► 垂直格式
通常一行只写一个表达式或者子句。一组代码代表一个完整的思路，不同组的代码中间用空行间隔。
public class Demo { @Resource private List<Handler> handlerList; private Map<TypeEnum, Handler> handlerMap = new ConcurrentHashMap<>(); @PostConstruct private void init() { if (!CollectionUtils.isEmpty(handlerList)) { for (Handler handler : handlerList) { handlerMap.put(handler.getType(), handler); } } } publicResult<Map<String, Object>> query(Long id, TypeEnum typeEnum) { Handler handler = handlerMap.get(typeEnum); if (null == handler) { return Result.returnFailed(ErrorCode.CAN_NOT_HANDLE); } return handler.query(id); } }
如果去掉了空行，可读性大大降低。
public class Demo { @Resource private List<Handler> handlerList; private Map<TypeEnum, Handler> handlerMap = new ConcurrentHashMap<>(); @PostConstruct private void init() { if (!CollectionUtils.isEmpty(handlerList)) { for (Handler handler : handlerList) { handlerMap.put(handler.getType(), handler); } } } public Result<Map<String, Object>> query(Long id, TypeEnum typeEnum) { Handler handler = handlerMap.get(typeEnum); if (null == handler) { return Result.returnFailed(ErrorCode.CAN_NOT_HANDLE); } return handler.query(id); } }
类静态变量、实体变量应定义在类的顶部。类内方法定义顺序依次是：公有方法或保护方法 > 私有方法 > getter/setter 方法。
► 水平格式
要有适当的缩进和空格。
► 团队统一
通常，同一个团队的风格尽量保持一致。集团对于 Java 开发进行了非常详细的规范。（可点击下方阅读原文，了解更多内容）
类与函数
► 类和函数应短小，更短小
类和函数都不应该过长（集团要求函数长度最多不能超过 80 行），过长的函数可读性一定差，往往也包含了大量重复的代码。
► 函数只做一件事（同一层次的事）
同一个函数的每条执行语句应该是统一层次的抽象。例如，大家经常会写一个函数需要给某个 DTO 赋值，然后再调用接口，接着返回结果。那么这个函数应该包含三步：DTO 赋值，调用接口，处理结果。如果函数中还包含了 DTO 赋值的具体操作，那么说明此函数的执行语句并不是在同一层次的抽象。
► 参数越少越好
参数越多的函数，调用时越麻烦。尽量保持参数数量足够少，最好是没有。
注释
► 别给糟糕的代码加注释，重构他
注释不能美化糟糕的代码。当企图使用注释前，先考虑是否可以通过调整结构，命名等操作，消除写注释的必要，往往这样做之后注释就多余了。
► 好的注释提供信息、表达意图、阐释、警告
大家经常遇到这样的情况：注释写的代码执行逻辑与实际代码的逻辑并不符合。大多数时候都是因为代码变化了，而注释并没有跟进变化。所以，注释最好提供一些代码没有的额外信息，展示自己的设计意图，而不是写具体如何实现。
► 删除掉注释的代码
git等版本控制已经帮大家记录了代码的变更历史，没必要继续留着过时的代码，注释的代码也会对阅读等造成干扰。
错误处理
► 错误处理很重要，但他不能搞乱代码逻辑
错误处理应该集中在同一层处理，并且错误处理的函数最好不包含其他的业务逻辑代码，只需要处理错误信息即可。
► 抛出异常时提供足够多的环境和说明，方便排查问题
异常抛出时最好将执行的类名，关键数据，环境信息等均抛出，此时自定义的异常类就派上用场了，通过统一的一层处理异常，可以方便快速地定位到问题。
► 特例模型可消除异常控制或者 null 判断
大多数的异常都是来源于NPE，有时候这个可以通过 Null Object 来消除掉。
► 尽量不要返回 null ，不要传 null 参数
不返回 null 和不传 null 也是为了尽量降低 NPE 的可能性。
如何判断不是好的代码
讨论了好代码的必要条件，大家再来看看好代码的否定条件：什么不是好的代码。Kent Beck 使用味道来形容重构的时机，偶认为当代码有坏味道的时候，也代表了其并不是好的代码。
代码的坏味道
► 重复
重复可能是软件中一切邪恶的根源。—— Robert C.Martin
Martin Fowler 也认为坏味道中首当其冲的就是重复代码。
很多时候，当大家消除了重复代码之后，发现代码就已经比原来整洁多了。
► 函数过长、类过大、参数过长
过长的函数解释能力、共享能力、选择能力都较差，也不易维护。
过大的类代表了类做了很多事情，也常常有过多的重复代码。
参数过长，不易理解，调用时也容易出错。
► 发散式变化、霰弹式修改、依恋情结
如果一个类不是单一职责的，则不同的变化可能都需要修改这个类，说明存在发散式变化，应考虑将不同的变化分离开。
如果某个变化需要修改多个类的方法，则说明存在霰弹式修改，应考虑将这些需要修改的方法放入同一个类。
如果函数对于某个类的兴趣高于了自己所处的类，说明存在依恋情结，应考虑将函数转移到他应有的类中。
► 数据泥团
有时候会发现三四个相同的字段，在多个类和函数中均出现，这时候说明有必要给这一组字段建立一个类，将其封装起来。
► 过多的 if…else 或者使用 switch
过多的 if…else 或者 switch ，都应该考虑用多态来替换掉。甚至有些人认为除个别情况外，代码中就不应该存在 if…else 。
总结
本文首先一句话概括了偶认为的好代码的必要条件：整洁，接着具体分析了整洁代码的特点，又分析了好代码的否定条件：什么样的代码不是好的代码。仅是本人的一些见解，希望对各位以后的编程有些许的帮助。
偶认为仅仅编写出可运行的代码是远远不够的，还要时刻注意代码的整洁度，留下一些漂亮的代码，希望写的代码都能保留并运行 102 年！
后续增加一些实际的例子来说明好的和坏的代码；分享下如何编写整洁代码——自己认为有用的一些编程技巧。
CSS有哪几种方式控制网页页面？
有4种方式，行内方式、内嵌方式、链接方式、导入方式
1、行内方式
行内方式是4种样式中最直接最简单的一种，直接对HTML标签适用style=””，例如：
<p></p>
虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。
2、内嵌方式
内嵌方式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
–>
</style>
</head>
<body>
<div id=”div1″><img src=”/images/logo.gif” /></div>
</body>
</html>
运行代码 复制代码 另存代码 <script language=”JavaScript”>ffcod = delpost.runcode7 .value; ffcod = ffcod.replace(/
/g,”); delpost.runcode7 .value = ffcod;</script> 提示：您可以先修改部分代码再运行
内嵌方式，大家应该也能意识到，即使有公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护也大，如果文件很少，CSS代码也不多，这种方式还是很不错的。
3、链接方式
链接方式是使用频率最高，最实用的方式，只需要在<head></head>之间加上
复制代码
代码如下:
<link href=”style.css” type=”text/css” rel=”stylesheet” />
，就可以了，这种方式将HTML文件和CSS文件彻底分成两个
或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页
面就可以分别调用自身的CSS文件，如果需要改变网站风格，只需要修改公共CSS文件就OK了，相当的方便，这才是大家xHTML+CSS制作页面提倡的方式。
HTML代码
复制代码
代码如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<link href=”style.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”div1″><img src=”/images/logo.gif” /></div>
</body>
</html>
CSS代码
复制代码
代码如下:
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
4、导入方式
导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。
具体导入样式和链接样式有什么区别，可以参看这篇文章《CSS:@import与link的具体区别》，不过偶还是建议大家用链接方式！
四种样式的优先级 ：
如果这上面的四种方式中的两种用于同一个页面后，就会出现优先级的问题，这里偶就不再举例子来说明了，大家在下面自己证明一下下面的结论
四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。
拓展资料
css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
学习web前端开发？
前言
学习Web前端开发，需要的基本条件就是一根网线+一台电脑。对于想要学习Web前端的同学，可以按以下步骤来进行学习。
熟悉HTML
HTML就犹如人的骨架，是一个页面的基本组成。HTML所需要学习的内容就是HTML标签。标签都是由开始标签和结束标签构成，同时标签也会有一系列的属性。如下所示：
运行效果如下所示：
推荐阅读书籍《HTML＆XHTML权威指南》
熟悉CSS
CSS犹如人的肤色，CSS用来确定HTML标签各位置的摆放以及界面的视觉效果，比如标签的大小，字体颜色等设置。代码示例如下：
运行效果如下：
推荐阅读书籍《CSS权威指南》
熟悉JavaScript
JavaScript犹如人的血液，正因有了血液的流动，人才有活力，正因有了JavaScript，页面才有了交互。代码示例如下：
运行结果如下：
JavaScript推荐阅读数据《JavaScript高级程序设计》
组件库和JavaScript框架
有了前面三步，大家就掌握了Web前端开发的基础了。但在实际工作开发中，为了提高开发工作效率，大家还需要掌握一套组件库和对应的JavaScript框架。
较为流行的组合有两大类：element组件库+Vue框架 和 Ant Design组件库 + React框架。但在国内的公司当中，element组件库 + Vue框架的这种组合使用更多一些，所以也推荐初学者可以先掌握Element组件库 + Vue框架的方式来进行学习。
总结
以上就是学习Web前端的步骤和相关资料，希望能帮到有想法进入Web前端的小伙伴们。如有其他疑问，也可关注私信与偶。如果觉得问题文章不错，欢迎大家关注转发哦！
关注偶，不定期分享好玩科技知识，带大家一起体会探索科技的那份独有思考和乐趣。
