14.实战+补充知识+PS增强+DW（到此前端工程师【基础篇】完结）

WPS Word辅助阅读技巧

min-width（最小宽度）

1. “min-width:600px;”当页面大小小于600像素时，浏览器按照600像素计算。

布局整体规划注意事项

1. 不推荐在body中使用一个大的div将页面中所有元素都包含起来，那样会使页面一加载进来先显示一个大白板，原因是因为浏览器解析元素，是由上往下一个一个的解析的，解析完一个元素开始与结束标签后才显示，都包含在一个大div中的话，解析完这个大div需要的时间较长。

样式重置方案

省事方案

* {padding:0;margin:0;}

li {list-style:none;}

1. 有很多人认为这样做是有性能问题的，但实际性能怎么样，大家可以自己去测试一下

2. 抛开性能不管，反正面试官是不喜欢这样的处理方式的。

PS图片选择

1. 原则：在图片大小没有过分损失情况下，尽量在jpg、gif、png中选择最小的。

布局选择

图

分析

1. 第一种（分别设置各个元素背景，优点修改调整方便，缺点代码多）

2. 第二种（X轴平铺整个body背景，优点代码少，缺点修改调整难度大）

3. 具体选哪一种，要看工作中的具体情况，如：假如这个页面一做下来就永久不改了，那么“第二种”是最佳选择。

背景平铺性能之说

1. 假如我们的屏幕宽是1024px的，那么用1px的图片平铺需要平铺1024次，用2px的图片平铺则需要512次，所以用2px的图片性能会高一些，但性能实际到底怎么样，需要测试才知道。

PrtSc键获取高清图片

1. 按键盘PrtSc键》打开PS软件》 Ctrl+n新建工作区》敲Ctrl+v即可复制屏幕高清截图到新建的工作区。

2. 注意事项

调试页面方法

1. 给元素添加背景颜色可以很清楚的看到元素从哪里到哪里，方便调试页面。

在使用padding代替margin时注意点

1. 当操作的元素中包含超链接时，需要注意防止超链接可点击区域被padding扩大了，这种情况下就不要再用padding取代margin了

alt与title区分

1. alt是占位符，如当img标签中href指向的图片加载不到时，就会被替换成alt属性值。title是提示性元素，如鼠标移动到元素上可以显示title属性值。

2. 都有利于SEO

PS合并图片（css精灵）时，画布大小的调整方式

PS标尺线隐藏与显示

1. 敲Ctrl + h 即可隐藏/显示标尺线。

PS切图时去除不相干的图层（只对PSD文件有用）

PS矩形选框缩小框选区域

DW将字母转换成大小写方式

PS合并图层

关于圆角图片的处理方案

PS选择画布中的像素

包含选择符原理

1. 对于包含选择符结构用法，我们以前说的是不全面的，它不仅有“E F G H...{...}”结构（E/F/G/H...都表示元素），还可以是“类元素{...}”或“id 元素{...}”，可以有这些用法，是因为包含选择符的原理决定的，对于“E F G{...}”我们拆开就很容易理解了，首先此选择符先找到所有E元素，然后找到E元素下的F元素，接着再找到F元素下的G元素，最后对G元素使用样式，同理对于“类class 元素F{...}”包含组合来说，首先先找到“类class”对应的元素对象，再找到此元素对象下的“元素F”，最后对“元素F”使用样式。

PS导入的图片从索引转变为可编辑的图层

PS键盘移动图层

1. 选中图层直接敲方向键移动较慢。可以按住Shift键，再敲方向键进行大步移动。

PS测量行高注意点

<input type=”submit” value=”提交”/>居中问题

1. 网上说Input是“display:inline-block;”类型，“display:inline-block;”类型不支持“margin: 0 auto;”居中，所以使用“margin :0 auto;”样式属性对提交按钮进行居中时，如果不起作用，则需要结合“display:block ;”一起使用。

PS默认（自动）行高

PS矩形选框工具同时选中多个区域方法

1. 按Shift键可以加选。先用选框工具选择一处，再用“Shift+选框工具”就可以实现了，但一般情况下不用这种方法，如果一幅图的色差大的话，用魔棒工具按Shift也可以加选。

DW快速折叠已经完成的代码

PS调整色相/饱和度（常用于制作点击按钮状态）

1. 快捷键“Ctrl + u”

2. 图解

padding-left 与 text-indent

1. 很多情况下使用“text-indent”可以起到“padding-left”效果，且不用修改宽度。“padding-left”会影响盒子的大小，需要相应的调整宽度。

静态页面开发三大步

1. 先结构，后选择符，再样式。

翻页栏的剪头“>/</>>/<<”效果制作

1. 方案

2. “大于号/小于号”不使用“宋体”显示效果

3. “大于号/小于号”使用“宋体”显示效果

滑动门三层嵌套的三张图片使用CSS精灵的注意事项

1. 横着平铺时，CSS精灵图片拼接需要竖着拼，这样做可以不占用背景图片水平方向位置（定位背景时，只需要给Y坐标一个负值即可，X坐标则设置“放置位置”或“0”），这样设置背景时，就可以通过给水平方向的值来控制图片放置的位置（如 : “right”表示放在最右边）

a) background : url(pic.png) no-repeat right -111px ;

2. 竖直平铺时，CSS精灵图片需要横着拼接，同理，可以空出一个Y位置(图片放置的位置如:“bottom”就表示放置底部)

a) background :url(pic.png) no-repeat -111px bottom ;

刷新

1. 搞WEB开发的经常会说:有缓存,CTRL+F5一下。或者:有缓存,CTRL+SHIFT+DEL清一下。

a) F5刷新。

b) Ctrl + F5 跳过缓存刷新。

c) CTRL+SHIFT+DEL 打开清除缓存页面。

IE6兼容性解决原则

1. 在解决IE6兼容性问题时，坚决不用CSS hack，因为它向后的扩展不太好。

IE6 <input type=”text”>问题

1. 在标准浏览器下文本框中的文字默认是上下居中的，但在IE6下默认居顶部，可以使用行高让其统一居中。

IE6下PNG的顽疾

1. 在IE6下png图片完全不支持，即使我们用了“DD_belatedPNG_0.0.8a.js”插件后，还是不能彻底解决，有时多少还会漏出1个像素或0.5个像素的样子，非常不好，如下图，在使用了js插件后，还是出现的问题

1. 像这样的情况只能用其他格式如“gif”来取代。

PS图片的杂边

Js初阶

如何在一个网站或页面，去书写你的js代码，推荐如下

1. js的分层（功能）: jquery(toots)，组件（ui），应用（app），mvc（backboneJs）

js的规划（管理）: 避免全局变量和方法（命名空间、闭包、面向对象），模块化（seaJs、requireJs）

到此（前端工程师【基础篇】）完结