首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何能提高CSS编写技巧 提高Web前端开发效率

2、注意外边距折叠 与其他大多数属性不同,上下的垂直外边距margin同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘,只会保留两个margin值较大的那个。...当我们设置一个元素的宽度或高度,就是设置它的内容的大小。所有的padding和边框值都不包含。...8、使用AutoPrefixer达到更好的兼容性 浏览器前缀是CSS中最烦人的事情之一,每个属性需要的前缀是不一致的,你永远不知道到底需要一个,如果真的要把它一个一个手动添加到样式表,那无疑是一个无聊的噩梦...它会告诉你是否犯了任何错误,警告错误的用法,并为您提供改进代码的提示。...里面聚集了一些正在自学前端的初学者裙文件里面也有做前端技术这段时间整理的一些前端学习手册,前端面试题,前端开发工具,PDF文档书籍教程,需要的话都可以自行来获取下载。

84310

Sublime的插件介绍 转

可以浏览器打开,还可以配置不同文件的打开方式。 单单下面这一个功能就必须安装了!...保存代码规范 支持多种语言。(个人觉得brackets的这个插件比Sublime Text做得好多了。) /*:回车创建一个代码块注释 /**:回车自动查找函数的形参等等。...把原来的禁用了吧 NO.14 Color Highlighter :CSS颜色高亮 这个插件等了很久了(使用breakets的时候发现 的,好用到爆),最早用Sublime Text写CSS...还是brackets的牛逼 Color Highlighter这个插件会检测CSS文件的颜色码,不论是Hex码或者RGB码都能很好的显示。...NO.16 Markdown Editing 和 Markdown Preview,实现预览MD 当在 Sublime Text 编写 markdown 文件浏览器打开全是乱码,因为还没有将

96830
您找到你想要的搜索结果了吗?
是的
没有找到

sublime 3及常用插件

Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等所有语言,是 Sublime Text 自带代码提示功能基础上一个更好的扩展,自带代码提示功能只可提示系统代码...6、FileDiffs 功能:强大的比较代码不同工具 简介:比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具,精确到行。...则只打开了该文件如图;若Open In Browser → 右侧任意一栏(点击),则在浏览器预览 设置默认预览浏览器,文件(右键单击) → Open In Browser → Default(点击)...②.复制下面的代码,粘贴到Side Bar.sublime-settings,并保存。...firefox" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari } 设置用快捷键进行快速预览,当我需要快速预览网页

4.9K30

JavaScript全栈开发-工具篇(上)

的语言标记语法 2.2 小技巧 -- 文件保存退出编辑器,下次启动会自动恢复 -- 双击选中一个标识符,然后连按ctrl+D可以连续选中多个标识符,进行重命名等操作 -- 以某种编码格式打开,以某种编码格式保存见...该配置文件一个node.js的模块,Grunt运行需要该配置文件。...cwd: 'css/', //需要处理文件所在目录                 src: ['*.css', '!...(若Grunt列表出现警告,未列出任务,则需要点击警告设置Grunt的NodeJS和Grunt-cli安装路径)。...(若Gulp列表出现警告,未列出任务,则需要点击警告设置Gulp的NodeJS和Gulp安装路径) 2> SublimeText SublimeText默认没有安装Gulp,参看SublimeText插件支持的安装方法

1.9K10

Sublime Text3配置使用教程

有问题有代码会出现白框,点击底下的状态栏会提示出什么问题。...使用 SublimeLinter 之前,你要安装相应的程序,详见README。如果要校验 JavaScript 或 CSS,你还要安装 Node.js。...模式,在读取和保存是校验或只保存校验。...Goto Definitions 能够在你的整个工程查找并且显示任意一个变量,函数,或者类的定义。 Find Usage 能够快速的查找某个变量,函数或者类某个特定文件的什么地方被使用了。...Show Documentation 能够显示一个函数或者类的说明性字符串(当然,是定义了字符串的情况下) ConvertToUTF8 GBK编码兼容,虽然ST3能输入中文并正常显示,但是打开含有中文字符的文件

17.2K41

如何优雅地使用Sublime Text3

/*:回车创建一个代码块注释 /**:回车自动查找函数的形参等等。 它会生成 JSDoc 格式的注释。如果你从没有使用过类似的工具,DocBlockr 会让你觉得以前没有它是如何写代码的。...advancedNewFile: 快速创建文件 当我 Sublime Text 编辑器里我们可以通过快捷键command+n(win: ctrl+n),来新建一个文件,然后command+s(Win...>这个插件咯),能精准判断哪些属性需要什么前缀,与CssComb插件一样,该插件也需要系统已安装Node.js环境;使用方法:输入CSS3属性后(冒号前)按Tab键即可。...YUI Compressor:压缩JS和CSS文件,按F7键后,若压缩当前文件(demo.js),则压缩后的文件(demo.min.js)保存在该文件的同级目录,需要安装java的JDK。...首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量 (一般安装自动添加或者询问是否添加) 添加build system sublime text依次打开Tools -> Build

6.6K60

哪些JavaScript IDE最好用?

关键字提示 使用WebStorm开发它会自动提示JS变量,关键字,方法,函数或参数名,可帮助你快速输入,避免一些低级的输入错误。 2....保存本地历史记录 本地历史记录可以帮助你跟踪代码,获取修改的代码。...开源免费 Atom GitHub上是开源的,并且是免费的 内嵌Git 控件,Web技术 内嵌Web 技术如JS,HTML及CSS 缺点:效率低 Sublime Text ?...优点:快 Sublime Text 最显著的特点就是启动和使用的过程中一个感觉就是快 多行选择和编辑 多个光标和列选择支持同时选择多行编辑。...缺点:效率低,同一间只能打开一个文件。功能不全,缺少静态内核分析功能,也缺少一些元素级别的文本编辑命令。 Codenvy ? 开发人员使用Codenvy可以修改,运行,编译云端代码。

2.4K50

Eslint相关知识和配置大全

ESLint 可以让程序员在编码的过程中发现问题而不是执行的过程。 ESLint 使用 Node.js 编写,这样既可以有一个快速的运行环境的同时也便于安装。 一....编辑器校验配置 用sublime做vue组件的校验,虽然各种插件都安装了,但依然是没有效果的,最多是用js语法校验.vue组件,这是不行的。...不知道是不是的配置有问题,导致不能用vue组件的语法进行校验,所以这里放弃了使用sublime。 本文推荐大家使用vscode作为自己的新IDE。...功能丰富、强大,配置简单,会自动根据你打开的文件推荐安装有用的插件。还可以同步sublime等编辑器的操作习惯比如快捷键等。有着方便的语法库提示。...左侧会显示语法错误数和是否修改了此文件, 右侧会波浪线显示语法错误的地方。 有时会遇到保存一次修复不完全的情况,多保存几次即可修复大部分语法。对于敲一会代码保存一下的可以不用担心这个问题。

1.8K30

超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

OneTab【强烈推荐】 - 当您发现自己有太多的标签页,单击OneTab图标,将所有标签页转换成一个列表。当您需要再次访问这些标签页,可以单独或全部恢复它们。...是一款很实用的右键菜单增强插件,有以 diff 形式显示保存的修改、文件管理器显示文件、复制文件路径、侧边栏定位该文件等功能,也有基础的诸如新建文件/目录,编辑,打开/运行,显示选择...ctrl+alt+r 新建ruby模板文件 ctrl+alt+shift+p 新建python模板文件 SublimeCodeInte 使用说明:Sublime​Code​Intel 是一个代码提示...css代码状态栏进行提示, SublimeLinter-jshint 使用说明:对错误的javascript代码状态栏进行提示, View In Browser 使用说明:sublime...以本地服务器方式打开网页 为了使用插件,你需要建立一个sublime-project文件,点击Project->Edit Project 粘贴以下代码(这是的相关配置),并保存到user目录下

4.9K81

Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs

简介和安装   Express是一个轻量级、简洁、易用的Node.js Web MVC开发框架,它基于Node.js原有进行了很多Web开发所需的功能封装......2.安装依赖项   注意上一步安装成功后的提示需要cd到网站目录,并执行npm install命令安装项目依赖项(可以项目的package.json文件的dependencies节点下看到需要哪些依赖...) 3.修改app.js文件并运行   testWebApp根目录下找到app.js并增加端口监听,sublimeCtrl+B运行 app.listen(8100,function(){...相关提示:   1.sublime运行过后,如果想要关闭,去任务管理器结束node.exe进程   2.不在sublime运行,可以cmd执行node app,关闭使用快捷键Ctrl+C 模版引擎...1.node_modules文件夹    这文件夹就是创建完项目后,cd到项目目录执行npm install后生成的文件夹,下载了项目需要的依赖项   2.package.json文件   此文件是项目的配置文件

3.6K100

Vue.js 入门指南之“前传”(含sublime text 3 配置) 1,下载安装Node.js2,配置Vue环境3,Vue初探4,配置sublime Text

1,下载安装Node.jsNode.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可。...command prompt 进入node.js 的命令行, 首先在 C盘建立一个目录 App2,然后 cd c:\App2 然后,按照提示依次输入下面的几个命令: # 全局安装 vue-cli $...(不懂cnpm的同学可以看下 这里) 是FQ安装的,也等了很久很久才安装完。 安装过程,会有些警告和错误,先忽略吧。...最后,会有一个C:\App2\my-project 的目录,如果像下面的样子,就表示成功了: ? 面对这么多文件,不知道怎么打开,后来通过VS的 “打开网址”方式,VS打开了。...但是发现此文件无法保存,鼠标放到此窗口的“页签”上记住此文件的地址,找到下列类似的目录: C:\Users\【当前登录用户名】\AppData\Roaming\Sublime Text 3\Packages

2.2K90

sublime Text 开发工具

-- 可选:snippet菜单显示说明(支持中文)。如果不定义,菜单则显示当前文件文件名。...--test.php --> 创建完毕以后,保存在\Packages\User目录下,文件命名为tp,后缀名.sublime-snippet。...直接在sublime text 编译执行PHP功能 打开“tool” ->“Build System” ->“New Build System…”,自动出现一个默认的配置,直接删掉,替换为以下代码, 保存在默认的目录即可...写完一个php文件保存后只需要 按下 Ctrl + B,就可以进行调试了 { "cmd": ["php", "$file"], "file_regex": "php$",...AndyJS js代码提示 jquery jq代码提示 Sublime Tmpl 快速生成文件模板, 比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。

1.7K10

Top 10 JavaScript编辑器,你在用哪个?

(一次选择文件一个矩形区域); 多窗口(使用你的所有显示器窗口)和拆分窗口; 使用简单的JSON文件进行完整的自定义; 基于Python的插件API; 一个统一的、可搜索的命令板。...Sublime Text还支持所有内容的自定义:颜色,文本字体,全局键绑定,制表符停止,特定文件的键绑定和代码段,甚至语法突出显示规则等。...当你识别常见问题(例如使用Node.js内置变量的__dirname),Visual Studio Code将为你提供这些功能。...Brackets扩展也是用JavaScript编写的,还可以调用Node.js模块。与大多数选项卡显示打开文件的编辑器不同的是,Brackets具有显示文件树上方的工作文件列表。...Emacs,你可以使用串行模式获取实时浏览器JavaScript,HTML和CSS交互。

3.1K10

20 个让你效率更高的 CSS 代码技巧

1.注意外边距折叠 与其他大多数属性不同,上下的垂直外边距margin同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘,只会保留两个margin值较大的那个。...box-sizing属性有两个值: content-box(默认) - 当我们设置一个元素的宽度或高度,就是设置它的内容的大小。所有的padding和边框值都不包含。...当初学习CSS总是认为选择器会覆盖它上面的所有内容。...17.使用AutoPrefixer达到更好的兼容性 浏览器前缀是CSS中最烦人的事情之一,每个属性需要的前缀是不一致的,你永远不知道到底需要一个,如果真的要把它一个一个手动添加到样式表,那无疑是一个无聊的噩梦...它会告诉你是否犯了任何错误,警告错误的用法,并为您提供改进代码的提示

54020

JavaScript全栈开发-工具篇

的语言标记语法 2.2 小技巧 -- 文件保存退出编辑器,下次启动会自动恢复 -- 双击选中一个标识符,然后连按ctrl+D可以连续选中多个标识符,进行重命名等操作 -- 以某种编码格式打开,以某种编码格式保存见...该配置文件一个node.js的模块,Grunt运行需要该配置文件。...(若Grunt列表出现警告,未列出任务,则需要点击警告设置Grunt的NodeJS和Grunt-cli安装路径)。...//mochajs.org 源码:https://github.com/mochajs/mocha Mocha是一个功能丰富能运行在浏览器端及Node.js程序的测试框架,支持异步测试,测试覆盖度报告...,Fiddler可看到手机的http请求 注意事项: 1) 手机和PC都连接同一个wifi网络确保PC和手机一个网段,可互访。

1.5K20

Sublime Text 使用技巧3

文件文件夹的不显示 之前提到过,Sublime Text可以打开一个文件夹,并将文件夹中所有内容列出到左侧。我们可以进行设置,使一些文件夹和文件显示出来。...具体做法如下: 先将文件保存sublime-project: Project->Save Project As…,选择保存位置 重新打开保存sublime-project文件,就弹出了文件列表和一个配置文件...注意:设置了不显示后,使用Ctrl-P命令搜索内容的时候,被屏蔽的文件夹和文件的内容是搜不到的。...Sublime Text 3的代码提示SublimeLinter,注意与Sublime Text 2很不相同 Sublime Text 3的代码提示插件SublimeLinter改进较大,安装方式也不一样...关掉代码提示可以Ctrl-Shift-P搜SublimeLinter:Toggle 来设置开启或关闭 颜色提示插件Color Hightlight 在编写代码,颜色的标记常常和颜色对应不上,给出一个颜色标记

62530

Sublime插件

代码安装:Ctrl+shift+p、输入install、选择package install 过几秒会弹出另一个框。然后输入框输入你想要的插件关键字安装吧!大致就是这样,简单明了。...TrailingSpacer(高亮显示多余的空格和Tab) 颜色: ColorPicker (调色盘) 在编辑CSS样式的时候,ColorPicker可以让sublime text 内置一个调色盘,...SideBarEnhancements(侧边栏增强) SyncedSideBar(侧边栏打开文件定位) 支持当前文件左侧面板定位,不错。...LESS(LESS语法识别) 这是一个非常棒的插件,可以让sublime支持less的语法高亮和语法提示,对于搞less的同学灰常重要,不过多解释。...文件传输: SFTP(编辑 FTP 或 SFTP 服务器上的文件) Package Syncing 最后推荐一个同步插件,这个插件可以不同的机器同步配置信息和插件,非常方便,但鉴于国内的墙太高,都是直接把插件给手动备份了

1K60

放弃pycharm,选择vscode或者sublime之路「建议收藏」

这是修改字体的。 按Ctrl+S保存。左边是只读文件,修改不了,只能从左边复制到右边,然后修改。 右边修改的内容必须是大括号里面,用逗号隔开的。...如果”settings.json”没有配置它们的话,调试可能会无法启动。不过测试了一下是没有问题的。 同时,项目文件夹下面还自动生成了”.vscode”文件夹。...代码 安装的时候左下角有提示: 然后结果就是 调试python 如果我们的新建文件没有保存,或者保存的后缀不是.py那么系统就不会有自动提示,甚至都没有自动缩进。...保存为1.py以后。 才有语法提示和自动缩进。这里要说明的是,sublime和vim很像,注意左下角。 按i进入插入模式。 按esc退出。按v可以进入可视化模式。...这种方式甚至不需要保存。 如何运行python文件呢?按ctrl+shfit+p。 然后点一个buid with python就可以运行了。 我们故意打错,并且保存呢,没有任何提示

2.8K20

Nodejs学习笔记(一)--- 简介及安装Node.js开发环境

安装成功后,“命令提示”输入:node -v 查看安装版本,输出版本即安装成功 image.png NPM简介   Windows的Node.js安装包安装里包含了Node Pageaged Modules...环境下开发,推荐用它   WebMatrix下载地址: http://www.microsoft.com/web/webmatrix/   最终还是选择了Sublime,可以各平台下保持个统一个开发工具...,配置方法网上有很多   Sublime下载地址: http://www.sublimetext.com/    (软件无需注册,使用过程时不时会弹出需要注册的窗口,取消即可) Sublime Node.js...new Build System   3.文件复制入 { "cmd": ["node", "$file"], "file_regex": "^[ ]*File \"(...*?)...\", line ([0-9]*)", "selector": "source.javascript" }   4.保存文件为NodeJs.sublime-build   5.菜单上找到Tools

1.5K60

Sublime Text 必备插

Markdown Editing 和 Markdown Preview SideBarEnhancements Sublime Text有一个缺点,当你想使用浏览器浏览你的html页面的时候,你需要在你的文件上点击鼠标右键...- 首先,菜单栏里点击`Preferences`点击第一个`Browse Packages`,然后进入HTML-CSS-JS Prettify文件夹,找到`HTMLPrettify.sublime-settings...第三步 : 配置 Emmet还有一个功能,选取相同词,可以一次更改多个词,mac默认快捷键是Canmand+D(记得是,要不然也不会改键)....问题 : Ctags问题 Markdown Editing 和 Markdown Preview 当在 Sublime Text 编写 markdown 文件,直接按浏览器浏览全是乱码,...第三步 : 使用 新建一个 index.md ,编写 markdown 格式的内容 写完以后按F6(自己设置的F6)就会看到Chrome显示解析后的样子.

87510
领券