step进度条可以用css两端对齐

step进度条

实现的方法很简单可以用自己熟悉的text-align:justify;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .step{
            width:300px;
            height:30px;
            margin:20px auto 0;
            text-align: justify;
        }
        .step i{
            width:20px;
            height:20px;
            background: red;
            color:#fff;
            text-align: center;
            display: inline-block;
        }
        .step:after{content:"";}
        .step:after,
        .step b{
            display: inline-block;
            position: relative;
            top:-25px;
            *top:-9px;
            width:100%;
            height:1px;
            overflow: hidden;
            font-size:0;
            line-height:0;
            background-color: #ccc;
            z-index: -1;
            *zoom:1;
        }
    </style>
</head>
<body>


<div class="step">
    <i>1</i>
    <i>2</i>
    <i>3</i>
    <i>4</i>
    <i>5</i>
</div>


</body>
</html>

安装 Express

express 是 Node.js 上最流行的 Web 开发框架，正如他的名字一样，使用它我们可以快速的开发一个 Web 应用。我们用 express 来搭建我们的博客，打开命令行，输入：

1
$ npm install -g express-generator

安装 express 命令行工具，使用它我们可以初始化一个 express 项目。

生成一个项目

在命令行中输入：

1
2
$ express -e yejunfeng
$ cd yejunfeng && npm install

执行结果中会显示生成的文件并提示后续的命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
E:\>express -e yejunfeng

   create : yejunfeng
   create : yejunfeng/package.json
   create : yejunfeng/app.js
   create : yejunfeng/public
   create : yejunfeng/routes
   create : yejunfeng/routes/index.js
   create : yejunfeng/routes/users.js
   create : yejunfeng/public/images
   create : yejunfeng/public/javascripts
   create : yejunfeng/views
   create : yejunfeng/views/index.ejs
   create : yejunfeng/views/error.ejs
   create : yejunfeng/public/stylesheets
   create : yejunfeng/public/stylesheets/style.css
   create : yejunfeng/bin
   create : yejunfeng/bin/www

   install dependencies:
     > cd yejunfeng && npm install

   run the app:
     > SET DEBUG=yejunfeng:* & npm start

进入生成的目录并安装依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
E:\>cd yejunfeng && npm install

debug@2.2.0 node_modules\debug
└── ms@0.7.1

morgan@1.6.1 node_modules\morgan
├── on-headers@1.0.1
├── basic-auth@1.0.3
├── depd@1.0.1
└── on-finished@2.3.0 (ee-first@1.1.1)

cookie-parser@1.3.5 node_modules\cookie-parser
├── cookie@0.1.3
└── cookie-signature@1.0.6

serve-favicon@2.3.0 node_modules\serve-favicon
├── ms@0.7.1
├── etag@1.7.0
├── fresh@0.3.0
└── parseurl@1.3.0

body-parser@1.13.3 node_modules\body-parser
├── bytes@2.1.0
├── content-type@1.0.1
├── depd@1.0.1
├── on-finished@2.3.0 (ee-first@1.1.1)
├── qs@4.0.0
├── iconv-lite@0.4.11
├── http-errors@1.3.1 (statuses@1.2.1, inherits@2.0.1)
├── type-is@1.6.9 (media-typer@0.3.0, mime-types@2.1.7)
└── raw-body@2.1.4 (unpipe@1.0.0, iconv-lite@0.4.12)

express@4.13.3 node_modules\express
├── escape-html@1.0.2
├── array-flatten@1.1.1
├── path-to-regexp@0.1.7
├── merge-descriptors@1.0.0
├── content-type@1.0.1
├── methods@1.1.1
├── utils-merge@1.0.0
├── content-disposition@0.5.0
├── range-parser@1.0.3
├── serve-static@1.10.0
├── vary@1.0.1
├── depd@1.0.1
├── cookie@0.1.3
├── cookie-signature@1.0.6
├── fresh@0.3.0
├── etag@1.7.0
├── on-finished@2.3.0 (ee-first@1.1.1)
├── parseurl@1.3.0
├── qs@4.0.0
├── finalhandler@0.4.0 (unpipe@1.0.0)
├── accepts@1.2.13 (negotiator@0.5.3, mime-types@2.1.7)
├── type-is@1.6.9 (media-typer@0.3.0, mime-types@2.1.7)
├── proxy-addr@1.0.8 (forwarded@0.1.0, ipaddr.js@1.0.1)
└── send@0.13.0 (destroy@1.0.3, ms@0.7.1, statuses@1.2.1, mime@1.3.4, http-errors@1.3.1)

E:\yejunfeng>

设置环境变量并启动服务器,在命令行中执行下列命令

1
SET DEBUG=yejunfeng:* & npm start

执行完成后会显示

1
yejunfeng:server Listening on port 3000 +0ms

在浏览器里访问 http://localhost:3000 就可以显示欢迎页面

1
2
Express
Welcome to Express

刚才我们就用express生成器生成了一个使用ejs模板的示例工程。

把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.

用gulp-css-spriter很简单。

第一步: 在某个文件夹用shitf+鼠标右键

第一步

第二步: npm install gulp-css-spriter

https://www.npmjs.com/package/gulp-css-spriter (官网gulp插件)

第三步:在gulpfile.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp = require('gulp');
var spriter = require('gulp-css-spriter');
 
gulp.task('css', function() {
    return gulp.src('./css/recharge.css')//比如recharge.css这个样式里面什么都不用改，是你想要合并的图就要引用这个样式。 很重要 注意(recharge.css)这个是我的项目。别傻到家抄我一样的。
        .pipe(spriter({
            // The path and file name of where we will save the sprite sheet
            'spriteSheet': './dist/images/spritesheet.png', //这是雪碧图自动合成的图。 很重要
            // Because we don't know where you will end up saving the CSS file at this point in the pipe,
            // we need a litle help identifying where it will be.
            'pathToSpriteSheetFromCSS': '../images/spritesheet.png' //这是在css引用的图片路径，很重要
        }))
        .pipe(gulp.dest('./dist/css')); //最后生成出来
});

第四步：打开生成的dist/css

第四步
第五步

这是合并之后的雪碧图

第六步
这是之前的所有图。 被我用并成上上面的雪碧图。很爽吧？

再看看生成后的css， 突然多出了什么。请看我红标注。多了定位。之前是没有这个定位。
1

注（ 使用gulp-css-spriter之前要安装node.js和gulp工具)

让您的Chrome浏览器允许本地环境支持Ajax

对于网站前端人员来说，我们在本地开发程序的时候如果用到Ajax的话，通常会使用Firefox来测试，因为Firefox的安全策略支持本地Ajax，IE系列和Chrome都不支持。

不过，经过笔者亲身体验Chrome浏览器的调试工具比火狐的更好用，所以如果让Chrome也支持本地Ajax的话，不是更好吗？

其实实现起来方法很简单，只需要在你的快捷方式的参数后面添加下面这句就可以了

1
-allow-file-access-from-files

比如笔者的电脑上面Chrome的快捷方式参数就是这样的

1
C:UsersliuxiaofanAppDataLocalGoogleChromeApplicationchrome.exe -allow-file-access-from-files

移动端支持平滑到顶部效果

jquery返回顶部，支持手机

效果体验：

在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画，然后用到web移动端却没什么卵用，会出现滚动不流畅，卡顿，失灵等等现象。

这是因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况

为此，移动端判断次数好些，下面是具体实现代码，兼容pc：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>移动端返回顶部 - 何问起</title><base target="_blank" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <style>
        #tophovertree{display:block;position:fixed;width:36px;height:36px;right:20px;bottom:20px;cursor:pointer;background-image:url(http://hovertree.com/texiao/mobile/6/tophovertree.gif);opacity:0.9;display:none}
        a{color:blue}
    </style>
    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div style="height:500px;width:100%;">1
    <br />请向下滚动页码，你将会看到返回顶部的按钮。<br />
    <a href="http://hovertree.com/h/bjae/ve3erni6.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/menu/jquery/">jQuery</a>  <a href="http://hovertree.com/texiao/">特效</a>
        <br />  <script type="text/javascript" src="/themes/sy/gggg728x90a.js"></script>
    </div>
    <div style="height:500px;width:100%;">2何问起</div>
    <div style="height:500px;width:100%;">3</div>
    <div style="height:500px;width:100%;">4</div>
    <div style="height:500px;width:100%;">5</div>
    <div style="height:500px;width:100%;">6 柯乐义</div>
    <div style="height:500px;width:100%;">7</div>
    <div style="height:500px;width:100%;">8 keleyi</div>
    <div style="height:500px;width:100%;">9</div>
    <span id="tophovertree" title="返回顶部"></span>
    <script src="http://hovertree.com/texiao/mobile/6/topHovertree.js"></script>
    <script>
    $(function () { initTopHoverTree("tophov"+"ertree",500,30,20); })
    </script>
</body>
</html>