bootstrap中modal模态框实现在页面中水平垂直居中的方法

bootstrap是个前端懒人神器,样式舒服,布局顺畅,但是自带的modal模态框默认是水平居中,但是垂直位置偏页面上方。如果想要实现水平并且垂直居中的效果,需要自己写个css样式重新定义一下位置。官方给的例子中模态框的默认id是myModal,默认带有固定定位(position:fixed;)的样式。

咱们只需在自己的css中重写一下这个样式即可:

#myModal{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

}

经过重新定义后会发现在移动端模态框的宽度太小了,我们还可以继续优化一下,设置一个最小宽度,最终代码如下:

#myModal{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

min-width:80%;/*这个比例可以自己按需调节*/

}

 

其他需要的样式可以继续自由发挥。

webpack处理less文件时提示Cannot find module ‘less’错误的处理方法

webpack在处理less文件时,始终提示Cannot find module ‘less’,按照官方文档中的说法,只需安装less-loader、css-loader、style-loader就行了,但反复测试,始终报错。抱着试一试的心态安装了一下less模块(npm -install less –save-dev),问题竟然解决了。。。。怎么说呢,有时候信文档不如信报错,纠结理论不如动手折腾一下。

附上webpack官方loader大全地址:https://webpack.js.org/loaders

写给走在自学路上同学的一些话

首先声明,这不是一篇软文,仅仅是个人一些想法的如实交流。
2017年咱们后盾网录制发布了大量免费视频,包括向军老师主讲的angular、微信二次开发、composer、require等最新热门技术,还有我重新录制的零基础系列视频教程(html、div+css、JavaScript、jquery、HTML5、css3、混合APP开发)视频发布以来,未经推广便风靡技术圈,在腾讯课堂等知名大型在线教育平台稳居同类别前列,近期也收到了海量的学员反馈,感受到了大家浓厚的学习热情,也非常能体会同学们在浩海般的互联网中学到梦寐以求的真功夫的那种喜悦和兴奋。
作为混迹行业十余年的“老家伙”,非常能理解大家初入这个行业的迷茫焦虑。作为资深的自学者,对走在自学路上的你,有些话不吐不快。
讲真,咱们后盾网推出的2017年全新的零基础和热门技术的免费视频教程,比腾讯课堂里标价好几千甚至某些平台14800元的课程不知道强了多少倍(这个还真不是我吹,大家可以自己去看,去对比),很多同学年后看了咱们的视频后,感觉醍醐灌顶,相逢恨晚。原因很简单,就是咱们的课程是真正站在学生的角度,为你考虑到了几乎所有你能遇到的坑,把我们老师十余年的行业经验毫无保留的传授给你,带你入门带你提高,短时间的学习你就能感觉到自己难以想象的技术飞升,就这么多提供免费视频的培训机构来讲,能做到这一点的目前也只有我们后盾网。但是(凡事就怕但是),自学之路是极度坎坷布满荆棘的,你以为你跟着后盾网的视频学习进步很大,能独立布局各种页面,开发各种效果,这就够了吗?可能事实并没有你想的那么简单。
最近很多同学问:“老师,我看了咱们后盾网最新的视频,也都掌握的差不多了,我能找个什么样的工作呢?”这里可以负责任的告诉大家,吸收了我们最新前端视频里的技术,找个基础的前端工作还是没问题的,具体来讲,也就是一线城市4000-5000,二三线2000-3000左右薪水的工作吧。对于有志于在互联网行业大展拳脚的你,想必这个目标不是你所追求的吧?大家可以打开招聘网站,搜一下目前网站开发程序员岗位的平均薪资,一般最低也在月薪10000元左右。那,差距在哪呢?大家还缺什么呢?
好吧,直接说我的个人结论吧,如果你只是把网站开发当做业余爱好,网络自学完全能满足你的需求,但如果你想把这件事职业化,以后靠此谋生,自学是远远不够的,你有必要参加一次系统的面授培训,有同学说,我没时间,我路程远。。。。其实任何说辞都是借口,瞻前顾后永远成不了气候,有些时候就该有壮士断腕的决心,你的奋力一搏可能会影响你一生。(ps:打脸,真打脸,刚才还说不是广告呢,这三下两下又绕到培训上了。。。呵呵,别着急,听我慢慢说)
首先,靠自学从而转职业这条道路是很费时间的,需要自学者有极强的耐心和解决问题的能力,一般人是很难坚持的。有些同学感觉看了视频已经学的差不多了,其实这可能只是表象,你掌握了某些必要的知识点,这是第一阶段,真正工作中的场景是很复杂的,知识点的变通和深入应用靠自己悟是肯定行不通的。你在进入这个行业前需要一些行业老人们给你传授技巧和经验。就拿我们后盾网来举例子,一个完全小白的同学,从入学第一天学习装软件开始,到自己能独立布局出一个大型的网站前端页面,只需要两周时间(含周末),如果自学的话,要达到这个程度可能需要两个月甚至半年,而这仅仅是入门的时候抬起了一只脚而已。而且面授的培训中课堂上老师事无巨细的将知识点精准传达给你,课下自习辅导的时候老师可以无时无刻给你传授自己多年行业经验和技巧,避免你少走很多弯路。这一点自学是get不到的,不是老师在视频中有所保留,而是有些东西必须言传身教。就像我在课堂上老和学生说的一样,任何培训机构讲的任何一个知识点,你到网上去搜,或买本书看,可能讲的要比培训班多得多,但是,对你没有任何帮助,因为你更多需要的是提炼后的,企业真正需要的及技能,以及职开发中的经验、技巧和方法。
其次,闭门造车是不行的,很多同学自己觉得我需要学习这个,需要学习那个,其实很多时候都是白耽误工夫,自学中你很难找到准确的方向让你适应真正企业实战环境的要求。而在培训中,有老师帮你一对一制定计划,你走的每一步都是对工作有用的,不会做任何无用功,效率的提高,时间的压缩,就是个人利益最大化的保证。
还有,就是方法问题。大家在学校过程中很多时候感觉最无助最费时间的就是遇到问题的时候,自学中的问题可能没人能帮你,只能靠自己,一个简单问题琢磨好几天的情况时有发生,但在实训班,有老师帮你,让你能在几分钟的时间内解决掉问题,get到问题的精髓,并且深刻理解问题的发生场景也工作中的规避方案。
最后,氛围。任何学习都是需要一个好的氛围,自学的时候孤军奋战,很难熬,就算是能坚持,效率也低。而在实训班,大家在一起,你争我抢,生怕不如别人,效率自然高。
好了,说了这么多,相比大家也理解我的意思了,之所以今天写这篇帖子,是看到最近有些同学看了不少视频后,感觉可以,去找工作,处处碰壁,更可惜的是,碰壁了还找不到愿意。作为一个过来人,不忍心看到一个个有志青年在最美好的年纪如此沮丧。
很多事情,信则有,不信则无。如果你信我说我的这些,那我再啰嗦些选培训机构的注意事项。
目前互联网行业火爆有目共睹,也催生了大量的培训机构,看似每家都有自己的亮点,选起来还真需要费番脑筋。其实说来也简单,别轻信广告,什么上市公司,多么牛的企业背景,吹牛谁都会,文案再棒,也需要自己多考察一下培训机构的实力。
比如:
1、看一下他们的免费视频,从视频中能看到老师是否有给力,讲课风格你是否能接受。
2、潜伏到机构的QQ交流群里,看一下群里的学员反馈,这个是无法造假的。
3、到培训机构的论坛转一转,看一看人气如何,大家的评论如何,业界人士是否认可这个机构。这个也是不能造假的。没有自己交流区的机构,呵呵,三思。
4、这一点强烈推荐大家!有机会一定要亲自去培训机构看一看,最好试听一节课,百闻不如一见,自己体验后会有最准确的判断,甚至你可以趁下课的时候找正在培训的同学聊一聊,问问他们的感受,没有比这反馈更真实的了。如果自己在外地不方便,也尽量联系在当地的亲戚朋友帮你去看下。
5、培训机构官网发布的信息(如毕业薪资、学员回访等)仅作为参考,我们后盾网官网的信息保证真实,但不能确定所有机构公布的信息都是真实的,毕竟数据造假简直太简单了。
6、总之,多自己看,少听别人瞎忽悠。

行了,这次真说完了。在后盾网的讲台上也已经站了五年,见过了太多太多的逆袭案例,一点中肯的建议,还希望大家参考。祝大家学习顺利。
谢谢。手动鞠躬。

偶然发现了一个谷歌浏览器的bug

今天有同学遇到了一个问题,后来经过对代码的抽丝剥茧,发现了一个谷歌浏览器的小bug。

在li中放入一个img图片元素,如果li的宽度小于里面img的宽度,就会出现图片往下掉的bug:

 

 

 

 

 

 

把li的宽度调整到比img大,就正常了。

 

 

 

 

 

 

注明:测试用的谷歌浏览器版本是:55.0.2883.87(64-bit)

写了一个精简版的小demo,有兴趣的可以下载研究下:谷歌浏览器bug演示

 

微信小程序官方手册-单文件离线版

微信小程序火起来,这个大家应该都知道吧。
但是在做开发的时候,往往会遇到这样的情况,我知道小程序好像提供了这个功能,但是忘了在手册的哪一部分里了。到官方在线手册查起来比较费时间。
为了提高资料查找效率,我特意整理了一个单文件版本的离线手册。
这个单文件手册集成了官方手册(https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html)中的所有页面内容,以后想查找资料直接打开单文件手册,然后ctrl+f在浏览器窗口中搜索就行了。
强烈推荐有小程序开发需求的朋友下载收藏,你会爱上它的。没有开发需求的也可以收藏一份。

下载地址:http://bbs.houdunwang.com/thread-104834-1-1.html

用nodejs实现txt文档的指定行数分割

最近需要将一个有数万条数据的txt文档分割成不同的小txt文件,试了网上能找到的几乎所有txt切割软件都不好使,so,自己动手丰衣足食,用nodejs实现了一个,思路很多,大家也可以自由发挥,我抛砖引玉一下。

只用到了fs模块和readline模块,都是nodejs平台自带的,无需额外安装其他第三方模块。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var fs = require('fs');
var readline = require('readline');

//定义分割后每个文件的行数
var rows = 2000;
//要分割的文件
var file = 'sunqizheng.txt';
//用来结果的变量
var arr=[];

//创建文件流
var readstream = fs.createReadStream(file);
//创建逐行读取
var rl = readline.createInterface({
    input:readstream
})

rl.on('line',function(data){
    arr.push(data);
}).on('close',function(){//结束后调用的
    for (var i=0;i<Math.ceil(arr.length/rows);i++) {
        fs.writeFile(i+'.txt',arr.slice(i*rows,i*rows+rows).join('\r\n'));
    }
})

[node.js技术分享]利用nodemon模块实现express网站自动重启

做node.js开发程序员都知道,使用Express进行web网站开发的时候,每次修改完网站项目中的js文件,都需要手动重启站点才能看到最新效果,甚是不爽。

福音来了,nodemon模块能实现自动重启的效果,解放双手。方法如下

1、安装。运行如下代码将nodemon安装到全局环境中。

npm install -g nodemon

%e5%9b%be%e7%89%871

2、启动站点。在cmd窗口中,将目录切换到网站根目录下,执行如下代码,可以启动站点并监听变动,如js文件有修改,会自动重启站点。

nodemon bin/www

 

%e5%9b%be%e7%89%872

hbuilder无法自动编译less文件的解决方案

最近用hbuilder 7.4.2 写less文件,保存后发现无法将less文件自动编译成css文件,删掉,重装,依旧不行,每次都要在less文件上右键->编译 才能得到最新的css文件,本来就是件高效率的事,但这么一来,兴致全无。同事说7.3.2版本之前的hbuilder保存后可以自动编译,但我这么个有强迫症的人怎么可能折回去用旧版?!

后来百度了一下,找到了解决方案:

当然,如果你的less文件保存后无法自动编译,首先你得检查一下less插件安装了没,依次找到 工具->插件安装,如果显示已安装就表示less插件已经安装好了,如果没安装,就勾选上安装一下即可。如下图

qq%e6%88%aa%e5%9b%be20160921194325

依次找到  工具->预编译器设置,选择.less,然后点击编辑。

qq%e6%88%aa%e5%9b%be20160921194623

触发命令地址里填less的编译脚本lessc.cmd地址,在你hbuilder软件文件夹中搜索 lessc.cmd,就能找到这个文件了,在上面右键->属性就能找到他的具体地址。例如我的路径是:D:\绿色软件\HBuilder\plugins\com.pandora.nodejs.thrift_1.0.0.201609081718\js\node_modules\.bin\lessc.cmd

命令参数里写 %FileName% %FileBaseName%.css

点击确定后,再去编写less文件,就能自动编译成css文件了。

qq%e6%88%aa%e5%9b%be20160921194710

【推荐】Clover – windows系统中优秀的资源管理器扩展软件

多年前,还是win7横霸天下的时代,接触到了一款资源管理器扩展软件,叫clover,这款软件可以让”我的电脑”更强大,虽然功能不算太多,但都很贴心,用起来很舒服。后来不知什么原因,自14年1月后作者就没再更新。后来进入win8、win10时代,这款软件出现了严重的兼容性问题,遂放弃,但是一直对这个小帮手念念不忘。

就在前段时间,偶然去软件官网转了转,惊喜的发现又恢复更新了,哈哈,一万个爽!

clover官网:cn.ejie.me

官网的介绍是这样的:Clover 是 Windows Explorer 资源管理器的一个扩展,为其增加类似谷歌 Chrome 浏览器的多标签页功能。

其实让我欲罢不能的除了能将windows原始单窗口模式整合成标签页模式外,还有空白处双击返回上一层,写代码的都知道往返各个目录的时候是多烦人,这个功能简直太方便了,不能每次都去点一下小小的地址栏了。

还有收藏夹功能,像浏览器一样,在某个文件夹内按 ctrl+d,可以收藏当前的文件夹到顶部,下次再访问直接点击收藏栏里的图标就一键直达了。

ps:真心推荐大家尝试一下,你肯定不会后悔的!

1 2

关于我

大名孙琪峥。
一个年龄神秘的骨灰级博客玩家。
一个烧包的伪科技极客。
一个踏实的IT从业者。
中国的顶尖PHP培训机构后盾网前端讲师,江湖外号“小白杀手”,承蒙大家厚爱。

近期评论