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. photoshop cs6安装过程中安装程序遇到错误:请重启计算机，解决办法

    1.关闭防火墙和杀毒软件 2.删除注册表 依次展开HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager目录,找到其中的 ...

  2. Java+Netty、Vue+Element-UI实现的即时通信应用 leo-im

    之前工作接触了几个开源的IM产品,再加上曾经用Netty实现过几个服务,于是就有了用Netty实现一个IM的想法,于是用业余时间写了一个IM,和喜欢Netty的程序员们分享. 考虑到方便扩展,在服务端 ...

  3. Jenkins+Maven+SVN+Nexus自动化部署代码实例

    本文接着上篇安装jenkins,安装相关插件,使用我们公司持续集成的测试环境实例进行演示 ========= 完美的分割线 ========== 1.安装jenkins的maven插件 如果要使用je ...

  4. 做游戏的小伙伴们注意了，DDoS还可以这样破！

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 作者:腾讯DDoS安全专家.腾讯云游戏安全专家haroldchen 摘要:在游戏出海的过程中,DDoS攻 ...

  5. 【翻译】给初学者的 Neural Networks / 神经网络 介绍

    本文翻译自 SATYA MALLICK 的  "Neural Networks : A 30,000 Feet View for Beginners" 原文链接: https:// ...

  6. 每日scrum(7)

    今天是小组用来写文稿的日子,包括软件需求分析报告,概要设计报告,详细设计报告,数据库设计报告,软件测试报告,各组员领取自己的任务然后完成~ 任务看板: 燃尽图:

  7. UIO,大页内存,CPU亲和性,NUMA机制等

    Linux环境下的UIO(Userspace I/O) UIO 用户空间下驱动程序的支持机制.DPDK使用UIO机制使网卡驱动程序运行在用户态,并采用轮询和零拷贝方式从网卡收取报文,提高收发报文的性能 ...

  8. Apache DBUtils框架 结果处理器

    package com.itheima.dbutil; import java.util.List; import java.util.Map; import org.apache.commons.d ...

  9. CopyOnWriteArrayList、CopyOnWriteArraySet、ConcurrentHashMap的实现原理和适用场景

    ConcurrentHashMap代替同步的Map(Collections.synchronized(new HashMap())),众所周知,HashMap是根据散列值分段存储的,同步Map在同步的 ...

  10. 【设计模式】—— 备忘录模式Memento

    前言:[模式总览]——————————by xingoo 模式意图 这个模式主要是想通过一个对象来记录对象的某种状态,这样有利于在其他需要的场合进行恢复. 该模式还有跟多可以扩展的地方,比如可以记录多 ...