前言

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

但在粘贴 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. Docker之操作系统Alpine

    简介 图 1.24.2.1 - Apline Linux 操作系统 Alpine 操作系统是一个面向安全的轻型 Linux 发行版.它不同于通常 Linux 发行版,Alpine 采用了 musl l ...

  2. Qt加载天地图离线api开发包/从官网趴地图js代码/费了九牛二虎之力终于搞定

    一.前言说明 网上关于如何趴天地图离线api文件的文章,只有少量的两三篇,而且几乎没有说全和说对,搞得评论也是一片懵逼,这里不行那你不行,思路可以借鉴就是.索性花了点时间,自己研究了如何从官网一步步趴 ...

  3. Qt编写地图综合应用44-悬浮工具条

    一.前言 百度地图内置了悬浮工具条,可以自行开启,包括离线地图也可以开启,用到了DrawingManager这个库,鼠标绘制工具条库,提供鼠标绘制点.线.面.多边形(矩形.圆)的编辑工具条的开源代码库 ...

  4. 用 Ingram 和 masscan 来扫描全网存在漏洞的camera

    前言 大学的时候也写过和Ingram差不多的工具,不过那时候已经玩到没有兴致了,代码已不知道哪里去.没想到在Github看到了这个工具,实现思路和我的几乎一样,互联网就是这么神奇. Ingram的Gi ...

  5. 基于开源IM即时通讯框架MobileIMSDK:RainbowChat v8.1版已发布

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

  6. ThreeJs-12使用着色器加工材质

    一.three框架材质原理与应用 其实three里面所有的材质不管是基础还是点等等之类最终都会编译为shader然后执行,所以如果拿到一个材质我想对某个地方小改一下,那么也是可以用shader来进行修 ...

  7. Diary -「NOI 2022」尘降

      又一次,以这样一种身份来到国赛赛场.起跑线延长出赛场外,我将于此开始又一场已知"无用"的竞技. 虚无中 我的尘埃盲目漂泊摇晃   时间回到数个月前的省选,\(600\) 分的总 ...

  8. 领域驱动设计实战-DDD

    --------------------- 领域驱动(DDD,Domain Driven Design)为软件设计提供了一套完整的理论指导和落地实践,通过战略设计和战术设计,将技术实现与业务逻辑分离, ...

  9. Swagger介绍和应用

    1.什么是swaggerSwagger是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务.简单来说,Swagger是一个功能强大的接口管理工具,并且提供了多种编程语言的 ...

  10. w3cschool-Apache Kafka 教程

    参考https://www.w3cschool.cn/apache_kafka/ Apache Kafka 基础 2021-07-27 16:23 更新 对于大数据,我们要考虑的问题有很多,首先海量数 ...