网易微专业课程笔记－页面制作
ibcLee
4月 23, 2016
前段时间报名了网易微专业课程，报名之前也考虑了很久，毕竟工作也快一年了，虽然技术还是很low但是要不要从头学起呢？进入前端领域一直是在自学，从切图开始，半吊子水平，没有个正确的姿势，也没有人指导是不是正确，反正最后能得到结果就行，比如css，对很多属性还不是很了解，但是一直在开发中没有用到，也没有仔细的去了解，反正最后样式是写出来了，一个属性可以搞定的事用了一堆hack，从基础过一遍，查缺补漏总是有好处的，不看不知道，一看还真有很多自己不知道的技能，从现在开始，对每一节的课程做个记录，这次是页面制作部分，包括从最开始的photoshop切图到html到css。
photoshop切图
- 当文字是独立图层时，文字工具选中文字涂层，在属性面板里会有字号和行高的信息；如果不是单独涂层，行高可用矩形选框工具从第一行的下部到第二行的下部。
- shift＋矩形选框工具＝添加到选区；
Alt＋矩形选框工具＝减去选区；
Alt＋Shift＋矩形选框工具＝选取交叉区域。 - 添加到选区巧用：测量大区域时，在左侧画一个小的矩形框，在右侧，按住shift画一个小的矩形框，这时信息面板的宽度是左右两个方框加起来的宽度，也就是所要测量区域的宽度。
- 选中图层时，使用魔棒工具可以测量颜色是否线性渐变。
- 修饰性的图片：图标、logo、有特殊效果的按钮文字、非纯色的背景；内容性的图片：Banner、广告图片、文章中的配图。
- 内容性的图片，颜色较为丰富，一般保存为JPG格式；修饰性的一般保存为PNG24和PNG8的格式，这两种格式都支持全透明，但是PNG8不支持半透明，PNG24质量较高，IE6不支持PNG24的半透明。
- 若文字和背景合并，平铺背景覆盖文字，使用矩形选框工具，选出一小块区域，再使用自由变换工具（Ctrl+T），用移动工具＋Alt，复制选区，适用背景图可以做拉伸的情况；如果不适合做拉伸，背景有纹理的话，先使用选区工具选择一个区域，再用移动工具＋Alt拖动，按住Alt的同时按住Shift可以使选区水平移动。
- 保存图片为PNG24格式时，可以右键复制图层到新文件中，不在一个图层时需要先复制图层；保存PNG8时，因为不支持半透明，所以我们需要带着背景去切图，首先要合并可见图层，再用矩形选框工具选择所需要的区域，再用魔棒工具去除多余的部分，使用魔棒工具时按住Alt键，从选区中减去，再把选区拖动到新文件中。
- 保存JPG格式时，可以将品质减小一点，品质不要设置100；
保存PNG8格式时，将杂边设置为无，扩散设置为无仿色；
保存PNG24格式时，默认设置就可以；
将切出的图片保留一份PSD。 - 在PNG8格式的图片上更改颜色，需要将默认的索引颜色模式改为RGB颜色模式。
- 图片压缩工具
无损：[Minimage]https://github.com/NetEaseWD/minimage
有损：[TinyPng]https://github.com/xing/TinyPNG
HTML
只是讲了一些标签的语义化和实体字符，非常基础，这里就不再写了…
CSS
文本
首先是讲了一些css选择器的用法，之前的文章有总结，这里就不再记录了。
- font-size的单位设置为em和百分比都是相对于父元素来说的。
- font-style:normal|italic|oblique ,italic是使用当前字体样式的斜体，oblique是将文字强制倾斜。
- line-height的单位设置为em和百分比、数值是相对于当前的字体大小，但是设置数值的时候，子元素的继承是直接继承，百分比是先计算，再继承，也就是当子元素的字体大小改变时，设置行高单位数值的时候，继承的行高是先对于改动后的字体大小＊数值，而百分比是不会再进行计算的。
- 行高和字体缩写
font:30px/2,arial,serif; 这时行高为2 - 设置font时，字体大小和字体样式是必选项。如font：12px;这时font是不起作用的，因为没有指定font-family。
text-align:left|right|center|justify.vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>.属性值为具体像素值时，是相对于基线的偏移度。text-indent:<length>|<percentage>.百分比是相对于容器宽度；设置极大的负值时，可以达到隐藏文字的目的。white-space:normal|nowrap（强制不换行）|pre（保留换行、空格、ab，不自动换行，完整保留代码的格式）|pre-wrap（保留换行、空格、tab，允许自动换行）|pre-line（只保留换行，可以自动换行）。word-wrap:normal|break-word(长单词允许自动换行)。word-break:normal|keep-all|break-all(单词任意两个字母之间都可以换行)。- text-shadow:none|[
{2,3}&& ?]#;x轴偏移量，y轴偏移量，模糊半径，不设置颜色时默认文字颜色。 text-decoration:none|[underline||overline||line-through],可以写多个。
盒模型
- 相邻元素外边距会合并。
- border-style:[soli|dashed|dotted|…]{1,4}|inherit.
- border-radius:[
| ]{1,4}[/[ | ]{1,4}]?.border-radius:0px 5px 20px 15px/20px 15px 10px 5px; - overflow: visible|hidden|scroll|auto.
- box-sizing: content-box|border-box|inherit;
- box-shadow: none|
[, ]*; :inset?&& {2,4}&& ? - box-shadow:inset 4px(水平偏移) 6px(垂直偏移) 3px(模糊半径) 0px(阴影大小) red.
- box-shadow:inset 4px 3px 2px 3px blue,insert 3px 3px 4px red.同时设置内阴影和外阴影，阴影不占空间
- outline语法和border一样，outline不占空间。
背景
background-img:url(red.png),url(blue.png);可以引入多张图片，先引入的在上层，如果有设置背景颜色的话，背景颜色在最后一层。background-repeat:repeat-x|repeat-y[repeat|space(平铺保留空隙，空隙根据容器正好展示平铺图片)|round|no-repeat]{1,2}。background-attachment:scroll(背景不动)|fixed(很少用到，背景相对于窗口固定，与元素没有关系)|local(背景随滚动条滚动).background-position的百分比是容器的百分比和背景图片的百分比的重合位置。background-position:right 20px top 10px.()linear-gradient(to top,red,blue||to right bottom, red,blue||45deg,red,blue||red,green 20%,blue).radial-gradient(close-side,red,blue||circle,red,blue||circle 100px,red,blue||red,blue|| 100px 50px at 0 0,red,blue).repeating-linear(radial)-gradient.background-origin:borde-box|padding-box|content-box;背景覆盖盒子容器区域起始位置。background-clip:border-box|padding-box|content-box。规定背景的绘制区域background-size属性值为百分比时是相对容器的大小。background缩写时，position/size。
布局
主要是flex布局，会单独一章整理纪录
变形
1 | transform: rotate|translate|scale|skew| |
动画
1 | // transition (需要触发条件) |