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

前言

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

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

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

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

解决过程

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

下载 HBuilderX

HBuilderX 官网 >> 点击跳转

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

轻松解决 CSS 代码都在一行的问题_图2

格式化 CSS 代码

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

轻松解决 CSS 代码都在一行的问题_图3

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

轻松解决 CSS 代码都在一行的问题_图4

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

轻松解决 CSS 代码都在一行的问题_图5

后记

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

我的博客园 >> 欢迎来访呦

本文作者:main工作室

本文链接:http://www.cnblogs.com/main-studio/p/17056482.html

版权声明:本文为「main工作室」的原创文章,遵循 CC BY-NC-ND 4.0 版权协议,著作权归作者所有,转载请注明出处!

鼓励博主:如果您觉得文章对您有所帮助,可以点击文章右下角【推荐】一下。您的鼓励就是博主最大的动力!

本文转载于网络 如有侵权请联系删除

相关文章

  • pageoffice使用小结

    pageoffice在文档在线预览,以及对word和excel的操作方面对于开发者来说确实简化了开发,使用pageoffice一年了,从刚开始接触官方文档到后来线预览的这个开发使用过程,对这个产品的使用有了一定的了解,现在来对学习和遇到的问题做个小结,我们使用的是java语言开发,买的是专业版pageoffice文档1官网:http://www.zhuozhengsoft.com/ 2后端api地址:http://www.zhuozhengsoft.com/help/java3/index.html 3前端api地址:http://www.zhuozhengsoft.com/help/js3/index.html 4pageofficev5示例地址:http://localhost:8080/Samples5/index.html(自行部署) 5技术支持文档地址:http://www.zhuozhengsoft.com/Technical/ 6PageOffice专业版5(试用)序列号:DJMTF-HYK4-BDQ3-2MBUC踩坑小结自动生成表格时当表格超过20列以上时,超出了wor

  • 维度模型数据仓库(十七) —— 无事实的事实表

    (五)进阶技术     12.无事实的事实表     本篇讨论一种技术,用来处理源数据中没有度量的需求。例如,产品源数据不包含产品数量信息,如果系统需要得到产品的数量,很显然不能简单地从数据仓库中直接得到。这时就要用到无事实的事实表技术。使用此技术可以通过持续跟踪产品的发布来计算产品的数量。可以创建一个只有产品(计什么数)和日期(什么时候计数)维度代理键的事实表。之所以叫做无事实的事实表是因为表本身并没有度量。     产品发布的无事实事实表 本节说明如何实现一个产品发布的无事实事实表,包括新增和初始装载product_count_fact表。图(五)-12-1显示了跟踪产品发布数量的数据仓库模式(只显示与product_count_fact表有关的表)。图(五)-12-1     执行清单(五)-12-1里的脚本创建产品发布日期视图和无事实事实表。 USEdw; CREATEVIEWproduct_launch_date_dim(product_launch_date_sk,product_launch_date,month_name,month,quarter,year,pr

  • [源码分析] 带你梳理 Flink SQL / Table API内部执行流程

    [源码分析]带你梳理FlinkSQL/TableAPI内部执行流程0x00摘要本文将简述FlinkSQL/TableAPI的内部实现,为大家把"从SQL语句到具体执行"这个流程串起来。并且尽量多提供调用栈,这样大家在遇到问题时就知道应该从什么地方设置断点,对整体架构理解也能更加深入。SQL流程中涉及到几个重要的节点举例如下://NOTE:执行顺序是从上至下,"----->"表示生成的实例类型 * *+----->"leftouterJOIN"(SQLstatement) *| *| *SqlParser.parseQuery//SQL解析阶段,生成AST(抽象语法树),作用是SQL–>SqlNode *| *| *+----->SqlJoin(SqlNode) *| *| *SqlToRelConverter.convertQuery//语义分析,生成逻辑计划,作用是SqlNode–>RelNode *| *| *+----->LogicalProject(RelNode)//Abstrac

  • configparser 在python

    1.创建configparser文件importconfigparser #导入模块 config=configparser.ConfigParser()#注意大小写与() config['DEFAULT']={'Server':'45','Compression':'yes'} config['server']={'deletehq':'0', 'localtime':'20180706', 'port':'22'} config['system']={'market64':'xiadan1.exe', 'market128':'xiadan2.exe', 'market256':'xiadan3.exe'}

  • AI_第一部分 数据结构与算法(3.时间与空间复杂度指标)

    第四阶段我们进行深度学习(AI),本部分(第一部分)主要是对底层的数据结构与算法部分进行详尽的讲解,通过本部分的学习主要达到以下两方面的效果:1.对开发中常见的算法能应用自如,让你在跳槽找工作中“算法题”不再是阻碍你“钱途”的拦路虎。2.我们不需要调参数的调参攻城狮,我们要做正真的自己的AI模型。3.在此立个flag,年底推出两款AI作品【1.作诗AI小牛,2.聊天AI小新新】4.本部分预计40篇左右。最近在忙别的事情,有段时间没有更新啦,今天我又回来了。我们接着上次的话题继续聊,不过本次侧重的是度量的几个维度。1.最好、最坏情况时间复杂度最好情况时间复杂度就是,在最理想的情况下,执行一段代码的时间复杂度。比如一个数组其中有10个元素,我们要找一个元素,当要查找的元素正好是这个数组的第一个元素,这个时候对应的时间复杂度就是最好情况下的时间复杂度。最坏情况时间复杂度就是,在最糟糕的情况下,执行一段代码的时间复杂度。正如上面的例子,若要找的这个元素不在这个列表中或者在最后的一个位置,则我们就需要把整个数组遍历一遍才行,所以这种最糟糕情况下对应的时间复杂度就是最坏情况复杂度。2.平均情况时间

  • HttpClient Timeout设置

    总览本教程主要讨论ApacheHttpClient4框架的timeout设置。如果想学习HttpClient的其他方面,请参考HttpClient教程。使用String参数配置TimeoutsHttpClient有许多参数配置,这些参数都可以使用一种通用的、类似map风格的方式进行设置。以下是三个超时参数配置:DefaultHttpClienthttpClient=newDefaultHttpClient(); inttimeout=5;//seconds HttpParamshttpParams=httpClient.getParams(); httpParams.setParameter( CoreConnectionPNames.CONNECTION_TIMEOUT,timeout*1000); httpParams.setParameter( CoreConnectionPNames.SO_TIMEOUT,timeout*1000); //httpParams.setParameter( //ClientPNames.CONN_MANAGER_TIMEOUT,newLong(

  • lerna入门指南

    一.定位Lernaisatoolthatoptimizestheworkflowaroundmanagingmulti-packagerepositorieswithgitandnpm.多模块管理工具,用来帮助维护monorepoP.S.Lerna是Babel自己日用并开源的工具,见WhyisBabelamonorepo?二.monorepomonorepo(monolithicrepository),与multirepo相对,分别是单代码仓库与多代码仓库(one-repository-per-module)multirepo即传统做法,按模块分为多个代码库,实践中发现一些问题:issue管理混乱,经常有在corerepo提module问题的,需要Closethisandtrackthatchangelog难以整合,需要人工梳理所有变动的仓库,并做整合corerepo版本更新麻烦,需要同步所有module更新其依赖的corerepo版本monorepo把所有相关module都放到一个repo里,每个module独立发布,但使用与该repo统一的版本号(例如Babel和React),is

  • js数组、json、js对象的区别与联系

    最近在敲代码时,遇上了一个关于JS数组的问题,由此引发了关于对象和json的联想,曾经觉得很畅顺的知识点突然模糊了。于是,为了理清这些东西,有了如下这篇文章。觉得没问题的猿们可以当复习,而那些带着疑问的童鞋可以细细看。当然,有任何问题欢迎指出。理清这些问题,第一步当然是找到他们的概念:js所有事物都是对象:字符串、数值、数组、函数…此外,JavaScript允许自定义对象(1)JS数组,常态为vara=[1,2,3]的格式,用文字来形容就是一个有序数列。因为是有序的,所以里面的东西是按序排放。(2)自定义js对象,这里我构造一个和json相似的对象来找到区别,这里写了两种构造方法varperson={key:“value”} varperson=newobject(); person.key=“value”;(3)json:一种存储和交换信息的格式,常态为varjson={“key”:“value”}的格式,这里和js对象不同的是key多了“”区别与联系: 一、json对象与json字符串的联系: json对象varjson={ “key1”:“value1”, “key2”:“val

  • Bootstrap table使用心得---thead与td无法对齐的问题

    当使用工具条中的显示/隐藏列的时候,经常出现表格的列头与内容无法对齐的问题。网上搜到两种处理方法,如下:1.去掉option中的height,完美对齐,但当数据较多的时候,table会自动增加height,显示所有数据而不显示滚动条。2.注释掉如下两行//this.resetHeader(); //padding+=this.$header.outerHeight();复制  完美对齐,但会导致无法冻结表头。这两种结果都是鱼与熊掌不可兼得,被影响的功能也是非常想要的,让小罗我很郁闷。最后怀疑问题的原因应该是列的减少过程中,剩余列设置了宽度,但减少列后要填充剩余宽度时的计算问题。 最后自己采用了如下方式,供大家参考:  不设置其中一列的宽度,使其自动填充,如下代码<thead> <tr> <thdata-field="Code"data-width="105px">编号</th> <thdata-field="Name"data-switchable="false&

  • BZOJ 1083: [SCOI2005]繁忙的都市【Kruscal最小生成树裸题】

    1083:[SCOI2005]繁忙的都市TimeLimit:10Sec  MemoryLimit:162MBSubmit:2925  Solved:1927Description  城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造。城市C的道 路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条道路相连 接。这些道路是双向的,且把所有的交叉路口直接或间接的连接起来了。每条道路都有一个分值,分值越小表示这 个道路越繁忙,越需要进行改造。但是市政府的资金有限,市长希望进行改造的道路越少越好,于是他提出下面的 要求:1.改造的那些道路能够把所有的交叉路口直接或间接的连通起来。2.在满足要求1的情况下,改造的 道路尽量少。3.在满足要求1、2的情况下,改造的那些道路中分值最大的道路分值尽量小。任务:作为市规划 局的你,应当作出最佳的决策,选择那些道路应当被修建。Input  第一行有两个整数n,m表示城市有n个交叉路口,m条道路。接下来m行是对每条道路的描述,u,v,c表示交叉 路口u和v之间有道路相连,分值为c。(

  • 练习正则中,最难以理解的?

    贪婪模式(默认) 非贪婪模式 ?: 不使用?:的情况下: 达到同样的效果,但代码更精简:   ?= 只是把:换成了=,但捕获的结果里已经不包含括号中的样式: ?! 继续把=换成了!,效果相反: 版权声明: 本文为博主网无忌原创文章,欢迎转载,但请务必标注原文链接。 本文链接: https://www.cnblogs.com/netWild/p/16619392.html

  • c#调用GDAL判断图片文件是否损坏

    问题缘起 有一次去北京给客户交航飞影像数据,客户那边用一个软件跑了一下所有的影像发现有几十个.tif文件打不开,这下把我们急的,就差最后一步还是出错了,我们也没没带原始数据盘,没办法还的回家拿数据再来一次。这时候同事就想能不能自己写一个程序看一下是否影像有损毁,我分析了一下,大体上有三种解决方案。 通过文件头文件判断 这个方案否定了,通过文件头不能真正的判断是否损坏,而且不同格式的文件头还不一样。 通过代码加载图片 这个方案也否定了,超过几G的大文件会出现内存过载的情况。 使用专业的GDAL图像库进行加载 GDAL使用c++写的跨平台的开源栅格空间数据转换库(也支持矢量数据),很多企业级的GIS软件例如arcgis,以及开源的QGIS读取影像都使用这个库。我们只需使用GDAL加载数据就可以判断文件是否加载正常即可。 c#调用GDAL c#引用GDAL 解决初始化出现异常:OSGeo.GDAL.GdalPINVOKE”的类型初始值设定项引发异常。 使用nuget方式引用GDAL就可以解决上面的异常 install-packageGDAL install-packageGDAL.Nati

  • 【wqy】数论(未完

    又双叒叕来清理数论== 整除 base 定义: 定义:对于两个正整数\(p\)和\(q\),若存在正整数\(x\),满足\(px=q\),则称\(p\)整除\(q\),记作\(p|q\)。 整除的相关性质: 自反性:\(p|p\) 传递性:\(p|q,q|r\top|r\) 反对称性:\(p|q,q|p\top=q\) 带余除法(欧几里得除法) 定义:对于正整数\(a,b\),存在唯一一对整数\((q,r)\),满足\(a=bq+r\)且\(0\ler<b\)。称\(q\)为商,\(r\)为余数 存在性:存在\(a\Rightarrow\)存在\(a+1\) \(a+l=bq+r+1\) 唯一性:\(a=bq_1+r_1=bq_2+r_2\) \(b(q_1-q_2)=r_2-r_1\Rightarrowb|r_2-r_1\)而\(0\ler_1,r_2<|b|\)$\thereforer_2-r_1=0\Rightarrow$唯一 取整 下取整:?=max{?∈?|?≤?} 上取整:?=min{?∈?|?≥?} 取模 对于正整数?,?,定义模运算为\(a\mod\b=a

  • 第9章 验证码的识别

    图形验证码的识别 滑动验证码的识别 点触验证码的识别 宫格验证码的识别              

  • 关于C++中字符串与数字的互相转换

    方法搬自博客: Qt数据类型转换 侵删   1.把QString转换为double类型 //法一: QStringstr="123.45"; doubleval=str.toDouble();//val=123.45 //法2:很适合科学计数法形式转换 boolok; doubled; d=QString("1234.56e-02").toDouble(&ok);//ok=true;d=12.3456.复制 2.把QString转换为float形 法1: QStringstr="123.45"; floatd=str.toFloat();//d=123.45 法2: QStringstr="R2D2"; boolok; floatd=str.toFloat(&ok);//转换是被时返回0.0,ok=false;复制 3.把QString形转换为整形  1.转换为十进制整形  注意:基数默认为10。当基数为10时,并且基数必须在2到36之间。如果基数为0,若字符串是以0x开头的就会转换为16进制,若以0开头就转换为八进制,否则就转

  • vue项目优化

    cross-env包环境 静态文件分离 require是置顶的 双斜杠 //baidu.com可以是http也可以是https require.ensure打包到不同的文件中 项目文件路径规范 静态文件(不需要打包的文件)放在static路径下,同时静态文件使用es5语法,css原生语法 感谢您的阅读,如果文中有任何技术上的错误或不妥,烦请留言指出,我会尽快更正。

  • 九宫重排_康拓展开_bfs

     历届试题九宫重排  时间限制:1.0s 内存限制:256.0MB        问题描述   如下面第一个图的九宫格中,放着1~8的数字卡片,还有一个格子空着。与空格子相邻的格子中的卡片可以移动到空格中。经过若干次移动,可以形成第二个图所示的局面。     我们把第一个图的局面记为:12345678.  把第二个图的局面记为:123.46758  显然是按从上到下,从左到右的顺序记录数字,空格记为句点。  本题目的任务是已知九宫的初态和终态,求最少经过多少步的移动可以到达。如果无论多少步都无法到达,则输出-1。 输入格式   输入第一行包含九宫的初态,第二行包含九宫的终态。 输出格式   输出最少的步数,如果不存在方案,则输出-1。 样例输入 12345678.123.46758 样例输出 3 样例输入 13524678.46758123. 样例输出 22     拿到这个题的时候没什么思路,之前也做过bfs的题,最大的问题在于状态的保存,后来看到有个编码

  • php-amqplib库操作RabbitMQ

    RabbitMQ基本原理 首先,建议去大概了解下RabbitMQ(以下简称mq)的基本工作原理,可以参考这篇文章最主要的几个对象如下 对象名称  borker 相当于mqserver channel 通道或者频道 exchange 交换机 queue 队列 vhost 虚拟主机(项目队列隔离使用) 这几个对象在上面的文章说描述的已经非常清楚,这里不要叙述了。 安装操作库 在你的项目目录下的composer.json文件中增加下面内容 { "require":{ "php-amqplib/php-amqplib":"2.7.*"//增加这行 } }复制 然后接着执行composerupdatephp-amqplib/php-amqplib。更加方便的做法是如果你的项目已经有了composer.json那么执行执行composerrequirephp-amqplib/php-amqplib便可以直接进行安装了 示例演示 首先需要定义交换机、队列以及路由关键字(routingkey)下面

  • 3 多字母代替密码

    单表代替密码的缺点是通过分析每个字母出现的频率可以破解出密码,那么如果我们把多个字母当成一个单元整体替换,那么这种概率就会小很多。 比如最著名的Playfair密码: 一、首先确定一个由加密词所构成的一个5*5的加密矩阵,比如我们使用monarchy,  M O N A R C H Y B D E F G I/J K L P Q S T U V W X Z           这个矩阵的规则是: 1.先将加密词中的不重复字母填充到矩阵的开头; 2.按照字母顺序将剩余字母填充进矩阵,I和J当成同一个字母处理。 二、对明文进行加密,比如加密单词balloon, 1,将明文拆成字母对,如果该字母对是相同的字母,则在他们之间填充一个固定的字母,这里我们使用x,那么上面的单词就变成了如下的字母对: ba-lx-lo-on 2,对上一步奏的字母对进行加密: a),落在矩阵同一行的明文字母对由其右边的字母代替,每行最右边的那个字母就使用该列最左边的字母代替,比如AR->RM b),落在矩阵同一列的明文字母对

  • TCP/IP——OSI模型

    上周基本上都在参加面试了,自己的校招也基本结束了。后期会真正根据自己的学习偶尔写点博客了,当作自己的学习笔记吧 1.OSI模型 OSI(OpenSystemInterconnect),开放式系统互联,是ISO(国际标准化组织)在1985年研究的网络互连模型。 (1)应用层(ApplicationLayer):为应用程序提供服务 (2)表示层(PresentationLayer):数据格式的转化,数据的加密功能 (3)会话层(SessionLayer):建立,管理和维护会话 (4)运输层(TransportLayer):建立,管理和维护端到端的连接 (5)网络层(NetworkLayer):IP的选址以及路由的选择 (6)数据链路层(DataLinkLayer):提供介质的访问和链路的管理工作 (7)物理层(PhysicalLayer):最终信号的传输,比特流。规定了电平,速度和电缆针脚等信息   2.各个层次的主要协议 。。。。。

  • Jsoncpp 使用以及 读写中文汉字unicode乱码解决

    遍历jsonvalue #include"json.h" typedefJson::WriterJsonWriter; typedefJson::ReaderJsonReader; typedefJson::ValueJsonValue; voidprint(JsonValuev) { JsonValue::Membersmem=v.getMemberNames(); for(autoiter=mem.begin();iter!=mem.end();iter++) { cout<<*iter<<"\t:"; if(v[*iter].type()==Json::objectValue) { cout<<endl; print(v[*iter]); } elseif(v[*iter].type()==Json::arrayValue) { cout<<endl; autocnt=v[*iter].size(); for(autoi=0;i<cnt;i++) { print(v[*iter][i]); } } elseif(v[*ite

相关推荐

推荐阅读