前言

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

但在粘贴 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. 盘点5个常用的.Net依赖注入框架!

    盘点5个常用的依赖注入框架,特别是前面2个. 1.Microsoft.Extensions.DependencyInjection 这是.Net Core框架本身内置集成的,我们只需引入Microso ...

  2. Qt/C++音视频开发71-指定mjpeg/h264格式采集本地摄像头/存储文件到mp4/设备推流/采集推流

    一.前言 用ffmpeg采集本地摄像头,如果不指定格式的话,默认小分辨率比如640x480使用rawvideo格式,大分辨率比如1280x720使用mjpeg格式,当然前提是这个摄像头设备要支持这些格 ...

  3. Qt音视频开发45-音视频类结构体参数的设计

    一.前言 视频监控内核组件重构和完善花了一年多时间,整个组件个人认为设计的最好的部分就是各种结构体参数的设计,而且分门别类,有枚举值,也有窗体相关的结构体参数,解码相关的结构体参数,同时将部分常用的结 ...

  4. EPPlus使用方法---Excel处理我觉得超级好用

    目前只是用到导出Excel功能,导出大规模数据量速度也很快,而且比较容易操作(最起码导出是,暂时没有用到处理已存在的excel功能,有人说NPOI也好用,试了一下,最起码导出这个不如EPPlus    ...

  5. Ubuntu系统编译opencv4.0以上以及opencv_contrib

    一.安装依赖    sudo apt install build-essential cmake libtbb2 libttb-dev libgtk-3-dev    sudo apt install ...

  6. [转]C# 组合查询条件

    在我们开发过程中经常会遇见一些通过条件获取数据的功能,比如说获取我们的用户信息,查询输入框有用户姓名,部门,入职年份等等,但查询时可能只输入一个条件或多个条件,像这种不确定的查询时,我们应该如何处理. ...

  7. 即时通讯技术文集(第31期):IM开发综合技术合集(Part4) [共13篇]

    为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第31 期. ​[- 1 -] IM消息ID技术专题(一):微信的海量IM聊天消息序列号生成实践 ...

  8. IM开发干货分享:如何优雅的实现大量离线消息的可靠投递

    1.点评 IM聊天消息的可靠投递,是每个线上产品都要考虑的IM热点技术问题. IM聊天消息能保证可靠送达,对于用户来说,就好比把钱存在银行不怕被偷一样,是信任的问题.试想,如果用户能明显感知到聊天消息 ...

  9. 基于开源IM即时通讯框架MobileIMSDK:RainbowChat v10.0版已发布

    关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架,超轻量级.高度提炼,一套API优雅支持UDP .TCP .WebSocket 三种协议,支持iOS.A ...

  10. 基于开源IM即时通讯框架MobileIMSDK:RainbowChat-iOS端v5.0版已发布

    关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架,超轻量级.高度提炼,一套API优雅支持UDP .TCP .WebSocket 三种协议,支持iOS.A ...