使用 HBuilderX 轻松解决 CSS 代码在一行的问题
前言
最近在做博客园的界面美化,用的是园内大佬的开源项目,配置超级简单,只需要复制粘贴代码就好啦。
但在粘贴 CSS 代码时遇到一个问题,那就是所有代码都挤在了一行,没有一点排板的样子(如下图),对我来说是不能忍受的,便决定解决这一问题。
解决过程
经过一番网上冲浪后,我找到了解决的方法,解决了这个问题,在这记录一下。
这里用到了一款为前端开发者服务的通用 IDE——HBuilderX。
下载 HBuilderX
HBuilderX 官网 >> 点击跳转
进入官网后,根据自己的操作系统下载即可,在这推荐下载正式版。
格式化 CSS 代码
1.打开下载的 HBuilderX 文件夹,双击打开“ HBuilderX.exe ”应用程序。
2.新建一个以 .css
后缀的文件,将 CSS 代码拷贝到新建的文件中。
3.使用快捷键 Ctrl+K
即可格式化 CSS 代码。
后记
至此,CSS 代码的排板便整齐划一啦。
使用 HBuilderX 轻松解决 CSS 代码在一行的问题的更多相关文章
- 轻松解决 CSS 代码都在一行的问题
前言 最近在做博客园的界面美化,用的是博客园[guangzan]的开源项目,配置超级简单,只需要复制粘贴代码就好啦. 但在粘贴 CSS 代码时遇到一个问题,那就是所有代码都挤在了一行,没有一点排板的样 ...
- 怎么用一行代码解决CSS各种IE各种兼容问题
用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题. 在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整.现在百度与谷歌都有了一行解决这种兼容性的代码了 ...
- 一行css代码搞定响应式布局
在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...
- 一行 CSS 代码的魅力
之前在知乎看到一个很有意思的讨论 一行代码可以做什么? 那么,一行 CSS 代码又能不能搞点事情呢? CSS Battle 首先,这让我想到了,年初的时候沉迷的一个网站 CSS Battle .这个网 ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- 如何写出优雅的CSS代码 ?(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- 如何写出优雅的css代码 ?
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- Emmet:HTML/CSS代码快速编写神器
本文来源:http://www.iteye.com/news/27580 ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Em ...
- CSS代码原则
css的团队合作规则以及怎样写出高性能的css代码. 一.使用Reset但并非全局Reset 同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注 ...
- 精简CSS代码
精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-b ...
随机推荐
- Unity 3D简单使用C#脚本,脚本的生命周期
Unity 3D简单使用 新建项目->层级里右键->创建空对象改名Test 项目里右键创建C#脚本Test 双击脚本Test(所有脚本都会继承MonoBehaviour类),在Start( ...
- [转]fatal: remote error: The unauthenticated git protocol on port 9418 is no longer support问题解决
背景 因为居家办公,把代码从远程clone下来之后,发现使用npm install一直失败. 提示的错误:fatal: remote error: The unauthenticated git pr ...
- Solution -「AGC 020F」Arcs on a Circle
\(\mathscr{Description}\) Link. 在一个周长为 \(c\) 的圆周上放置长度分别为 \(l_1,l_2,\cdots,l_n\) 的弧,每条弧的位置独立均匀随机. ...
- windows平台下,web与app交互方式探索
前言 web与app孰优孰劣暂且不争论,也许一方永远代替不了另一方.一个系统有可能同时包含web和app:web和app紧密配合下,才能给用户更好的体验.web如何将信息传达给app?这就是本文要探索 ...
- CDS标准视图:技术对象检验级别 I_TechObjInspectionLevelCode
视图名称:技术对象检验级别 I_TechObjInspectionLevelCode 视图类型:基础 视图代码: 点击查看代码 @AbapCatalog: { sqlViewName: 'ITECHO ...
- TCP的“三次握手”和“四次挥手”
转载:链接1 链接2 TCP connection 客户端与服务器之间数据的发送和返回的过程当中需要创建一个叫TCP connection的东西:由于TCP不存在连接的概念,只存在请求和响应,请求和响 ...
- Educational Codeforces Round 168 (Rated for Div. 2)
题目链接:Educational Codeforces Round 168 (Rated for Div. 2) 总结:题目较简单,但是发挥很一般.A,B题一直读假题,卡了半个小时:C题用char存i ...
- oracle goldengate for downstreams 配置--for 数据库参数配置和ogg进程参数配置
1.整体数据库配置三个源端和一个downstream下游抽取数据库配置:alter system set enable_goldengate_replication=TRUE;Alter databa ...
- SQL注入之布尔盲注
SQL注入之布尔盲注 一.布尔盲注原理 布尔盲注是一种基于布尔逻辑的SQL注入攻击技术,其核心原理是通过构造特定的SQL查询语句,利用应用程序对查询结果的不同响应(通常是真或假)来逐步推断数据库中的信 ...
- vue-element-admin改为从后台获取菜单
一.修改文件\src\router\index.js 文件的asyncRoutes清理为 export const asyncRoutes = [ { path: '*', redirect: '/4 ...