1、后盾PHP豆瓣教程学习笔记：头部布局分析、切片技术、选择器命名规范

本文介绍了前端开发中的头部布局分析、PhotoShop切片技术、选择器命名规范等内容，并对比了UI与UE的区别。同时，还提供了头部布局实例讲解、定位方式、浮动与精灵技术的应用。此外，还介绍了Sublime Text 2的Emmet插件安装方法以及Web开发人员常用的火狐插件，如FireShot、ColorZilla等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、头部布局分析、PhotoShop 切片技术、选择器命名规范
1）布局技巧
2）SOA
3）浏览器兼容性

分析：a标签鼠标经过背景颜色，字体颜色

加代码注释，需要成对加。例如：顶部开始、顶部结束

UI和UE区别

1、UI是用户界面，即我们看到的界面的设计及美观程度；
2、UE是用户体验，包括对用户的引导、交互、用户在使用过程中的感受等等一系列的东西
3、产品经理是对产品的整体把握，UI、UE是专人来负责的；产品经理不一定要精通UI、UE，但要对网站上线后呈现的效果心里有数；在PRD文档或相关文档中，要对UI、UE的效果有指导性的描述，最后验收网站时，根据文档的描述来。

二、头部布局实例讲解、定位（Relative，Absolate）、浮动（float）、精灵技术应用

三、开发工具Sublime Text2

1）Sublime Text2安装Emmet插件

四、Web开发人员常用的火狐插件

1）FireShot：是一个截图工具，来源于截图软件Screenshot Studio的开发商,是一个Firefox扩展或者说是Firefox版的Screenshot Studio（一款很强大的且与众不同的截图软件），用于创建网页截图。重要的是，Fireshot与Screenshot Studio不同，它是免费使用的。如果你仅需要网页截图和简单的编辑，Fireshot就是最好的选择。当然，前提是你使用Firefox浏览器。

2）ColorZilla颜色拾取器：是个方便的网页颜色分析工具，它包含颜色选择器，调色板，颜色DOM分析工具，支持鼠标对特定对象的选择，可以和Firebug协同工作，支持网页缩放。你可以用它对视觉效果强的网站进行配色分析，然后参考进行设计。

3）Poster：如果您想要调试服务器和进行HTTP请求的话，Poster将是一款很值得尝试的工具。

4）FireBug调试工具：Firebug是测试前端代码和CSS的最好的调试软件。如果出现任何不符合格式的图像或类型，最好的解决办法就是用Firebug检查出来。甚至可以在里面改变样式来检查网站是如何在浏览器中的渲染效果。

5）FirePHP：FireBug是针对CSS、HTML和JavaScript的一款很好的开发工具，但是FirePHP只有在用户安装了FireBug之后才可用，可以为PHP开发者所用，便于他们管理PHP函数。

6）FireFTP：是一个自由，安全，基于浏览器的FTP客户端，可以让您无须启动ftp软件，在Firefox中轻松访问管理FTP服务器。

7）RESTClient： RESTClient是一个用于测试RESTful Web services的Java客户端。非常小巧，界面非常简单，看下面这张图你就全明白了！