安固途径

知识来源于感觉和经验

word-break设置换行时词条的显示

2016-09-23, 星期五|
样式

是什么意思?看下图

图片中的标示部分,百褶裙后面明明还有空隙,表明他的后面是还可以容纳几个文字的。但是,容纳牛仔裙背心裙等六个字却不足够。于是乎,有必要像图片中那样将牛仔裙背心裙等这个词条整体在下一行显示,就如图中的所示一样,以正确的方式。

怎么做到?

word-break: keep-all;

值得注意的是图中的词条并不是简单的以空格来进行隔开,而是每一个都容纳在的各个span标签和a标签里面。

...
阅读全文

单行文本如何两端对齐

2016-09-23, 星期五|
前端样式

两端对齐当然是针对多行文本,何来单行文本两端对齐之说?是有的,请看下面的这个图。

.fulljustify {
  width: 100px;
  text-align: justify;
}
.fulljustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

这种办法实际上就是利用伪元素在单行文本的底下添加一行与之同宽且显示为空的内容,于是乎单行变成了多行,居中对齐也就生效了。达到了这样的效果,即即便是字数不一样,只要是宽度相同且足够,那么在不同位置的单行文本也可以左右文本对齐。

另外要注意,由于单行文本的底下实际上增加了一行文本,这就导致其高度变高,如果其高度超过了其父元素,当堆积起来时可能就会导致相应的显示问题,这时单行文本的父级元素的高度需要给够。

参考:http://blog.vjeux.com/2011/css/css-one-line-justify.html

...
阅读全文

含中文注释SASS编译不通过?有办法

2016-09-22, 星期四|
前端开发

第一用scss文件编译成css文件就遇到了坑,竟然提示含有不明来物,定位到他不通过的行就是包含有中文注释的某行。当然知道是SASS程序的编码问题,当年python2就是经常出现这样的情况,见惯不怪的。于是乎百度之,发现有国人已经早先遇到该问题并且轻易解决,果然可以用该方法解决问题,赞叹之余,保存之,以便后来人。

解决的办法是打开目录"C:\Ruby23\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb",修改engine.rb文件,在所有require之后,添加一行代码如下

Encoding.default_external = Encoding.find('utf-8')

保存吧!再来。

另外国人开发的koala有GUI的开源编译工具可以无bug,直接编译吧。

参考:http://www.bkjia.com/HTML_CSS/861470.html

...
阅读全文

TypeScript怎么使用tsd

2016-09-19, 星期一|
前端开发

1.利用npm安装tsd

>npm install -g tsd

2.以jquery为例,利用tsd安装jquery.d.ts

>tsd install jquery --save

3.用VSCode打开.ts文件,添加tsd文件引用

/// <reference path="jquery.d.ts" />

参考https://github.com/DefinitelyTyped/DefinitelyTyped#usage

...
阅读全文

Django服务非app内静态文件

2016-09-19, 星期一|
Django

有一些静态文件是共用的,比如bower_components,但是其自身不是一个app,Django提供了一个设置STATICFILES_DIRS是专门服务这类静态文件的。

This setting defines the additional locations the staticfiles app will traverse if the FileSystemFinder finder is enabled, e.g. if you use the collectstatic or findstatic management command or use the static file serving view.

假设在项目根目录下安装bower_components

>bower install bootstrap

设置

STATIC_URL = '/static/'
STATIC_ROOT = 'assets'

STATICFILES_DIRS = [
     os.path.join(BASE_DIR, "bower_components"),
]

set

...
阅读全文