1.4. Notepad++中常用的插件
1.4. Notepad++中常用的插件
1.4.1. 插件管理器: Plugin Manager
插件功能：此插件可以帮你管理插件，包括查看当前已经安装的插件有哪些，以及自动帮你下载相应的插件。
插件用途：主要用于管理（安装和卸载）插件
插件安装：在安装过程中，默认已选择安装此插件：
1.4.1.1. 打开Plugin Manager
插件(P) → Plugin Manager → Show Plugin Manager → Avaliable，一栏显示当前可用的插件列表，选中你要的插件，然后点击下面的Install即可自动下载和安装对应插件，很是方便。
其中，在Intalled一栏可以看到当前已经安装了的插件有哪些：
1.4.1.2. 通过Plugin Mangager安装插件
下面以Light Explorer为例，说明如何通过Plugin Manager来安装插件：
通过打开Plugin Manager后，找到并选中Light Explorer，然后点击Install：
Plugin Manager就会帮你自动下载对应的插件并安装：
安装完毕后，会提示你是否重启：
选择“是”后，Notepad++会自动重启，并且会自动打开关闭前已打开的这些文件。
此时，就可以看到已经安装的插件了：
1.4.2. 16进制编辑器: HEX-Editor
插件功能：此插件主要提供了16进制查看与编辑的功能。
插件用途：以16进制模式查看和编辑文件。
插件安装：参考去安装Hex Editor插件
HEX-Editor功能详解：
1.4.2.1. 以16进制模式查看当前文件
有几种方法实现以16进制模式查看当前文件：
插件(P) => HEX-Editor => View in HEX Ctrl+Alt+Shift+H
点击工具栏上HEX Editor的图标
直接使用快捷键：Ctrl+Alt+Shift+H
退出16进制模式，和进入16进制模式的方法相同。
然后就可以以16进制模式，查看当前文件了：
接着，就可以去查看和编辑对应的16进制的值。
关于更多的选项，比如想要设置其他字体类型和字体大小，可以去上述的HEX-Editor下面的Options中，根据自己的需要设置：
1.4.3. 导出彩色代码为其他（word，HTML）格式的文件: NppExport
插件功能：导出已着色代码为其他格式的文件
插件用途：将彩色代码，导出为word文档（RFT）或网页（HTML）文件，或者将彩色代码（RTF格式或HTMl格式）拷贝到剪贴板，粘贴到别的（word文档，HTML网页）中去。
插件安装：在安装过程中，默认已选择安装此插件：
NppExport功能详解：
1.4.3.1. 将当前（已着色/代码高亮/语法高亮的）彩色代码导出到Word文件或HTML网页中
对于选中的代码，将其对应的RTF格式的内容，复制到剪贴板：
然后粘贴到新建的word文档中：
想要获得彩色代码的人，对于此功能，相信会非常喜欢的。
直接拷贝代码，是没有彩色代码的效果的
差点忘了说了，与此处的彩色代码拷贝功能相对应的是：
对于在普通文本编辑器中，包括当前的Notepad++编辑器，安装普通赋值操作去的拷贝的一段代码：
然后粘贴到别的地方，是没有彩色代码的效果的：
所以，有了对比，才知道此处彩色代码拷贝的好处。
对应的，想要将整个文件全部导出的话，就是：
插件(P) => NppExport => Export to RTF
即可将当前已经语法高亮的彩色的xml代码：
导出到word文件中了：
很明显，如果你需要在word中粘贴此彩色代码，此功能，再好用不过了。
对于导出为HTML网页，做法是类似的：
1.4.4. 轻量级资源管理器: Light Explorer
插件功能：轻量级的Explorer
插件用途：方便打开文件
插件安装：参考去安装Light Explorer插件。
Light Explorer功能详解：
1.4.4.1. 通过Light Explorer浏览文件，打开文件
可以通过直接点击对应的图标去打开轻量级的资源管理器：
接下来，就很简单了，就是浏览文件夹，找到想要打开的文件，双击，即可用此Notepad++打开该文件了。
刚试了试，发现，此处，不论是何种文件，比如图片，都可以用Notepad++打开的。
当然，打开的图片等类型的文件的话，也都是以文本模式打开的：
1.4.5. 括号自动补全插件: XBracket Lite
之前就一直希望Notepad++拥有此功能，结果没找到选项，现在终于通过插件得以实现了。
是从中得知的此插件XBracket Lite的。
插件功能：对于一些括号类的字符，比如单引号',双引号",圆括号(,大括号{,反括号[等，自动帮你实现自动补全
插件用途：减轻了写代码和编译xml类的文件时候的工作量
插件安装：参考去安装XBracket Lite插件，截图如下：
XBracket Lite功能详解：
1.4.5.1. 通过XBracket Lite实现括号的自动补全
先去打开相应的设置：
再根据自己的需要去设置：
其中解释一下相应的选项的含义：
Treat'' as brackets
把单引号'，也看成是括号，这样以后输入单个单引号，也可以实现自动补全另一个单引号了。
Treat& & as brackets
把尖括号也看成是括号的一类，这样就方便了在xml，html等文件中写tag的时候，自动帮你补全。
如果选择了: &/&，那么输入了&后，就补全出来/&了。
如果选择了：Only if file extension contains，那么就只有当前是这些htm,xml等文件的时候，才对于尖括号使用自动补全。别的类型文件中，不去对尖括号实现补全操作。
Skip escaped bracket characters:\[,\} etc.
当输入\[或者是\}的时候，就不自动补全。
因为在写代码时，很多时候反斜杠加上这些括号，本身就是想要表示单个字符而已，所以不需要补全。
Autocomplete brackets([{""}])
即 是否启用此插件。
设置好之后，启用该插件，随便打开个文件，输入这些括号类字符的时候，就会发现，可以自动帮你实现自动补全了。
1.4.6. 支持Notepad++中使用js脚本实现功能扩展: jN
之前叫做NppScripting，后来改名为jN
插件功能：使得Notepad++中可以通过运行对应的javascript脚本，其会扩展一些额外功能，添加相应的菜单，提供各种功能
插件用途：使得你可以实现，自己写javascript脚本，几乎可以实现任何你想要的功能。而且本身其已经实现了很多常用的功能，供你使用。
插件安装：
解压后，把jN文件夹和jN.dll拷贝到Notepad++的plugin目录下即可。
更多的细节，参考
1.4.7. 显示函数列表：Function List
插件功能：用于显示出函数的列表。支持很多种语言，包括C, C++, Resource File, Java, Assembler, MS INI File, HTML, Javascript, PHP, ASP, Pascal, Python, Perl, Objective C, LUA, Fortran, NSIS, VHDL, SQL, VB and BATCH
插件用途：这样以后打开Python等文件，就可以通过双击显示出来的函数列表中的某函数，实现快速定位到相应的位置了。
插件安装：
参考下载FunctionList_2_1_UNI_dll.zip
解压后，按照install.txt中的提示去：
把FunctionList.dll拷贝到 安装目录\Notepad++\plugin下
把Gmod Lua.bmp和C++.flb拷贝到 安装目录\Notepad++\plugin\config下
把FunctionListRules.xml拷贝到 %APPDATA%\Notepad++\plugins\config下
其中需要注意的是，此处的FunctionListRules.xml就是定义了各种语言的搜索函数的规则。必须把该文件拷贝到上述位置才可以。像我最开始的时候，拷贝到安装目录\Notepad++\plugin\config下是不可以的。
而%APPDATA%的位置，在我这里的是C:\Users\CLi\AppData\Roaming\Notepad++\plugins\config
之后通过 插件 => Function List => List...或者快捷键Ctrl+Alt+Shift+L，就可以打开当前文件的函数列表了：
1.4.8. js代码压缩,js代码格式化,JSON查看器: JSMinNpp
插件功能：包含三个功能：
js代码压缩
js代码格式化功能
JSON代码查看器，以树状列表显示
插件用途：三和一功能的插件，很是方便使用。
插件安装：
参考，去下载JSMinNPP.1.11.2.uni.zip,解压后把JSMinNPP.dll拷贝到plugin目录即可。
去试了试，真的很好用：
js代码压缩
js代码格式化功能
JSON代码查看器，以树状列表显示
话说，装了这个插件之后，以前一直使用的，在线版本的HTML/JS代码格式化网站:，就可以减少使用次数了。
因为javascript，json等代码，都可以使用此插件格式化并以树状显示了。
只不过，对于html代码的格式化，还是需要用到那个jsbeautifier的。1606
很棒的编辑器。在版本号零点几时就关注了，如今已经1.2了，比较成熟了，插件也不少，定位方面感觉比sublime text更专注于HTML/CSS/JAVASCRIPT上的开发。让笔者喜欢他的地方有几大功能：字体渲染（没有锯齿，应该软件本身优化了，配合编程字体Consolas和DejaVu Sans Mono字体，舒服极了），快速编辑（Quick Edit/Inline Editors，快速的编辑CSS，可视化的颜色选择器，CSS动画曲线），实时预览（Live Preview，所见所得，如同绘画，随心所欲创建优美的界面），通过PSD创建HTML代码（笔者没有测试）。
Sublime Text默认主题Monokai的的移植版截图，当然了与Monokai细节上还是有差别的，比如CSS的单位px没有颜色，不过都是小细节。下面是移植的Monokai主题HTML截图
移植的Monokai主题，CSS截图，红色标签的颜色看着很舒服。
自带的黑色也很好看，很舒服，不是很累眼睛。
默认的白色主题截图，字体使用的是DejaVu Sans Mono与准圆的整合版，大以前在网上搜罗到的。
实时预览截图，现在只支持Chrome，而且要安装版的，通过主界面右上侧的闪电图标启动，如果失败，可以通过提示链接查看解决，非常爽的功能。
颜色选择器，直观，便捷，特别是对颜色不敏感的朋友很有帮助。
CSS动画的淡入淡出，也可以直观的通过曲线来调整，很方便。
一些必备的插件介绍
扩展程序在右上方闪电按钮下面，可以在线安装，或者通过ZIP压缩包拖拽到扩展程序左下方区域进行安装
Emmet(原名Zen coding)，快速书写HTML/CSS必备神器，直接出现选项按钮
Beautify，一个代码格式化的软件，支持HTML/CSS/JAVASCRIPT，安装后在“编辑”按钮下
Code Folding，代码折叠工具，安装后在“视图”下可以看到选项，还有快捷键
Autosave Files on Window Blur，当软件失去焦点或切换程序时，自动保存所有文件，无按钮，自动后台实现
Indent Guides，显示一条竖直的缩进辅助线，有助于代码整齐，安装后在“编辑”按钮下有开关
截止到发稿日期全是最新的，，包含了monokai主题，字体，和上面几个插件
介绍视频英文
可能感兴趣的视频
文章标题：&Brackets – Adobe免费开源的代码编辑器，快速编辑，实时预览，必备插件下载
文章分类：& ,
文章标签：& ,
发表时间：& 22:18:58
文章链接：&/brackets-introduction.html（如需转载请注明出处，谢谢合作）
最受支持视频
最具潜力视频
Copyright&&&
辽ICP备号-1Notepad++ 插件及使用技巧介绍_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Notepad++ 插件及使用技巧介绍
上传于||暂无简介
阅读已结束，如果下载本文需要使用
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩25页未读，继续阅读
你可能喜欢| 时间排序
我通常，在大致框架构思好以后，用PS做出来，然后写代码慢慢调整。
我通常，在大致框架构思好以后，用PS做出来，然后写代码慢慢调整。
学习开发：&br&混起来写，逐步看效果。最后重构一遍。&br&成熟开发：&br&（js和后端api框架）&特定项目html&相应css&相应js&相应后端逻辑，依次。
学习开发：混起来写，逐步看效果。最后重构一遍。成熟开发：（js和后端api框架）&特定项目html&相应css&相应js&相应后端逻辑，依次。
先不是写代码，是分析设计，哪些模块有通性可重用，怎么分割怎么起名，以后有什么拓展的可能性…&br&打好以上腹稿，我会先写HTML，从全局框架到分割好的小模块，从通用模块如页头页脚到比较独特的模块，从首页列表页内容页同类型的一起写，不同后台需要的结构可能还不一样…&br&然后写CSS，一边写一边会检查HTML结构有没有疏漏，兼容性能不能做好，有的话进行调整。先写比较通用的标签的样式，再细化到不同模块，覆盖插件的初始样式。然后魔法就来了，有些模块只要覆盖个别样式就能完成。&br&通常会最后写JS，同时会写因为操作dom所需要的一些CSS样式，这时HTML就基本不需要动了。
先不是写代码，是分析设计，哪些模块有通性可重用，怎么分割怎么起名，以后有什么拓展的可能性…打好以上腹稿，我会先写HTML，从全局框架到分割好的小模块，从通用模块如页头页脚到比较独特的模块，从首页列表页内容页同类型的一起写，不同后台需要的结构可…
撸代码不在于姿势。
撸代码不在于姿势。
那么多framework, boilerplate，为什么要自己重头写？
那么多framework, boilerplate，为什么要自己重头写？
当然是先写html 然后再css 这个叫分治法
当然是先写html 然后再css 这个叫分治法
个人爱好。&br&我喜欢看一下交互图，然后脑海中大概分析下怎么解决。&br&然后 把html 结构写出来后 再去补充css。 &br&不过中间会有折回。。。&br&比如 上诉的正常的方法是&br&分析-&找到一个解决办法-&写html－&写css-&写js。&br&&br&经常 写css时发现，这种css不好 或者 不通用 或者 不能解决问题。&br&这时候就去从新 分析-&,,,,,,,&br&&br&这是我的个人爱好，，
个人爱好。我喜欢看一下交互图，然后脑海中大概分析下怎么解决。然后 把html 结构写出来后 再去补充css。 不过中间会有折回。。。比如 上诉的正常的方法是分析-&找到一个解决办法-&写html－&写css-&写js。经常 写css时发现，这种css不好 或者 不通用 或者 …
说白了，这项工作就是个翻译&br&你不仅需要学习这门语言&br&更需要了解人家的生活习惯，风土人情&br&多写，多练，直到你的脑子跟安装了一个浏览器一样的软件一样&br&然后就是翻译就行了&br&---------------------------------&br&我的前端代码习惯是这样的：&br&1.看一下页面样子，分析结构与需要提出来的元素&br&2.把需要的图片元素切出来&br&3.sublime，分3屏（我用2个显示器），左边html，中间css，右侧js（空间够大也可以把图片放到最右侧，作为参考）&br&4.凭记忆按html&css&js的顺序都写出来&br&5.浏览器运行看下样式&br&6.调试&br&重复5,6步骤几次基本上就完成了&br&以上
说白了，这项工作就是个翻译你不仅需要学习这门语言更需要了解人家的生活习惯，风土人情多写，多练，直到你的脑子跟安装了一个浏览器一样的软件一样然后就是翻译就行了---------------------------------我的前端代码习惯是这样的：1.看一下页面样子，分析…
必须同时写。才能达到理想的界面效果。
必须同时写。才能达到理想的界面效果。
‘横切，竖切，切得快准狠就是好切。---匿名 ’&br&&br&&b&在切图前，需要做的一些准备工作：&/b&&br&
你需要有一个属于你自己Grid System，如果你是Sass Person，可以使用&a href=&///?target=http%3A//susy.oddbird.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Susy&i class=&icon-external&&&/i&&/a&或者&a href=&///?target=http%3A//jeet.gs/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Jeet Grid System&i class=&icon-external&&&/i&&/a& ，后者更加轻量级一点。&br&
Jeet Scss Example&br&&div class=&highlight&&&pre&&code class=&language-scss&&
&span class=&nc&&.col-7-12&/span&&span class=&p&&{&/span&
&span class=&k&&@include&/span&&span class=&nd&& column&/span&&span class=&p&&(&/span&&span class=&mi&&12&/span&&span class=&o&&/&/span&&span class=&mi&&12&/span&&span class=&p&&);&/span&
&span class=&k&&&&/span&&span class=&nc&&.push-7&/span& &span class=&p&&{&/span&
&span class=&k&&@include&/span&&span class=&nd&& unshift&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&k&&&&/span&&span class=&nc&&.pull-7&/span& &span class=&p&&{&/span&
&span class=&k&&@include&/span&&span class=&nd&& unshift&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&nc&&.col-5-12&/span&&span class=&p&&{&/span&
&span class=&k&&@include&/span&&span class=&nd&& column&/span&&span class=&p&&(&/span&&span class=&mi&&12&/span&&span class=&o&&/&/span&&span class=&mi&&12&/span&&span class=&p&&);&/span&
&span class=&k&&&&/span&&span class=&nc&&.push-5&/span& &span class=&p&&{&/span&
&span class=&k&&@include&/span&&span class=&nd&& unshift&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&k&&&&/span&&span class=&nc&&.pull-5&/span& &span class=&p&&{&/span&
&span class=&k&&@include&/span&&span class=&nd&& unshift&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&
你需要有所了解BEM, 存货：&br&&a href=&///?target=http%3A//bem.github.io/bem-method/html/all.en.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&bem.github.io/bem-metho&/span&&span class=&invisible&&d/html/all.en.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=https%3A///bem-101/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&BEM 101 | CSS-Tricks&i class=&icon-external&&&/i&&/a&&br&
很多图友在切图时，不知道如何命名class，BEM很好的规范了如何给class起名和HTML结构。&br&
制作纯静态页面的话，Jade对你很有帮助&a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Jade - Template Engine&i class=&icon-external&&&/i&&/a&&br&&br&使用类似于&a href=&///?target=https%3A//necolas.github.io/normalize.css/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Normalize.css: Make browsers render all elements more consistently.&i class=&icon-external&&&/i&&/a& 的东东帮你重置browser rendering。&br&以上准备完毕就可以切图了。推荐使用Atom, Brackets, Sublime等&br&&br&&b&开始切图&/b&&br&
1. 遵循BEM规范，建立对应HTML tag以及 classes，同时把预先准备好的grid system填补上去，&br&
Example HTML:&div class=&highlight&&&pre&&code class=&language-html&&&span class=&nt&&&div&/span& &span class=&na&&class=&/span&&span class=&s&&&row--full&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&div&/span& &span class=&na&&class=&/span&&span class=&s&&&col-3-12 &&/span&&span class=&nt&&&&/span&
&span class=&nt&&&div&/span& &span class=&na&&class=&/span&&span class=&s&&&landing--header-logo&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&/div&&/span&
&span class=&nt&&&/div&&/span&
&span class=&nt&&&div&/span& &span class=&na&&class=&/span&&span class=&s&&&col-9-12 landing--header-nav&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&div&/span& &span class=&na&&class=&/span&&span class=&s&&&landing--header-nav-icon&&/span& &span class=&na&&href=&/span&&span class=&s&&&&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&i&/span& &span class=&na&&class=&/span&&span class=&s&&&fa fa-bars fa-lg&&/span&&span class=&nt&&&&/i&&/span&
&span class=&nt&&&/div&&/span&
&span class=&nt&&&ul&/span& &span class=&na&&class=&/span&&span class=&s&&&landing--header-nav-list&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&#&&/span&&span class=&nt&&&&/span&Pricing&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&#&&/span&&span class=&nt&&&&/span&Features&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&#&&/span&&span class=&nt&&&&/span&Blog&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&#&&/span&&span class=&nt&&&&/span&Sign in&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&class=&/span&&span class=&s&&&landing--header-signin&&/span& &span class=&na&&href=&/span&&span class=&s&&&#&&/span&&span class=&nt&&&&/span&Join us!&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&/ul&&/span&
&span class=&nt&&&/div&&/span&
&span class=&nt&&&/div&&/span&
&/code&&/pre&&/div&
因为有了BEM规范了HTML class，所以在写CSS的时候会轻松许多，如果使用CSS preprocessor效果更加。&br&&br&
2. 已经有了基本的HTML Skeleton以及对应的grid system，下一步就是CSS拉。&br&
为了提高效率和增加重复使用率，可以使用Sass的mixin和extend功能，&br&
Example Scss:&br&&div class=&highlight&&&pre&&code class=&language-scss&&&span class=&k&&@mixin&/span&&span class=&nf&& serif&/span&&span class=&p&&(&/span&&span class=&nv&&$normal&/span&&span class=&o&&:&/span&&span class=&n-Pseudo&&false&/span&&span class=&o&&,&/span& &span class=&nv&&$heading&/span&&span class=&o&&:&/span& &span class=&n-Pseudo&&false&/span&&span class=&p&&){&/span&
&span class=&k&&@if&/span& &span class=&nv&&$normal&/span& &span class=&p&&{&/span&
&span class=&na&&font-family&/span&&span class=&o&&:&/span& &span class=&s1&&'&/span&&span class=&s2&&font-name'&/span&&span class=&o&&,&/span& &span class=&n&&Georgia&/span&&span class=&o&&,&/span& &span class=&no&&serif&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span& &span class=&k&&@else&/span& &span class=&p&&{&/span&
&span class=&na&&font-family&/span&&span class=&o&&:&/span& &span class=&s1&&'&/span&&span class=&s2&&alt-font-name'&/span&&span class=&o&&,&/span& &span class=&n&&Helvetica&/span&&span class=&o&&,&/span& &span class=&n&&Arial&/span&&span class=&o&&,&/span& &span class=&n&&san-serif&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&@if&/span& &span class=&nv&&$heading&/span& &span class=&p&&{&/span&
&span class=&na&&font-weight&/span&&span class=&o&&:&/span& &span class=&mi&&700&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span& &span class=&k&&@else&/span& &span class=&p&&{&/span&
&span class=&na&&font-weight&/span&&span class=&o&&:&/span& &span class=&mi&&400&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&3.使用PerfectPixel &a href=&///?target=http%3A///perfectpixel/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&PerfectPixel by WellDoneCode&i class=&icon-external&&&/i&&/a& 等浏览器插件，增加网页精确度以及优化CSS。&br&&br&总结：&br&切图前最好也相对了解整个网站和产品的Structure，这样可以更好的构建HTML和规范BEM。慢慢切多了就会总结一套对自己行之有效的方法。希望以上对你有帮助。
‘横切，竖切，切得快准狠就是好切。---匿名 ’在切图前，需要做的一些准备工作： 你需要有一个属于你自己Grid System，如果你是Sass Person，可以使用或者 ，后者更加轻量级一点。 Jeet Scss Example .col-7-12{
@include column(12/…
这个得有区分，根据具体项目以及在项目中所处的位置。&br&&br&一个人写页面的时候，如果是大型项目，先写css框架，以及一些公用的样式， &a data-hash=&fe457a1f01a3aacc727cda543a4b0ea7& href=&///people/fe457a1f01a3aacc727cda543a4b0ea7& class=&member_mention& data-tip=&p$b$fe457a1f01a3aacc727cda543a4b0ea7&&@felixgrey&/a& 说的就不错；让后，分模块写css，再写html；如果是小页面，建议先考虑布局，可以先在纸上画清楚，然后写css，再写html；当然，如果为了锻炼自己的布局能力，你也可以把小页面当做大项目来写。&br&团队合作的话，就不是先写哪样，后写哪样啦。是先得商量，将整个项目设计的前端页面拆开，然后确定写的顺序。&br&&br&如果你习惯了，而且效率不错，就别执拗于顺序了。都一样。但重要的是，一定得分模块。
这个得有区分，根据具体项目以及在项目中所处的位置。一个人写页面的时候，如果是大型项目，先写css框架，以及一些公用的样式，
说的就不错；让后，分模块写css，再写html；如果是小页面，建议先考虑布局，可以先在纸上画清楚，然后写css，再写h…
具体看网页的布局是怎样的吧，我通常都是先写完大部分主体的模块，然后再每个模块HTML跟css同时进行，这样变动修改起来都比较方便。
具体看网页的布局是怎样的吧，我通常都是先写完大部分主体的模块，然后再每个模块HTML跟css同时进行，这样变动修改起来都比较方便。
我反正是两个一块写的，有时候心情好，顺便实现一点简单的js
我反正是两个一块写的，有时候心情好，顺便实现一点简单的js
这个要看个人习惯了&br&都行吧
这个要看个人习惯了都行吧
首先，写CSS通用架构。&br&包括：&br&1 元素统一配置，padding margin display等，抹平浏览器差异。&br&2 布局和栅格系统。&br&3 资源，字体图标什么的。&br&然后，根据页面设计，提取从通用的风格样式，作为主题样式。&br&再之后，是一些强调性样式，如特殊颜色字体设么的。&br&到此为止，都是公共样式，在项目开始时就应该完成。&br&最后，是页面专有样式，根据页面设计写。&br&&br&按照这样的流程，拿到一个页面后首先考虑的是页面结构的划分，标题 导航 正文 侧栏等&br&然后考虑的是布局，尽量用公共CSS实现，一般来说栅格系统套用都可以做到。&br&风格样式也尽量用项目的主题实现。&br&最后剩下的部分才是需要写的CSS。&br&&br&最后的结论是，从整个项目来说，是先有的CSS样式，后有的具体HTML页面。&br&但是就单个页面来说，的确是先写HTML，后写CSS。&br&&br&如果没有事先写好的公用CSS，个人倾向于先写公用CSS，再写页面。
首先，写CSS通用架构。包括：1 元素统一配置，padding margin display等，抹平浏览器差异。2 布局和栅格系统。3 资源，字体图标什么的。然后，根据页面设计，提取从通用的风格样式，作为主题样式。再之后，是一些强调性样式，如特殊颜色字体设么的。到此为…
先写框架HTML，Component可以简单拿div, span, 甚至img代替一下，因为设计会变。&br&&br&然后写框架层的CSS，如果能用bootstrap, pureCSS等也可以，点到为止，不要实现任何视觉设计的元素，因为设计会变。&br&&br&记得一定要跟设计组要一份单独的组件的visual style guide，因为设计变化的时候，layout和visual只需要更新各自就行了。&br&&br&最后的最后，再单独写一份css定义visual design。因为产品敲定/交付/上线以后，设计会变！！！
先写框架HTML，Component可以简单拿div, span, 甚至img代替一下，因为设计会变。然后写框架层的CSS，如果能用bootstrap, pureCSS等也可以，点到为止，不要实现任何视觉设计的元素，因为设计会变。记得一定要跟设计组要一份单独的组件的visual style guide，…
先布局，然后每一个区域写完html就写相对应的css
先布局，然后每一个区域写完html就写相对应的css
熟练了闭着眼睛写。
熟练了闭着眼睛写。
多写，不在于方式在于姿势。
多写，不在于方式在于姿势。
HTML 和 CSS 一般是同时写的。&br&&br&先拆分成大块的布局，然后逐步拆分细化，最后精确到像素。
HTML 和 CSS 一般是同时写的。先拆分成大块的布局，然后逐步拆分细化，最后精确到像素。
我以前都这样写：&br&第一步，先写整页框架，例如左右分栏，上下分栏，头尾等的html结构。然后写对应的样式。&br&第二步，拆分模块，一个一个模块写html，然后写css，并且套到对应的整体结构中。&br&第三步，细节调整，整体联调样式。&br&&br&js呢，其实也可以按照模块写。&br&&br&这样做的一个好处是，你一个人的工作完全可以无缝拆成多个人的工作。所以当主导一个很重的页面的改版的时候，这种方式让多人协作受益良多。
我以前都这样写：第一步，先写整页框架，例如左右分栏，上下分栏，头尾等的html结构。然后写对应的样式。第二步，拆分模块，一个一个模块写html，然后写css，并且套到对应的整体结构中。第三步，细节调整，整体联调样式。js呢，其实也可以按照模块写。这样…
先写骨架并把类写好，然后再去写CSS。&br&&br&以我自己为例，我们公司的设计不是一次交活的，设计团队会先给出一个大概得布局，开发团队根据布局先把骨架写好，然后等设计团队完成所有的设计并给出文档后再具体调整样式。
先写骨架并把类写好，然后再去写CSS。以我自己为例，我们公司的设计不是一次交活的，设计团队会先给出一个大概得布局，开发团队根据布局先把骨架写好，然后等设计团队完成所有的设计并给出文档后再具体调整样式。}