用browser-sync
或者lite-server
来监控文件的改变,当文件改变时,就自动刷新浏览器。
用node-sass
来实时编译scss文件。
用parallelshell
来异步执行npm script命令。
先安装上述的node工具
npm install -g browser-sync
一、首先新建npm的package.json
package.json
一般有如下的结构和选项
{
"name": "about",
"version": "1.0.0",
"scripts": {
},
"devDependencies":{
}
}
devDependencies
代表依赖的node工具,scripts
代表npm scripts命令。
"scripts": {
"scss": "node-sass -w scss -o css",
"serve": "browser-sync start --server --files \"css/*.css, *.html\"",
"dev": "parallelshell \"npm run serve\"
for循环在Django模板中是常用的,有时候需要对循环的末尾的对象给予特殊的对待,例如下图
下图中的标示部分,循环列表的最后一个条目不需要下边框,于是乎就要在模板中加一个判断,即如果是最后一个条目,就不要这个效果。
forloop.last
表示当前for中的最后一个,类似的还有forloop.counter
表示以1开头的forloop当前所在位置,forloop.first
表示当前for中的第一个,forloop.parentloop
表示父级循环中的当前位置。
参考: http://stackoverflow.com/questions/837237/django-template-for-loop-last-iteration
https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#for
是什么意思?看下图
图片中的标示部分,百褶裙后面明明还有空隙,表明他的后面是还可以容纳几个文字的。但是,容纳牛仔裙背心裙等六个字却不足够。于是乎,有必要像图片中那样将牛仔裙背心裙等这个词条整体在下一行显示,就如图中的所示一样,以正确的方式。
怎么做到?
word-break: keep-all;
值得注意的是图中的词条并不是简单的以空格来进行隔开,而是每一个都容纳在的各个span标签和a标签里面。
两端对齐当然是针对多行文本,何来单行文本两端对齐之说?是有的,请看下面的这个图。
.fulljustify {
width: 100px;
text-align: justify;
}
.fulljustify:after {
content: "";
display: inline-block;
width: 100%;
}
这种办法实际上就是利用伪元素在单行文本的底下添加一行与之同宽且显示为空的内容,于是乎单行变成了多行,居中对齐也就生效了。达到了这样的效果,即即便是字数不一样,只要是宽度相同且足够,那么在不同位置的单行文本也可以左右文本对齐。
另外要注意,由于单行文本的底下实际上增加了一行文本,这就导致其高度变高,如果其高度超过了其父元素,当堆积起来时可能就会导致相应的显示问题,这时单行文本的父级元素的高度需要给够。