gulp 在收集 Django 静态文件的一点应用

2016-11-01, 星期二 |
Django解决方案前端插件

Django 有一点特别,一点是URL需要配置,一点是文件目录结构比较特别。

当前端部分采用如下的目录结构时,Django 就需要收集静态文件和模板文件到相应的目录,可以使用自动构建工具gulp来帮助我们做这些事。

C:.
├─dlt
│  ├─css
│  ├─font
│  ├─img
│  ├─js
│  └─scss
├─five
│  ├─css
│  ├─font
│  ├─img
│  ├─js
│  └─scss
|....
├─query
│  ├─css
│  ├─font
│  ├─img
│  ├─js
│  └─scss
├─six
│  ├─css
│  ├─font
│  ├─img
│  ├─js
│  └─scss
└─three
    ├─css
    ├─font
    ├─img
    ├─js
    └─scss

主要就是3件事,一是静态文件收集,二是模板文件收集,三是模板文件内容中关于静态文件路径的修改。

利用npm init来新建项目的package.json文件

> npm init

利用npm install来安装g

当按钮的边框大小变动时,如何保证不变形

2016-10-22, 星期六 |
解决方案总结前端

在编写网页时,在按钮悬停时,为了增强交互,通常会高亮边框,有时也会增加边框的厚度,例如按钮的边框本来是1px的浅色,在悬停后边框变成了2px的深色。这时候按钮的大小就会发生变化,导致变形。

例如下面的两张图片

普通图片

高显图片

这时应该分两种情况讨论,一种是按钮的大小给了一个固定值,一种是按钮大小为auto。

给了固定值的很好说,将 box-sizing 设置为 border-box 即可,按钮的大小就不会变化。

box-sizing: border-box;

按钮大小为auto的,如果border的宽度变大,则应该减小相应的padding值,这样也可以保证按钮的大小不会变化。

.btn{
    background-color: #fff;
    color: #666666;
    border: 1px solid #ccc;
    padding: 5px;

    &:hover{
        padding: 4px;
        color: red;
        border: 2px solid red;
    }
}

对于不确定大小的按钮,通常

Windows启动服务停止服务等

2016-10-19, 星期三 |
总结windows

例如停止服务mysql

用管理员打开cmd,执行

> net stop mysql

如图

net-stop

同样,启动mysql

> net start mysql

这里主要需要知道要操作的服务的名称,当一个服务被创建的时候就应该记住,选择一个好记的名字。如果忘记了所创建的服务的名称,可以利用windows的GUI服务管理工具。

HTML5 Video 标签播放mp4格式视频示例

2016-10-18, 星期二 |
短说前端

有一个可以在线生成代码的网站,可以参考

在线生成Video标签示例网站

<video autoplay="" height="500" width="100%" controls>    
    <source src="http://v.stu.126.net/mooc-video/nos/mp4/2015/06/04/1632075_shd.mp4?ak=204515f28ecde772937b7a97c806a6901852d0df7ab2d8af0679e64181af0d9561c6f2491613cf3c608a1139c44088fbf64f1707b3da9ebb9f2357f6c5e87d0e0015e48ffc49c659b128bfe612dda086d65894b8ef217f1626539e3c9eb40879c29b730d22bdcadb1b4f67996129275fa4c38c6336120510aea1ae1790819de86e0fa3e09eeabea1b068b3d9b9b6597acf0c219eb000a69c12ce9

听说npm有国内的镜像

2016-10-13, 星期四 |
秘诀解决方案前端

前端开发,安装依赖包的时候,等待了半个多小时,都没有进展,是怎么回事啊?

听说npm有国内的镜像

> npm config set registry https://registry.npm.taobao.org

不知道行不行,试一试吧。

参考:https://my.oschina.net/osccreate/blog/752976