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

最新推荐文章于 2022-12-09 10:57:06 发布

无足舞者

最新推荐文章于 2022-12-09 10:57:06 发布

阅读量401

点赞数 1

分类专栏：前端工程师【基础篇】文章标签：网页制作实战 PS增强 DW

本文链接：https://blog.csdn.net/u010567918/article/details/79280357

版权

前端工程师【基础篇】专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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 ;”一起使用。