LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件。利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发，一次配置，简单易用！

本文由前端交流QQ群管理员——訫♂染提供！特此感谢。

LiveStyle官方网站：http://livestyle.emmet.io/

LiveStyle和Sublime Text3配置说明

一、安装并启动Chrome浏览器，进入Chrome APP站点：https://chrome.google.com/webstore/category/apps  搜索：LiveStyle可以看到下图并点击安装启用

二、下载Sublime Text3编辑器

点击下载Sublime Textile3

说明：本站安装包已经集成 emmet 插件，下载完成后解压Sublime Text3就可以使用了，本站提供的为绿色文件包，无须安装。

三、用Chrome打开需要编辑的地址，右键点击查看网页元素,可看到下图。

四、打开已经安装好的Sublime Text3，到Chrome里查看已经自动挂接上Sublime了。

在sublime Text 中打开一个 css 文档。回到浏览器查看并设置同步

此时在Chrome代码查看器中编辑您的CSS，即可同步到您在Sublime Text中打开的CSS文件中。或者在Sublime Text中编辑您的CSS也可义在浏览器中同步显示页面效果！

Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发的更多相关文章

  1. Sublime Text3编辑器简介

    Sublime Text3编辑器简介 下载地址 绿色中文版v3.3038下载地址:http://www.cncrk.com/downinfo/60832.html 官方网址(英文安装版)下载地址:ht ...

  2. Sublime text3的安装以及python开发环境的搭建

    作者:struct_mooc 博客地址:https://www.cnblogs.com/structmooc/p/12376601.html 一. Sublime text3的安装 1.sublime ...

  3. Python3.7解释器+sublime Text3编辑器+案例打包软件+Python语言程序设计基础教材

    编辑器:https://nsyw.lanzous.com/i7lcdyh Python3.7 https://nsyw.lanzous.com/i7a299c 案例 https://nsyw.lanz ...

  4. Sublime Text3下如何快速搭建开发环境

    安装好Sublime Text3之后,简单几步就可以搭建一个好用的开发环境. sublime的设置包括自定义设置以及插件系统. 打开菜单Preferences -> Settings,编辑自定义 ...

  5. Sublime text3的安装及python开发环境的搭建

    作者:struct_mooc 博客地址:https:////www.cnblogs.com/structmooc/p/12376592.html 一. Sublime text3的安装 1.subli ...

  6. Sublime Text3 配置 Lua5.3.5开发环境

    所需软件 Sublime Text3 Lua5.3.5 配置过程 解压Lua5.3.5包 官方下载的包内是需要makefile安装的(博主Win10下暂为实现),此处提供自动配置完毕的包:Lua5.3 ...

  7. Sublime Text3 编辑器我的最爱

    简介 Sublime Text 3是一个神奇的文本编辑器,适合程序员.作家.它有很多亮点功能,比如多选择.Go Anything.命令面板.多选择可以让你同时编辑多出代码,Got Anything 像 ...

  8. sublime text3 编辑器常用快捷键

    选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数 ...

  9. sublime text3编辑器经常使用快捷方式

    1.简单语法的自己主动补全 preferences->setting user 输入例如以下代码,保存. { "auto_complete":true, "auto ...

随机推荐

  1. 如何干净的卸载docker

    先上服务器环境信息: 卸载的原因: 宿主机过段时间就磁盘100%了,导致continart异常退出,后来找了很多解决方案,才发现是安装docker的时候有个配置文件错误(正常的应该是|Storage ...

  2. java中多态的实现机制

    多态的概念: 简单来说就是事物在运行过程中存在的不同状态,即父类或接口定义的引用变量指向子类或具体实现类的实例对象.程序调用方法在运行期才进行动态绑定,而不是引用变量的类型中定义的方法. 多态存在的前 ...

  3. Notes of Daily Scrum Meeting（12.17）

    我们会尽量安排好时间,在其他作业不受影响的情况下加快项目的进度,在Deadline之前完成Beta阶段的工作. 今天的团队工作总结如下: 团队成员 今日团队工作 陈少杰 调试网络连接,补充后端代码 王 ...

  4. 05-java学习-循环结构

    for while do  while 增强for 各种循环嵌套.循环和if的嵌套.switch的嵌套

  5. Beta 冲刺 一

    团队成员 051601135 岳冠宇 031602629 刘意晗 031602248 郑智文 031602330 苏芳锃 031602234 王淇 照片 项目进展 岳冠宇 昨天的困难 无 今天的进度 ...

  6. Linux命令（四）删除文件 rm

    用户可以使用 rm 命令删除不需要的文件. rm 可以删除文件或目录,并且支持通配符. 如果目录中存在其它文件则会递归删除. 删除软链接只是删除链接,对应的文件或目录不会被删除. 软链接类似于 win ...

  7. 常用OLAP引擎

    l  presto Presto是Facebook开发的分布式大数据SQL查询引擎,专门进行快速数据分析. 特点: 可以将多个数据源的数据进行合并,可以跨越整个组织进行分析. 直接从HDFS读取数据, ...

  8. python自动化之PDF

    ###################################处理PDF和Word文档################################### ''' PDF和Word文档是二进 ...

  9. 通过.json()将服务器返回的字符串转换成字典

  10. iOS 打开系统设置的常用功能

    说明: 跳转到系统设置不同功能界面,只要知道路径都很简单,路径可以自己打开手机设置界面看, 照着模板把对应的名称替换就可以了,但是得知道对应功能的英文名称. 1. prefs:root=Privacy ...