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对象数组，现代浏览器几乎都支持

阅读更多

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/

这几天一直在菜鸟教程学习php和mysql，想总结一下自己的学习成果，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则相对于容器进行绝对定位，并设置图片盒子的left和top值，之后再把数组中最低高度那一列的值加上这个图片盒子的高度，此时即实现了图片瀑布流效果，随页面滚动触发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;
        }
    }
}

阅读更多

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

阅读更多

最近一些天在学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			//打印错误日志

阅读更多

前言

鉴于国内的网络环境，想爬取一些被墙的网站，只能通过代理或其他方式，而我使用的是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)

github地址 : https://github.com/leoyaojy/mzitu

主要分为三个版本:

单页版、单图版、全图版

运行环境

• Ubuntu 16.04
• Python 2.7.12
• Pycharm 2016.2

使用方法

1

git clone https://github.com/leoyaojy/mzitu.git

1

cd mzitu

1

python page.py | single.py | full.py

阅读更多

CSS中主要的伪元素有四个:before、after、first-letter、first-line
在before、after伪元素选择器中，常用来清除浮动，有一个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盒模型

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

阅读更多

1XX 信息

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

2XX 成功

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

阅读更多