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. cadence allegro 封装原点修改

    打开 dra文件后 在菜单栏 setup - change drawing origin 在命令栏输入 新的参考点位置 如想更改新坐标位置为 1,2 .输入  x 1 2

  2. shellcode 初次使用笔记

    winXP SP3 环境 (xp环境默认没开启栈不可执行机制,比较方便破解,如果已开启了,请自行百度如何关闭) dig.exe 目标文件 x86dbg调试工具 python 环境 打开准备好的目标软件 ...

  3. Android 测试之Monkey

    一.什么是Monkey Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进 ...

  4. 利用Python实现App自动签到领取积分

    要自动签到,最简单的是打开页面分析请求,然后我们用脚本实现请求的自动化.但是发现食行没有页面,只有 APP,这不是一个好消息,这意味着需要抓包处理了. 有需要Python学习资料的小伙伴吗?小编整理[ ...

  5. PAT甲级题解-1100. Mars Numbers (20)-字符串处理

    没什么好说的,注意字符串的处理,以及当数字是13的倍数时,只需高位叫法的单词.比如26,是“hel”,而不是“hel tret”. 代码: #include <iostream> #inc ...

  6. Linux内核学习总结(final)

    Linux内核学习总结 符钰婧 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ...

  7. Linux内核分析——第一章 Linux内核简介

    第一章   Linux内核简介 一.Unix的历史 1.Unix系统成为一个强大.健壮和稳定的操作系统的根本原因: (1)简洁 (2)在Unix中,很多东西都被当做文件对待.这种抽象使对数据和对设备的 ...

  8. Linux内核分析第三周总结

    构造一个简单的Linux系统MenuOS 操作系统的"两把宝剑":中断上下文的切换(保存现场和恢复现场).进程上下文的切换 Linux内核源代码简介 --------------- ...

  9. Solr查询语法

    基于solr版本:6.0.0 当配置好本地的环境之后,就访问http://localhost:8080/solr/index.html.或者是访问已经放在服务器上的solr环境,例如http://10 ...

  10. echarts实现环形图

    前端框架使用的angular,使用echarts实现环形图 1. item.component.html <div id="box1" class="pie&quo ...