目录 利用字体 反爬原理 应对措施 难点: 利用背景 反爬原理 应对措施 利用伪类 反爬原理 应对措施 利用元素定位 反爬原理 应对措施 利用字符切割 反爬原理 应对措施 利用字体 反爬原理 反爬原理: 1.主要利用font-family属性,例如设置为my-font 2.在HTML里面不常见(不可读)的unicode 3.在CSS字体(my-font)中将其映射到常见(可读)到字体,例如数字 4.爬虫在抓取数据的时候只能抓到unicode,而不是真实的数据 应对措施 1.下载woff字体文件,

Nginx防爬虫优化 Robots协议(也称为爬虫协议,机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取. 我理解的是robots.txt是通过代码控制搜索引擎蜘蛛索引的一个手段,以便减轻网站服务器的带宽使用率,从而让网站的空间更稳定,同时也可以提高网站其他页面的索引效率,提高网站收录. 我们只需要创建一个robots.txt文本文件,然后在文档内设置好代码,告诉搜索引擎我网站

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,来个star!).上图: 关于改造,一开始的想法就是使用百分比尺寸

我们可以根据客户端的 user-agents 首部字段来阻止指定的爬虫爬取我们的网站: 虚拟主机配置如下:(红色标记为添加或者修改内容) [root@Nginx www_date]# cat brian.conf server { listen ; server_name www.brian.com; if ($http_user_agent ~* "qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapart

一.介绍 采用这种字体,我们可以避免网站制作中采用好多图片,一方面解决了浏览器的兼容性问题.另一方面,这些字体都是矢量字体,我们只要在调整这些图标时,将他们的字体大小以及颜色,我们就可以解决很多不是图片的图标了. 二.使用原因 今天在用到jquery.mmenu.js过程中(手机上的单个按钮菜单,具体将在下一节讲到),也是从网上找到的一个简单的demo,很简单的,如下图: 于是我把它拿下来进行研究,但是所有元素都拿下来了,就是有一个图标不显示,如下图. 研究了半天,终于发现了问题所在!由此也进一

来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/svg直接在浏览器中绘制图标. 方案1:由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面.你也能想到,一堆图标的雪碧图,修改维护会相当麻

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt=&qu

下载font-awesome-4.4.0 同时引入font-awesome-4.4.0.min.css 通过<i class='fa fa-sign-out'></i>生成图片 很好用

页面排版经常遇到‘图标+文字’的需求,正常样式写下来是这样 ​, 但产品要的应该是长这样 ​,怎么办呢?其实很简单,加个样式看看 vertical-align: top/middle/bottom; 浏览器都支持,当然后面的值是上对齐,下对齐,还是居中就要你自己去发挥喽-

假定一个场景:某个网站它可能不希望被网络爬虫抓取,例如测试环境不希望被抓取,以免对用户造成误导,那么需要在该网站中申明,本站不希望被抓取.有如下方法: 方法一:修改nginx.conf,禁止网络爬虫的ua,返回403. server { listen 80; server_name 127.0.0.1; #添加如下内容即可防止爬虫 if ($http_user_agent ~* "qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-

1.前言 闲来无聊.手机每天又是都接触的东西.程序什么的最容易接触到.想到有些人说前后端都做就是全栈的说法.哦,你看html5全栈. 要我说多接触一些多有意思.天天写后端.还不是业务层.又不是什么高大上的算法.前端有意思的东西才多.当然我是那种比较old的.不会ag.vue,react.只会jq.拿起一把梭子就是干.哇.你看看这个前端的水果然深. 接下来说app要完成那些目标了. 1.查词(这个太简单了) 2.翻译(调用有道的) 3.句式分析(本来在想英语是不是有什么规律.后来一找有人做了.直接

1.移动端(安卓设备.ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐.PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采用传统方式(vertical-align: middle;或者position定位)实现图标文字对齐. 2. 实际上不管是line-height还是用position去定位,不管你display用的什么,不同机型的显示效果都会不一样. 水平上的差距几乎没有,垂直方向上的效果会多种多样. 遇到这种ui

在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt="" class="comment"&g

if ($http_user_agent ~* "qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot") { return 403; } 禁止百度 谷歌等等来爬取我们的网站 作者简介: 陈志

.person-loading .loading-icon{position: absolute;top: 14px;} i.loading-icon{width: 15px;height: 15px;background-position: 0 -90px;-webkit-animation: loading 1s linear infinite;} @-webkit-keyframes loading { from { -webkit-transform: rotate(0deg) tran

robots.txt文件用法举例: 1. 允许所有的robot访问 User-agent: * Allow: / 或者 User-agent: * Disallow: 2. 禁止所有搜索引擎访问网站的任何部分 User-agent: * Disallow: / 3. 仅禁止Baiduspider访问您的网站 User-agent: Baiduspider Disallow: / 4. 仅允许Baiduspider访问您的网站 User-agent: Baiduspider Disallow: 5

在conf下  vi 一个文件agent_deny.conf 添加如下内容 #禁止Scrapy|curl等工具的抓取 if ($http_user_agent ~* (Scrapy|Curl|HttpClient)) { return 403; } #禁止指定UA及UA为空的访问 if ($http_user_agent ~ "FeedDemon|JikeSpider|Indy Library|Alexa Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|Coolpa

css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹毛求疵”,越来越多的前端开发者开始“返璞归真”,在能不使用图片的场景中减少图片使用,css图标相对于图片还有个优势是我们可以方便的定制图标的大小以及颜色. css实现三角形图标已不是什么新鲜技术,之前也有很多相关的技术文章,这篇文章主要是分析下在实际场景中使用时遇到的问题以及如何回避这些问题.基本原

<html> <head> <title>css图标</title> <meta charset="utf-8"> </head> <style> .box{ width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid tra

图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Http请求,影响网页的性能.因此,在实际中,我们可能见到以下一些常见的解决方案: 将多个图标按照一定排列顺序合并在一个图片里(即sprite图),再通过CSS设置元素的background-position来为元素设置背景从而展示图标 将单个图标元素转成base64格式,并在CSS声明背景 使用SVG

python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 python 3.x 爬虫基础---常用第三方库 前言 其实前两章都是python内置的爬虫函数,大家都知道python有强大的第三方库,今天我们就来说一下requests,BeautifulSoup4,selenium,lxml ,顺便正则re也会在这篇文章中提及. Requersts 参考文档:http://docs.python-reque