不太理解属性都是什么意思，但是有动画效果，我也是惊呆了

相对路径json无法获取

在获取json文件内容时,有时会出现相对路径上的json文件无法获取的情况,Chrome上的解决方案如下: 1.右击桌面上的Chrome浏览器图标,点击属性; 2.在目标输入框的内容后头加上--arg ...

(转)MyBatis在插入的数据有空值时，可能为空的字段都要设置jdbcType

1 引言 前面的所有语句中你所见到的都是简单参数的例子,实际上参数是 MyBatis 非常强大的元素,对于简单的做法, 90% 的情况参数都很少,比如:

写在前面（不缺钱，找个培训班因该能少走不少弯路，节省不少时间。我自己没上过培训班，但是别人这么说，我也觉得对。但是如何甄别培训班的水平，这是一个问题。）

如果没有PS 基础，请百度搜索PS教程。

（李涛的ps教程不错你可以看一下）（一边看，一边跟着做，动手很重要）（软件可以是别的比如AI，方法是一样的）

附赠一个PS新手手册，其实不仅仅是新手，这就像一个讲礼貌的素质，会赢得更多尊重。

二、磨练技能，动手练习

找一些自己喜欢好看的图标、APP、网站截图下来，尽可能百分百临摹复制出来。

（不懂就看教程，百度，进各种设计、UI群，问别人，问朋友。百度和教程是第一位的，尽量少问别人，问多了会烦的。尤其是重复的问题，新手有时候简单的操作记不住不会，因此勤做笔记，一个一个步骤细致一点，确保下次还能按照步骤重来一遍）

这里临摹几套完整的APP很有必要，

1、熟练你的软件操作能力

2、对基本界面布局的理解

3、发现很多不上手做就注意不到的问题

最直接的效果就是你可以开始上手做东西，而不是做一些四不像的半成品。（因为你已经做了好几套成熟而完整的作品了，临摹的也是你做出来的）（很有必要强烈推荐）

三、提高审美、拓展思路、开阔眼界

浏览各种设计类的网站（站酷，优设、UI中国。。。）看别人的学习经验，下载收集设计类的素材。

可能这里是别人的飞机稿，练习，项目上线以后才发布的稿件、很多是对新趋势的尝试，产品的改版、还是相对完整的作品。这也是有一定价值的。

而且网站还有更多的内容是别人的经验总结（快速解决某些问题，掌握某些知识的利器），教程和各种精美实用的素材。（不建议花太多精力学习——某些过于炫技的东西）

四、规范自己的工作流程

下载各平台的设计规范（安卓，苹果，WP）仔细研读，并在练习中加以注意，应用。

以上一 二 三 四 应同时穿插进行，没有优先级和那个更重要。

自己觉得差不多了，就可以开始对已有的APP，网站进行修改设计，发现优点与不足。变成自己的东西。自己尝试做自己想法的东西，发表在 你经常浏览的设计网站上，接受别人的提意见，赞同，表扬。

五、尝试自己做相对完整——图标、APP、网页

这是对之前所学的总结，也是以后找工作的铺垫

准备找实习的工作（这是一边工作一边学习的过程，私以为这个阶段学习比工资更为重要）

在这个阶段——这是一个技术活，作品可以展示很多东西

1、创作的作品整理一下思路，可以附带一些文字内容。

2、整理好你之前的临摹的作品

简历应着重表现你单独完成的APP、网页的经历

作品质量和数量体现-你学习的态度

实习的工作 目的不是薪水，是学习。

在实习中有了项目经验，公司对你好，有的学，那就好好干，对你不好，没啥好学的，那就跳槽。

跳槽的重点，你仍然需要学习，所以尽量不要找只有一个你一个设计师的公司，没有交流没有学习不会愉快的。

以下为转载 ——以下为转载—— 以下为转载—— 以下为转载 ——以下为转载 —— 以下为转载 ——————————————————————————————————————

写在之前：这篇教程内容比较多，如果你是新手，能坚持每个知识点都搞明白的话，起码要半年的时间~~！、 如果你进来随便看一看就走了，那不能怪别人，是你自己不努力~！~~已经有很多新人在这里学完找到了高薪工作。

今天来谈谈这个话题，学UI第一阶段到底要掌握哪些知识和技能。
我们先来划分一下啊，学UI要分几个阶段来学：

初级阶段——> 中级阶段——> 高级阶段

QQ群里大多数学生都还在入门阶段，感到很迷茫，不知道从哪里开始学起。网上的海量信息，全是教程，都不知道先看什么，后学什么。非常的无助。

小编拥有多年UI设计实战经验，大大小小也做了很多项目，借这个机会，给新人们指引一个方向，希望能帮助到大家。

入门阶段，就像一张白纸一样，干干净净，也很茫然。所以才会有那么多的培训学校，教给大家的都是最基础的入门的知识。

很多人在群里会问，我是自学还是报班啊。这个问题回答的嘴都软了。

答：你如果定性比较弱，需要人逼着才学的进去，又不差钱。那么就报班吧，这样入门比较快。选择学校的时候先去听听，在问问大家，不要被忽悠~！~如果你自学能力还不错，又差钱。那么还是自学好了。

下面我们来讲讲自学，因为小编从业多年都是自学。谁叫咱是穷孩子，交不起16800的学费。

上边这2篇文章看完以后，是不是大致明白了一些什么了。

先来说说UI设计入门阶段，用什么软件。工欲善其事，必先利其器

对于入门阶段的童鞋来说，不要纠结那么多，先把Photoshop玩熟练再说吧。因为在日常工作中，用的最多的就是PS了，可以这么说，做UI界面基本上用它就够用了。所以入门阶段的你，不要瞎操那么多心了，专心学习PS吧.

软件安装（建议购买正版软件，以下下载仅供学习使用）

配置Photoshop参数，做UI更方便安装字体

还有这几个也要看看的：

好了，软件也安装好了，视频看了不少了。接下来就是要做各种练习了。前边UI到底是什么一文里面也说了，UI不光是画ICON,还要做界面。还有一些交互知识。

入门阶段，就先别想那么多，先画画简单的图标，做一些简单的界面吧。

这个时候，逮到什么画什么，比如打开百度的首页，这个界面不陌生吧，照着画一个出来。有人说了，这有什么好画的啊。你还别不服。很多入门级的新人，还真是做不出来。

有人连字体都做不出来，宋体12号 ，这个地方选无，就好了。

然后输入框的效果放大看看，用了内阴影。

然后是搜索按钮，用到了什么效果了。

渐变+描边+投影+内阴影做的白色高光（一个图层样式完成）

小小的一个按钮，尽然有这么多学问在里面。这就是UI的魅力所在。

UI设计要先把什么搞明白，哪些PS技巧先学会

的知识点太多了，用了10年都不敢说精通。每个不同的设计领域用到PS的知识点也不一样。

比如做CG原画的，做网页设计，照相馆处理照片的等等用到PS功能都不太一样。

UI设计 入门阶段先要学会以下几个功能，一定要玩的很熟练第一：图层样式

上面做的百度这个页面，看着简单，却用到了好几种的图层样式。那么像下边这样的按钮。

用到的就更多了。所以想打怪升级，还是要把图层样式玩的很熟悉，入门阶段要分析的出来，用到了什么效果。

看到什么好的界面或是ICON，就立马分析一下，它用到什么图层样式？

第四：学会切图（常用的切图办法就在这里，先挨个学一遍，然后根据实际的情况选择相应的切图方法）

搞明白一些常规的界面尺寸和视觉规范移动端：

PHOTOSHOP操作技巧开始做点什么（临摹阶段）

开始练习！先学会技法。

常规UI切图(3种方法，各有各的好）移动端UI切图必备工具和教程

好了，差不多了，这些都挨个学一遍。就入门UI了。

学UI 要学的真的很多，这些都是基础的知识，这些掌握了，才能到达 中级阶段，加油！少年~~！

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是，免费！

下载完毕之后，注意原先的文件不要删，后面会用。

1. 把下载包里面的 fonts 文件夹放入页面根目录下

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

2.在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。

一定注意字体文件路径的问题

1. html 标签内添加小图标。

注意：务必保证 这个字体和上面@font-face里面的字体保持一致

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

6 字体图标加载的原理：

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：

1. 我们用css 边框可以模拟三角效果
2. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了

2 案例：京东三角 *

二十三、 CSS 用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

实际开发中，我们文本域右下角是不可以拖拽的。

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

1. 图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

2. 解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

二十五、溢出的文字省略号显示

normal 使用浏览器默认的换行规则。
keep-all 只能在半角空格或连字符处换行。主要处理英文单词

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

4.单行文本溢出显示省略号

单行文本溢出显示省略号–必须满足三个条件：

5. 多行文本溢出显示省略号（了解）

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

巧妙利用一个技术更快更好的布局：

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

巧妙运用浮动元素不会压住文字的特性

1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

二十七、CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化

简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）

每个网页都必须首先进行 CSS初始化。

这里我们以 京东CSS初始化代码为例。

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。作为新HTML语言，具有新的元素，属性和行为

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

一、语义化标签 （★★）

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的

发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签

多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。

因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

属性很多，有一些属性需要大家重点掌握：

• 注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

• 音频标签和视频标签使用方式基本一致
• 谷歌浏览器把音频和视频自动播放禁止了
• 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
• 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

三、新增的表单元素 （★★）

在H5中，帮我们新增加了很多类型的表单，这样方便了程序员的开发

课堂案例：在这个案例中，熟练了新增表单的用法

可以通过以下设置方式修改placeholder里面的字体颜色：

• 新增的CSS3特性有兼容性问题，ie9+才支持
• 移动端支持优于 PC 端
• 现阶段主要学习：新增选择器和盒子模型以及其他特性

二、CSS3 新增选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1.属性选择器（★★）

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

• 属性选择器，按照字面意思，都是根据标签中的属性来选择元素
• 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
• 属性选择器也可以选择出来自定义的属性
• **注意：**类选择器、属性选择器、伪类选择器，权重为 10。

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

匹配父元素的第一个子元素E

匹配到父元素的第n个元素

• 匹配到父元素的第2个子元素

• 匹配到父元素的序号为奇数的子元素

• 匹配到父元素的序号为偶数的子元素

• 匹配到父元素的前3个子元素

  选择器中的 n 是怎么变化的呢？

  因为 n是从 0 ，1，2，3… 一直递增

一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码

• E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

• 结构伪类选择器一般用于选择父级里面的第几个孩子
• nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
• nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
• 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式
• 如果是无序列表，我们肯定用 nth-child 更多
• 类选择器、属性选择器、伪类选择器，权重为 10

3.伪元素选择器（★★★）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

• before 和 after 创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  伪元素选择器和标签选择器一样，权重为 1

1.应用场景一： 字体图标

在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的 编码

• 在after伪元素中 设置content属性，属性的值就是字体编码
• 利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相

2.应用场景二： 仿土豆效果

把之前的代码进行了改善

• 找到之前写过的仿土豆的结构和样式，拷贝到自己的页面中
• 删除之前的mask遮罩
• 这个伪元素充当的是遮罩的角色，所以我们不用设置内容，但是需要设置content属性，属性的值为空字符串
• 给这个遮罩设置宽高，背景颜色，默认是隐藏的
• 当鼠标移入到 div盒子时候，让遮罩显示，利用 hover 来实现

3.应用场景三： 清除浮动

回忆一下清除浮动的方式：

• 额外标签法也称为隔墙法，是 W3C 推荐的做法。
• 父级添加after伪元素

额外标签法也称为隔墙法，是 W3C 推荐的做法

注意： 要求这个新的空标签必须是块级元素

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化

三、盒子模型（★★★）

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

括号里面可以使用 + - * / 来进行计算

五、CSS3 过渡（★★★）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。

我们现在经常和 :hover 一起 搭配使用。

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

• 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
• 花费时间： 单位是 秒（必须写单位） 比如 0.5s
• 运动曲线： 默认是 ease （可以省略）
• 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
• 记住过渡的使用口诀： 谁做过渡给谁加

• 创建两个div的盒子，属于的嵌套关系，外层类名叫 bar，里层类名叫 bar_in
• 给外层的bar 这个盒子设置边框，宽高，圆角边框
• 给里层的bar_in 设置 初试的宽度，背景颜色，过渡效果
• 给外层的 bar 添加 hover事件，当触发了hover事件 让里层的bar_in 来进行宽度的变化

• transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1. 其顺序会影转换的效果。（先旋转会改变坐标轴方向）

2. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

伸出左手，让拇指和食指成L形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

x左边是负的，右边是正的
y上面是负的，下面是正的
z里面是负的，外面是正的

1). 定位的盒子居中对齐完美写法

2).开门大吉(小案例)

3).翻转的的图片（两面不相同）

定义动画 可以不使用from to 而是百分比

下面是使用的透明背景的地图

八、浏览器私有前缀(css)

-ms-：代表 ie 浏览器私有属性

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

• 弹性盒子元素将向行起始位置对齐

• 弹性盒子元素将向行结束位置对齐

• 弹性盒子元素将向行中间位置对齐

• 左右的盒子贴紧父盒子，中间的平均分布空白间距

• 相当于给每个盒子添加了左右margin外边距

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

• 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

• flex容器为单行。收缩显示

• 规定灵活的项目在必要的时候拆行或拆列

• 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

  比如第五个多出来了，第五个盒子在第一行，其余四个第二行

• 必须对父元素设置自由盒属性display:flex，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

• 默认值。项目被拉伸以适应容器。

• order控制子项目的排列顺序，正序方式排序,从小到大
• 用css来控制盒子的前后顺序。用order就可以
• 用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是0

• 这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5 。
• 虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。

笔记太多了，这里另外开一个博客记笔记