- 博客(49)
- 收藏
- 关注
RSS订阅转载 常见的链接关系
alternate文档的可选版本（例如打印页、翻译页或镜像）stylesheet文档的外部样式表start集合中的第一个文档next集合中的下一个文档prev集合中的前一个文档contents文档目录index文档索引glossary文档中所用字词的术语表或解释copyr
2016-08-17 00:09:18
1406
转载 用纯css3绘制三角形的原理
预备知识当我们设置一个div其width与height为100px，并且设置其四边框的宽度为100px，且分别设置其颜色后，我们可以看到如下的一张图片此时如果设置这个div的height为0的话，其他不变，会得到下面这个图形下面把其宽度也设置为0后，得到如下的一张图片正式讲解当我们如下设置代码并赋给div相应的属性时#side
2016-08-12 17:47:53
11403
转载 浏览器内核以及私有前缀
根据不同的内核，一些私有属性的css前缀不一样 Gecko内核 css前缀为"-moz-" 火狐浏览器WebKit内核 css前缀为"-webkit-" Comodo Drangon(科摩多龙)，苹果，搜狗高速浏览器3，快快浏览器，枫树浏览器，云游浏览器，360极速浏览器，世界之窗极速版，SRWare Iron，猎豹浏览器，RockMelt，QQ浏览器
2016-08-12 17:27:33
2287
转载 前端冷知识
HTML篇浏览器地址栏运行JavaScript代码在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如：javascript:alert('hello from address bar :)');将以上代码贴到浏览器地址栏回车后alert正常执行，一个弹窗神现。需要注意的是如果是通过copy paste代码到浏览器地址
2016-08-09 16:53:35
489
转载 HTML <a> 标签 （修改样式，链接邮箱Email地址）
属性值描述 标签的 charset 属性" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent">charsetchar_encodingHTML5 中不支持。规定被链接文档的字符集。 标签的 coords 属性
2016-08-09 14:35:23
7783
原创 css中文英文换行、禁止换行、显示省略号
word-break:break-all;只对英文起作用，以字母作为换行依据 word-wrap:break-word; 只对英文起作用，以单词作为换行依据 white-space:pre-wrap; 只对中文起作用，强制换行white-space:nowrap; 强制不换行，都起作用white-space:nowrap; overflow:hidden; text-overflow:ellips
2016-08-09 14:20:01
4667
原创 文字向上滚动，鼠标悬停停止滚动
CSS.rolltext{ height: 40px; line-height: 40px; overflow: hidden;}HTML Interested in ongoing innovation at Boyd? Click here to learn more!Click here to join our Aerospace mai
2016-08-01 10:24:24
4359
2
翻译 响应式图片填充工具picturefill
https://github.com/scottjehl/picturefillhttp://scottjehl.github.io/picturefill/picturefill允许web开发人员根据不同的屏幕大小、视口大小、屏幕分辨率等情况提供不同的图片给用户。picturefill使用方法首先引入JS（需要在HTML文档头部引用）为了使你的网页能够有效的加载，建议增加
2016-07-20 18:18:29
4541
转载 CSS3 Object-fit和Object-position
功能简介在CSS中，替换元素(replaced elements)，如和元素一直存在长宽比的控制问题，特别在在响应式设计中，如何在不同设备，不同分辨率下对这些元素的长宽进行响应。例如，您可能想不以图片的正确尺寸，不想扭曲图像，也不想失去图像的长宽比例，让图片占据一定的空间。按照长宽比例调整和缩略图像的画面比挤压和拉伸图像是一个更优雅的解决方案。在CSS3中我们可以使用object-fit和
2016-07-20 16:40:02
468
转载 html替换和不可替换元素
从元素本身的特点来讲，可以分为替换和不可替换元素。1、替换元素替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。(X)HTML中的img、input、textarea、se
2016-07-20 16:24:14
1160
翻译 幻灯片插件-jquery.sliderPro.min.js 第二波
根据github上的官方说明翻译模块是可选的代码块扩展插件的核心，加入了更多的功能。这种模块化的架构使得代码更有条理，也可以让你只包括将要使用的功能，从而优化文件大小和性能。1.淡出该模块用淡入淡出过渡效果替换默认的slide/swipe效果。可定制的属于：fade, fadeOutPreviousSlide 和 fadeDuration.2.标题允许你
2016-07-19 18:11:13
6392
2
转载 幻灯片插件-jquery.sliderPro.min.js
https://github.com/bqworks/slider-pro/blob/master/docs/modules.md#modules使用方法在页面中引入必要的文件： HTML结构该幻灯片的HTML结构采用嵌套结构：slider-pro > sp-slides >sp-slide，这三个层级的class名称的div是必须的。
2016-07-19 15:12:04
7992
1
原创 弹出层插件
jquery.fs.boxer.min.js多功能jQuery弹出框弹出层插件Boxer，基于jQuery，支持单张多张图片展示、支持视频、文字、iframe加载页面，还支持全屏展示，众多的参数配置功能，支持自定义显示位置、支持弹出层透明度定义、支持函数callback，支持按钮文字定义、支持是否支持移动端展示等配置Boxer 是一款基于 jQuery 的 Lightbox 效
2016-07-14 11:23:47
1406
原创 WOW.js+animate.css让页面滚动时显示动画，使页面更有趣
官网：http://mynameismatthieu.com/WOW/bootstrap CDN服务：http://www.bootcdn.cn/wow/1.wow.js实现了在网页滚动时的动画效果，有漂亮的动画效果，依赖于Animate.css。2.Animate.css非常优秀的CSS3动画库，不依赖于jQuery，纯CSS动画使用方法1、引
2016-07-07 16:25:34
11420
4
原创 使用swiper插件过程中遇到的问题
一、a链接失效 在使用swiper过程中，发现a链接失效，经过查找分析发现是由于没有设置一个参数preventClicks，该参数默认的值是ture preventClicks:false
2016-07-04 16:55:18
5043
原创 css3 Gradient渐变效果
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradi
2016-06-28 16:27:07
609
原创 html5新增标签
article含义：article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等... artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。属性：支持HTML5的全局属性和事件属性。sec
2016-06-28 11:52:02
534
转载 禁止Safari将数字识别成电话号码,增加特殊效果
用ipad访问我的网站时，发现网站上的一串数字变颜色了（原来是红色的），现在变成了蓝色。一开始以为网站出了什么问题，后来在PC端查看，发现颜色依旧是红色。在ipad上点击还会弹出菜单呼叫的选项，基本可以断定是Safari搞的鬼了。Safari识别电话号码功能会自动将数字识别成电话号码。为了这个问题，到Safari的官网翻找，发现Safari有个私有meta属性可以解决这个问题。在...
2016-06-27 10:58:23
2624
转载 SSLspeedy2与SSLspeedy4installonly
Chrome浏览器用户请全程用Chrome浏览器第1步下载临时文件 SSLspeedy4InstallOnly,解压之后，文件夹的名字是SSLspeedy4InstallOnly。第2步用chrome浏览器打开网址 chrome://extensions/ ，如下图所示第3步点击正在开发的扩展，然后选择你刚才下载并解压的文件夹SSLspeedy4
2016-06-20 10:21:06
26423
1
原创 blockScroll.js的介绍和使用方法
https://github.com/DominikGorecki/block-scrollblockScrol是一个可以将你的div元素变成一个整体，一个时间只在一屏显示。将你的内容分解成块更好的呈现给客户。安装方法引入插件创建包含元素已经直接子元素div FIRST BLOCK SECOND BLOCK ...直
2016-06-15 10:53:14
778
原创 自定义网页滚动条样式插件malihu-custom-scrollbar-plugin的介绍和使用方法
网站：http://manos.malihu.gr/jquery-custom-content-scroller/github：https://github.com/malihu/malihu-custom-scrollbar-plugin使用方法引入CSS样式引入JS（插件是建立在JQUERY的基础之上的，需要在引入jquery.m
2016-06-15 10:07:35
5280
原创 animate.css动画样式详解
attention seekersbounce：弹跳flash：闪烁pulse：脉冲（放大然后回到正常大小）rubberBand：橡皮筋shake：摇（左右）headShakeswing：摇摆（上下，以中心为原点）tada：（缩小然后摇摆，幅度比较小）wobble：摇晃（左右和上下都有，即沿着一个弧移动，比较快）jello：果冻（像果冻一样抖动）
2016-06-14 18:05:11
3149
转载 表单增强与验证——多行文本（字符计数器）
HTML Short Bio (up to 140 characters) utilities.js// Helper function to add an event listenerfunction addEvent (el, event, callba
2016-06-12 18:33:30
564
转载 表单增强与验证——选择框（联动选择框）
HTML type Please choose a type camera projector model
2016-06-12 18:23:32
1369
原创 表单增强与验证——单选按钮（other单选按钮和text的结合）
每次用户选中单选按钮代码就会检测用户师傅选择了other选项。如果选择的other选项将显示一个文本输入框。如果选择了前两个选项。将隐藏文本框并将文本框里的值清空。HTML Search engine Newspaper or magazine
2016-06-12 18:15:22
548
原创 表单增强与验证——复选框（选中All复选框）
HTML All Animation Documentary Shorts utilities.js// Helper function to add an event listenerfunction addEvent (el, event, callb
2016-06-12 18:12:56
424
原创 表单增强与验证——提交按钮（禁用提交按钮）
如下情况禁用提交按钮：脚本初始载入时。（change事件会再脚本被改变时查看是否有值，以此启用提交按钮）表单被提交后。（防止表单被多次提交）HTML New password: utilities.js// Helper function to add an event l
2016-06-12 18:05:19
2840
原创 SVG格式的图片来优化网站
SVG 是使用 XML 来描述二维图形和绘图程序的语言。SVG 意为可缩放矢量图形（Scalable Vector Graphics），SVG 是使用 XML 格式定义的图像。svg格式大小是固定的，svg是个文本文件，图片的内容是由svg代码决定的。不像位图存在分辨率问题，所以svg图片所占的空间大小是固定的。你只有优化你的svg代码，才能够使其空间变小。如何编辑SVG图片可视化
2016-06-04 11:09:53
1301
原创 sublime生成html快捷方式
首先要给sublime text安装一个emmet的插件开始体验：输入以下简写，按ctrl+Ehtml:5 或者! Document html:4t Document html:4s Document html:xxs
2016-06-03 18:33:20
969
原创 sublime中将less编译成css的插件less2css
我安装less2css出了问题，所以选择了LESS/Sass 编译工具Koalasublime text 写 less高亮和提示：安装插件less
2016-06-03 18:29:31
593
转载 Sublime text 3 如何格式化HTML/css/js代码
使用Sublime text 3 编写代码是一种享受，使用Sublime text 3 格式化HTML代码，需要安装插件，具体安装步骤如下：1、打开菜单->首选项->插件控制，输入 install package2、等待程序进入插件管理功能，再输入插件名称：TAG3、点击安装插件。4、插件安装成功后，在需要格式化的HTML代码中，选中代码，然后按Ct
2016-06-03 18:23:10
91269
3
原创 flipsnap实现手机屏幕左右拖拽滑动效果的框架
官网：http://hokaccha.github.io/js-flipsnap/官方说明文档：名称类型说明maxPoint数字停止点计数。默认值是从元素项计数自动计算。distance数字移动距离。默认值是从元素的宽度和maxPont自动计算。transitionDuration数字转换时
2016-06-03 16:48:00
2272
原创 复位样式——随时更新
复位样式，总结自己的@charset "utf-8";/* * Created: linda * LastChangedDate: 2016-05-31*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* dom */dl, dt, dd, ul, ol, li,/* list */pre, /* c
2016-05-31 17:32:05
311
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人