一行代码系列

1、一行代码可视化CSS盒子布局


1
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

源码解读


首先我们把代码格式化一下:

1
2
3
4
5
[].forEach.call($$("*"),
function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
}
)

1、选取页面所有DOM元素
$$()相当于document.querySelectorAll(),返回的是一个NodeList对象数组,现代浏览器几乎都支持

阅读更多

Ubuntu16.04搭建LAMP环境

LAMP简介


L:Linux操作系统
A:Apache网页服务器
M:Mysql数据库管理系统
P:Php脚本语言

注:以下开始进行的是分步安装,如果你想一步安装请跳过,拉到页面底部,当然你得首先安装好自己的Linux系统

安装Linux服务器


如果你自己装过虚拟机或者有更好的安装技巧可跳过,这只是博主自己安装的方法
此安装方式操作的是Ubuntu16.04下通过VirtualBox虚拟机管理软件安装Deepin 15.3,其它系统基本类似,安装步骤如下:

  1. 首先从深度系统官网下载镜像文件iso深度官网,一个很不错的debian衍生版本,而且还是国产,必须得支持啊
  2. 选择新建,名字随便取,类型选择linux,版本选择Debian(64 bit),其它直接下一步,最后点击创建即可
  3. 选择刚才新建的虚拟机,点击设置,在显示项把显存大小拉到最大,接着选择存储项,点击控制器下的碟片图标,在右侧属性栏中分配光驱的右侧的碟片图标点击出现下拉菜单,选择选择一个虚拟光盘文件……,此时选择你下载好的镜像文件iso,选择网络项,连接方式选择桥接网卡,点击确定按钮提交你的修改
  4. 安装系统:选择新建的虚拟机,点击菜单栏的启动按钮,这时系统的安装就开始了,系统如何安装我就不赘述了,也是一步一步下一步,最后出现安装成功,提示重启的信息时,把步骤2中刚才加载的镜像文件从虚拟机移出虚拟盘,重新启动虚拟机,此时系统安装完成

上一张安装好的美图:

阅读更多

美女图片站建站总结

俗话说的好,不爱美女的程序员不是一个好司机!
mm网:https://mm.luckyw.cn/
妹子图:https://mzt.luckyw.cn/
煎蛋美女:https://jd.luckyw.cn/

这几天一直在菜鸟教程学习phpmysql,想总结一下自己的学习成果,so这个mm图片站也就这么自然而然地出来了,主要使用了图片瀑布流ajax加载数据php页面静态化图片分页等方法进行实现

2016-10-12 更新

瀑布流加载方式已改为采用jquery插件waterfall,以及接口链接已修改

图片瀑布流


我这里分为两种瀑布流方法,第一种方式(首页静态化页面index.html):
先获取所有的图片盒子boxes,每个图片盒子的宽度box_w,文档的宽度W,从而得到列数num,然后设置容器$('#imgBox')的宽度为列数 × 每个图片盒子的宽度。然后定义一个数组arr存储每列的高度,对所有图片盒子进行遍历,如果此时索引小于列数,则把这个图片盒子的高度添加到盒子中,如果此时索引大于列数,那么先获取数组arr中高度最短minH的那一列的索引minIndex,然后定义图片盒子在容器中的位置,因为我的容器imgBox已经定义了position:relative,设置图片盒子为position:absolute则相对于容器进行绝对定位,并设置图片盒子的lefttop值,之后再把数组中最低高度那一列的值加上这个图片盒子的高度,此时即实现了图片瀑布流效果,随页面滚动触发ajax加载数据,之后一个一个把图片盒子添加到容器中去

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
function waterfall() {
var boxes = $('.box');
var box_w = boxes.eq(0).outerWidth(true);
var W = document.body.clientWidth || document.documentElement.clientWidth;
var num = Math.floor(W / box_w); //5
$('#imgBox').width(num * box_w);
$('.w').width(num * box_w);
var arr = [];
boxes.each(function(index, ele) {
var h = $(ele).outerHeight(true);
if (index < num) {
arr.push(h);
} else {
var minH = Math.min.apply(null, arr);
var minIndex = getMinIndex(arr, minH);
$(ele).css({
'position': 'absolute',
'left': box_w * minIndex,
'top': minH
});
arr[minIndex] += h;
}
});
}
function getMinIndex(arr, h) {
for (var i in arr) {
if (arr[i] == h) {
return i;
}
}
}

阅读更多

安装Ubuntu 16.04 LTS常用软件

Goole Chrome浏览器


Chrome浏览器是目前市面上最流行的web浏览器,而Ubuntu 16.04 LTS版本安装完成之后是没有Chrome浏览器的,只有FireFox浏览器,决定是否安装纯属个人偏好
首先,我们先修改下hosts文件,以便我们可以访问google服务,点击打开此链接hosts文件,全选复制,然后打开终端,输入sudo gedit /etc/hosts,然后把里面的内容替换为刚才复制的内容,此时我们在火狐浏览器中打开此官方下载链接chrome,下载安装即可,安装完成之后也可以直接在应用商店下载安装你所需的应用,可参考Chrome插件分享

安装Numix主题及图标主题


直接上代码,打开终端:

1
2
3
4
sudo add-apt-repository ppa:numix/ppa //添加numix的仓库源
sudo apt update //更新软件源
sudo apt install numix-gtk-theme //安装numix主题
sudo apt install numix-icon-theme-circle //安装numix circle图标主题

Unity Tweak Tool


numix主题安装完成之后,我们需要对其进行配置,默认Ubuntu的启动器是在左边的,我们一般习惯在下边,而Unity Tweak Tool可以很方便帮我们解决上述问题,打开软件中心搜索Unity Tweak Tool进行安装,安装完成之后在dash中打开,具体的配置我就不说了,so easy

阅读更多

使用nodejs发送邮件

最近一些天在学python,我觉得这门语言这门简单又很好玩,为什么不把这门语言当做程序员学语言的敲门砖了,而选择那么复杂的C语言。在学python的过程中,有学习到python有可以发送邮件的功能,我就在想node会不会也有发送邮件的模块工具了,果不其然,让我找到一个,也就是本文所要介绍到的nodemailer了,npm官方地址:https://www.npmjs.com/package/nodemailer

python发送邮件简单实现


不多说,直接看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#-*-coding:utf8-*-
import smtplib
from email.mime.text import MIMEText
mail_host='smtp.126.com' //设置主机,如果是QQ请换成smtp.qq.com
mail_user='xxxxxxxx@126.com' //账户
mail_pass = '这里填入授权码,下面会说到' //邮箱授权码,非密码
me = 'Leo Angel'+'<'+mail_user+'>' //发件人
to = 'xxxxxxxxx@qq.com' //收件人
msg = MIMEText("Test",_subtype='plain',_charset='utf-8')
msg['Subject'] = 'Hello' //主题
msg['From'] = me //发件人
msg['To'] = to //收件人
try:
server = smtplib.SMTP() //创建一个SMTP对象
server.connect(mail_host) //连接主机
server.login(mail_user,mail_pass) //登录账号
server.sendmail(me,to,msg.as_string()) //发送邮件
server.close() //关闭SMTP对象
print '邮件发送成功' //打印发送成功提示信息
except Exception as e:
print e //打印错误日志

阅读更多

如何使requests通过socks代理工作

前言


鉴于国内的网络环境,想爬取一些被墙的网站,只能通过代理或其他方式,而我使用的是SS代理SS使用的是socks5代理方式,而requests爬取网站内容的时候是不支持socks代理的,那么如何使requests通过socks代理工作?
其实,我们发现在2016-04-29发布的requests 2.10.0版本中,提供了对socks代理工作的支持,前提是需要安装PySocks,安装代码如下:

1
$ pip install pysocks

用法


1
2
3
4
5
6
import requests
proxies = {
'http':'socks5://yourproxy:port',
'https':'socks5://yourproxy:port'
}
requests.get(url,proxies=proxies)

CSS content属性介绍

CSS中主要的伪元素有四个:before、after、first-letter、first-line
beforeafter伪元素选择器中,常用来清除浮动,有一个content属性,能够实现页面中的内容插入

纯文本插入


效果如下:

代码如下:

1
2
3
4
5
6
7
8
9
10
/*css*/
h1:after{
content: " World"
}
h2:before{
content: "Leo "
}
<!-- html -->
<h1>Hello</h1>
<h2>Angel</h2>

阅读更多

CSS制作小三角

原理


CSS盒模型

  1. 盒模型 = Margin + Border + Padding + Content
  2. 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等
  3. 调整宽度大小可以调节三角形形状

阅读更多

http状态码汇总

1XX 信息


这一类型的状态码,代表请求已被接受,需要继续处理

状态码 状态文本 信息
100 Continue 客户端应当继续发送请求
101 Switching Protocols 服务器已经理解了客户端的请求,并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求

2XX 成功


这一类型的状态码,代表请求已成功被服务器接收、理解、并接受

状态码 状态文本 信息
200 OK 请求已成功,请求所希望的响应头或数据体将随此响应返回
201 Created 请求已经被实现,而且有一个新的资源已经依据请求的需要而创建,且其URI已经随Location头信息返回
202 Accepted 服务器已接受请求,但尚未处理
203 Non-Authoritative Information 服务器已成功处理了请求,但返回的实体头部元信息不是在原始服务器上有效的确定集合,而是来自本地或者第三方的拷贝
204 No Content 服务器成功处理了请求,但不需要返回任何实体内容,并且希望返回更新了的元信息
205 Reset Content 服务器成功处理了请求,且没有返回任何内容
206 Partial Content 服务器已经成功处理了部分GET请求

阅读更多