谷歌浏览器截取长图 很多网页长图单个页面截不下来,那么需要如何解决? 首先,在谷歌浏览器chrome中打开需要截图的网页,等待需要截图的网页打开完毕,然后按F12 打开开发者工具,然后按组合键 Ctrl+Shift+P 调出谷歌浏览器chrome长截图需要的面板,然后输入 full ,这是时候就会看到下面出现 Capture full size screenshot ,点击这行文字,就可以截取当前整张网页了. tip来自:https://www.xxorg.com/archives/5220…

去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆 出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之(不记得了),国外也有之(比方说CSS tricks上的这篇”lurry Transparent Header Effect…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世…

CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB"; padding-left: 0.5em; } /* 右箭头*/ ol a[rel="next"]:after { content: "00BB"; padding-right: 0.5em; } 2.让父元素包含浮动的子元素: 添加一个进行清理的元素 让父元素浮…

小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后marg…

引言 字符重叠不是什么稀奇的东西. 如1像素错位模拟阴影效果: 或者powerFloat中展示的带边框三角: 以及其他很多. 但是技术这东西不是豆腐,老了可以吃,臭了也可以吃:那我这里还拿着个说事作甚? 背景 今天比较有空,就看看一些站点的sprite如何规划的,于是看到新版新浪微博有这么一个sprite图片:all_iconbtn.png 其中有下图所示部分的图标效果: 我知道一种简单且兼容的方法,可以实现上图标出来的图标效果.这个方法就是本文要分享的小tip. 实现 实现精髓:字符重叠.使用…

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川…

通过UA来判断不同的设备或者浏览器是开发者最常用的方式方法,而对于微信开发和小程序也是同样的一个情况,我们可以通过微信内置浏览器 User Agent 信息来判断其具体类型或者设备. 所以子凡就通过徒儿和兄弟们的不同手机设备收集了一些微信内置浏览器的 UA,收集其主要目的是为了解决网站在小程序中打开博客页面后若页面有载入广告,在 iPhone 设备上会被直接拦截而导致无法访问.由于子凡移动端站点的页面是通过 js 方式插入广告代码,而且泪雪博客也使用了静态缓存,所以就无法直接使用 PHP 的方式…

原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如新浪微博,是从上往下p…

本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~ 例如,妇女之友大淘宝的首页: 然而,这种布局有一个存在一个影响用户体验的隐患.应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条:超出,出现滚动条.于是,问题来了: 信息流页面,如…

最好程序一遍通过,为了提高代码能力,这里将用TIP的形式记录来犯过的错误.不断更新中. *已经转移到闪存.. [150214]WA:检查是否数组开小了. [150212]WA:如果程序中有乘号,需要留意是否超出int. [150210]CF::GYM的题目有的需要文件输入输出…

本人和朋友们做了一段时间浏览器,将一些小技巧分享出来,先写一部分,慢慢写,同时也为我们的浏览器打打广告 我们的浏览器将要上线,名叫沙发浏览 1.网页内的右键菜单 public boolean onLongClick(View view) { // 获取点击的元素 HitTestResult mResult = mWebView.getHitTestResult(); final int type = mResult.getType(); switch (type) { case HitTestR…

转自:https://www.cnblogs.com/elnino/p/3899136.html 1. 获取最近运行容器的id 这是我们经常会用到的一个操作,按照官方示例,你可以这样做(环境ubuntu): $ ID=$(docker run ubuntu echo hello world) hello world $ docker commit $ID helloworld fd08a884dc79 这种方式在编写脚本的时候很有用,比如你想在脚本中批量获取id,然后进一步操作.但是这种方式要求…

一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有一定的间距.因此,我们基本上都有类似下面的设置: input { padding-left: 10px; } 但是,如果只考虑文本框本身(父标签无其他特殊处理),这一套在流体环境下是行不通的,因为固定的padding数组无法让文本框永远100%自适应外部的宽度,至少非现代浏览器下是如此!//zxx:…

一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么?~~ 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码:thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg== 上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),…

一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是大家全神贯注思考的18分钟 ———————— ……思考结束 三.问题引导 针对不同浏览器实现类似的效果,我们可能都会想到CSS hack这个东西,让不同的浏览器下引用不同的CSS属性或是不同的CSS属性值. 于是要实现上图所示的效果,我们可能会将CSS代码分成两块,一块针对IE6~8,另外一块针对I…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: 相应的HTML代码如下: <h2 class="text-gradient" data-text=…

1. 获取最近运行容器的id 这是我们经常会用到的一个操作,按照官方示例,你可以这样做(环境ubuntu): $ ID=$(docker run ubuntu echo hello world) hello world $ docker commit $ID helloworld fd08a884dc79 这种方式在编写脚本的时候很有用,比如你想在脚本中批量获取id,然后进一步操作.但是这种方式要求你必须给ID赋值,如果是直接敲命令,这样做就不太方便了. 这时,你可以换一种方式: $ alias…

转自:http://www.zhangxinxu.com/wordpress/?p=2341 一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么?~~ 好吧,我也不喜欢专业术语的解释.你只要知道,base64编码就是长得像下面这样子的代码: thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTF…

一.无人不识君 据说今天是邓丽君奶奶会见马克思的日子,所谓“无人不识君”就多了份“无人不识邓丽君”之意. JS中有很多基本DOM方法,例如createElement, parentNode等,其中,appendChild方法是相当地常用与熟知,可谓是DOM节点方法中的“无人不识君”! appendChild的作用是在指定元素节点的最后一个子节点之后添加节点.好记又好用,大家都喜欢. appendChild方法就像是直接买饺子,实际上,我们还经常会遇到买饺子皮和馅自己包的情况.放在HTML中解释就…

又是周五了,周末不要浪,一起学点Swift!本周再次为大家带来了一些Swift的小技巧,都是些奇淫巧计,不知道也无妨,但Swift最吸引我的一点就是它的简洁易用.主要内容有: private(set)语法 分号的使用 利用String类型初始化方法简化UITableViewCell的reuseIdentifier 简洁的声明多个变量 压轴推荐:Xcode断点调试小技巧 我为这篇博客制作了一个demo,您可以去在我的github上clone下来:SwiftTips,如果觉得有帮助还望给个star以…

[原文]http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/ 一.CSS计数器为哪样? 要想理解本文内容,你需要首先了解什么是CSS计数器,您可以查看前不久我写的文章"CSS计数器(序列数字字符自动递增)详解",相当地详尽与深入. 下面的动态行为全部由HTML与CSS触发,没有任何JavaScript的参与,不过使用诸多CSS3功能,因此只在现代浏览器中有效果.OK,…

使用link标签的rel属性,设置成icon.同时设置href属性值为小图标图片的url. <link rel=" icon " href="image/icon.png" />…

1. <input>标签的默认样式 当在页面中添加一个input标签,当点击输入框时会有一个外边框包裹着,可以使用 : input { outline: none} 去除点击时产生的外边框包裹默认样式 input{border: none} 去除input标签的默认样式 2. div自适应浏览器高度 html,body{ height:100%; overflow:hidden; } /*需要自适应的div*/ .container { height: 100%; } 3. display:n…

最近在啃jQuery的源码,估计会啃到很多浏览器兼容性的问题,所以整理一下 1,IE下的内存泄露. 在IE中不在DOM树中的独立节点有javascript变量引用它的时候不会被回收. 解决:手动将该js变量置为null 2,IE<9,Nodelist无法调用slice和push 解决:手动模拟 3,IE,直接使用elem.attrName的形式获得属性值会自动串改DOM元素的某些属性,比如a的href 解决:使用elem.getAttribute(attrName)或elem.getAttrib…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能.…

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2946 一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感,哦?激起了我的好奇心.百之谷之,哟,相…

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能. CSS3 greyscale 滤镜实现 如下测试代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter:…

一.transition与visibility 这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值,会发现竟然有一个visibility. 此时,我的脑袋上立马冒出了3个大大的问号:visibility不就visibile/hidden/collapse等值,又不是数值什么的,怎么有动画效果呢?? 一番查阅研究,发现,这玩意还是有些作料的…… 二.transition与visibility 天气燥热,身边有没有冰镇的西瓜,因…

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度…