前言

最近在做博客园的界面美化,用的是园内大佬的开源项目,配置超级简单,只需要复制粘贴代码就好啦。

但在粘贴 CSS 代码时遇到一个问题,那就是所有代码都挤在了一行,没有一点排板的样子(如下图),对我来说是不能忍受的,便决定解决这一问题。

解决过程

经过一番网上冲浪后,我找到了解决的方法,解决了这个问题,在这记录一下。

这里用到了一款为前端开发者服务的通用 IDE——HBuilderX。

下载 HBuilderX

HBuilderX 官网 >> 点击跳转

进入官网后,根据自己的操作系统下载即可,在这推荐下载正式版。

格式化 CSS 代码

1.打开下载的 HBuilderX 文件夹,双击打开“ HBuilderX.exe ”应用程序。

2.新建一个以 .css 后缀的文件,将 CSS 代码拷贝到新建的文件中。

3.使用快捷键 Ctrl+K 即可格式化 CSS 代码。

后记

至此,CSS 代码的排板便整齐划一啦。

使用 HBuilderX 轻松解决 CSS 代码在一行的问题的更多相关文章

  1. 轻松解决 CSS 代码都在一行的问题

    前言 最近在做博客园的界面美化,用的是博客园[guangzan]的开源项目,配置超级简单,只需要复制粘贴代码就好啦. 但在粘贴 CSS 代码时遇到一个问题,那就是所有代码都挤在了一行,没有一点排板的样 ...

  2. 怎么用一行代码解决CSS各种IE各种兼容问题

    用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题. 在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整.现在百度与谷歌都有了一行解决这种兼容性的代码了 ...

  3. 一行css代码搞定响应式布局

    在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...

  4. 一行 CSS 代码的魅力

    之前在知乎看到一个很有意思的讨论 一行代码可以做什么? 那么,一行 CSS 代码又能不能搞点事情呢? CSS Battle 首先,这让我想到了,年初的时候沉迷的一个网站 CSS Battle .这个网 ...

  5. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  6. 如何写出优雅的CSS代码 ?(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  7. 如何写出优雅的css代码 ?

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  8. Emmet:HTML/CSS代码快速编写神器

    本文来源:http://www.iteye.com/news/27580    ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Em ...

  9. CSS代码原则

    css的团队合作规则以及怎样写出高性能的css代码. 一.使用Reset但并非全局Reset 同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注 ...

  10. 精简CSS代码

    精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-b ...

随机推荐

  1. 绞尽脑汁终于搞定/天地图标注点marker旋转/任意角度旋转/无需引入其他框架

    一.前言说明 在其他地图组件中,标注点marker都是可以设置旋转角度的,这个功能其实非常实用,比如飞机移动轨迹,就是需要旋转飞机头飞行,轮船轨迹移动也是,百度地图和腾讯地图是通过调用setRotat ...

  2. 如何在cmake中添加lib库

    如何在cmake中添加lib库: 生成lib文件 libhello.a add_library(hello hello.cxx) # 在top level添加子目录 add_subdirectory( ...

  3. 在Android Studio中如何使用真机连接并调试App?

    前提:adb环境已经配置 手机端: 1.打开手机开发者权限,"设置" 中找到 "版本号",连续多次点击,会提示打开"开发者".我的是 &qu ...

  4. Android保活从入门到放弃:乖乖引导用户加白名单吧(附7大机型加白示例)

    1.引言 IM在Android上的保活问题经常在即时通讯网的论坛和技术群里被讨论,自从Android 8.0后系统大大降低了后台运行应用的保活容忍度(详见<Android P正式版即将到来:后台 ...

  5. IM扫码登录技术专题(四):你真的了解二维码吗?刨根问底、一文掌握!

    本文引用了ELab团队.腾讯大讲堂两个公众号分享的文章内容,引用内容见文末参考资料,感谢原作者的无私分享. 1.引言 对于市面上主流的IM来说,跟二维码有关的功能,比如扫码加好友.扫码登陆.扫码加群等 ...

  6. 🎉 夜莺监控突破一万 star,这是汗水,也是鞭策

    夜莺监控项目在上周突破了一万 star,算是一个小小的里程碑.在开源领域,通常把 star 数量看作项目的繁荣指标,star 数量越多,说明愿意关注你的人越多.这个数字的背后,是一群人对你的鼓励.认可 ...

  7. [转载]「服务」WCF中NetNamedPipeBinding的应用实例

    「服务」WCF中NetNamedPipeBinding的应用实例 WCF中有很多种绑定,根据官方的说法,NetNamedPipeBinding是适用于同一台主机中不同进程之间的通信的. 今天终于实现了 ...

  8. MAC安装redis的简单方法

    part 1:安装redis1.官网下载压缩包https://redis.io/download or brew install redis(太慢了-)我此处选的法一,先去官网上下载包,在解压使用. ...

  9. 第五章 非对称加密算法--DH--RSA

    13.1.DH 非对称算法的基石 仅能用于密钥分配,不能用于加解密数据,一般加密数据用AES 密钥长度:512~1024中的64的整数倍 双方各有自己的密钥对 13.2.RSA 最经典的非对称加密算法 ...

  10. biancheng-go语言概要总结

    http://c.biancheng.net/golang/intro/ Go语言总结 1.Go 使用编译器来编译代码.最佳的平衡:快速编译,高效执行,易于开发.因为Go语言没有类和继承的概念,但是它 ...