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. 使用devstack/pike部署多节点实验

    目录 第一步:安装Ubuntu16.04 server并以stack为用户名创建用户 第二步:安装git及相关配置 第三步:安装Open vSwitch 2.5.X 第四步:获取devstack脚本 ...

  2. LeetCode-37.解数独

    编写一个程序,通过已填充的空格来解决数独问题. 一个数独的解法需遵循如下规则: 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以粗实线分隔的 3x3 ...

  3. 谷歌算法研究员：我为什么钟爱PyTorch？

    老铁们好!我是一名前谷歌的算法研究员,处理深度学习相关项目已有三年经验,接下来会在平台上给大家分享一些深度学习,计算机视觉和统计机器学习的心得体会,当然了内推简历一定是收的.这篇文章,不想说太多学术的 ...

  4. xss基础

    0x0 定义 总结: (1)     在页面显示 (2)     用户可控 满足以上两点就有可能存在xss 0x1反射型 0x2存储型 0x3 DOM型 与反射型相似 也是从get等参数传参 但 反射 ...

  5. Yale数据库上的人脸识别

    一.问题分析 1. 问题描述 在Yale数据集上完成以下工作:在给定的人脸库中,通过算法完成人脸识别,算法需要做到能判断出测试的人脸是否属于给定的数据集.如果属于,需要判断出测试的人脸属于数据集中的哪 ...

  6. yum 安装mongodb mysql

    // 云环境下更新包 (center os)yum update (多更有益) 修改yum包管理配置:vi /etc/yum.repos.d/mongodb-org-3.4.repo // 会自动新建 ...

  7. ci test

    下载ci 版本 3.1.9 下载地址 https://www.codeigniter.com/ 怎么查看CI的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?system\core\cod ...

  8. springMVC返回给页面参数的三种形式

  9. MT【190】绝对值的和

    (2012浙江压轴题)已知$a>0,b\in R$,函数$f(x)=4ax^3-2bx-a+b$.1)证明:当$0\le x\le 1$时,i)函数$f(x)$的最大值为$|2a-b|+a;$i ...

  10. USACO Section 2.1 The Castle 解题报告

    题目 题目描述 有一个城堡,城堡中有若干个房间,房间与房间之间用墙来进行分隔.现在我们需要统计这个城堡有多少个房间,并且还要找出最大的房间的面积是多少(一个单元格就代表一个单元面积).城堡的主人现在想 ...