12 2016 档案
查看html元素绑定的事件与方法 visual Event 插件
摘要:WEB标准提倡结构、表现和行为相 分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤其是JavaScript加载事件的方式五花八门,可以透过jQuery、element.click = 阅读全文
posted @ 2016-12-29 11:02 半夏微澜ぺ 阅读(502) 评论(0) 推荐(0) 编辑
使用css borer实现图层蒙版效果
摘要:需要js 思路:假设目标元素是target。在外层定义元素宽高等于target,通过border设置元素铺满整个文档,设置border的透明图,实现蒙版,在元素的内部设置子元素,宽高100%;设置圆角边框50%; 设置box-shadow inset显示 代码: css js代码: 来自:http: 阅读全文
posted @ 2016-12-20 09:52 半夏微澜ぺ 阅读(3653) 评论(0) 推荐(0) 编辑
去除inline-block的间隙
摘要:产生间隙的原因就是标签之间的空格,去除的方法: 1 设置父元素的font-size:0;空格字符的宽高都为0, 2 inline-block元素在一行上,不换行 3 inline-block元素换行,但是上一个标签的结束标签与下一个标签的开始标签在一行上 或者 4 在上一个标签的结束标签和下一个标签 阅读全文
posted @ 2016-12-20 09:37 半夏微澜ぺ 阅读(207) 评论(0) 推荐(0) 编辑
css line-height
摘要:“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离 1 实现单行文字垂直居中 设置box的inline-height值为box的height值,网上一直说设置inline-height值与height之相等,其实去掉height值也是可以的 2 实现div中行数不固定的文字的垂直 阅读全文
posted @ 2016-12-15 14:51 半夏微澜ぺ 阅读(313) 评论(0) 推荐(0) 编辑
vertical-align 和line-height 以及baseline的解析
摘要:line-height是相对于font-size来计算的,vertical-align的百分比值是相对于line-height来计算的,vertical-align的默认是baseline; demo: font-size:14px; line-height:1.5; line-height的值其实 阅读全文
posted @ 2016-12-15 10:49 半夏微澜ぺ 阅读(806) 评论(0) 推荐(0) 编辑
html/html5中的download属性
摘要:兼容性不是很好, 只是了解一下: 主要表现在跨域策略的处理上,Chrome浏览器和FireFox浏览器: 如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以下载的,但是,并不能重置下载的文件的命名;而FireFox浏览器下,则download属性是无效的, 阅读全文
posted @ 2016-12-13 11:53 半夏微澜ぺ 阅读(2155) 评论(0) 推荐(0) 编辑
css3 all属性
摘要:ie不支持,谷歌火狐支持,safari9+支持,移动端高版本支持 all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。 我们可能知道,有些CSS属性值基本上所有CSS属性都有,比方说继承inherit! 阅读全文
posted @ 2016-12-13 11:13 半夏微澜ぺ 阅读(331) 评论(0) 推荐(0) 编辑
direction
摘要:基本上,大家只要关心下面这两个属性值就好了: direction: ltr; // 默认值 direction: rtl; 其中,ltr是初始值,表示left-to-right,就是从左往右的意思,再具体描述下,就是内联内容是从左往右依次排布的,我们平时网页的处理都是这样的,比方说前后两个图片,默认 阅读全文
posted @ 2016-12-13 10:54 半夏微澜ぺ 阅读(383) 评论(0) 推荐(1) 编辑
writing-mode属性
摘要:writing-mode属性 最初只是ie中的属性,只有ie支持,现在在css3中谷歌,火狐也开始支持。 所以使用的时候就需要记住两套不同的语法,ie的私有属性和css3的规范属性 如果只需要兼容到ie8+就可以只使用css3的规范属性就可以了 css3: html html writing-mod 阅读全文
posted @ 2016-12-13 10:31 半夏微澜ぺ 阅读(6490) 评论(0) 推荐(1) 编辑
css画三角的原理
摘要:当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片 此时如果设置这个div的height为0的话,其他不变,会得到下面这个图形 下面把其宽度也设置为0后,得到如下的一张图片 删除border-bottom 设 阅读全文
posted @ 2016-12-07 09:58 半夏微澜ぺ 阅读(286) 评论(0) 推荐(0) 编辑
css3 实现png图片改变背景颜色
摘要:实际上是用的是就是css的filter的drop-shadow属性 drop-shadow: 1 不支持内阴影 2 不支持多阴影 3 兼容性 ie13+ 谷歌 火狐 android4.4+ ios 4 实现的是正真意义上的投影。对于非透明的部分都会有投影,表现形式与box-shdow不一样,透明的部 阅读全文
posted @ 2016-12-06 17:41 半夏微澜ぺ 阅读(31868) 评论(0) 推荐(0) 编辑
css3 appearance 改变元素外观
摘要:h5 input标签的默认样式去除: 去掉date类型<input>框的叉叉: ::-webkit-clear-button { -webkit-appearance: none; } 去掉number类型<input>框的上下箭头: ::-webkit-inner-spin-button { -w 阅读全文
posted @ 2016-12-06 15:06 半夏微澜ぺ 阅读(245) 评论(0) 推荐(0) 编辑
让ie支持css3的一些htc文件
摘要:1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName。 2. Aaron Gustafson的 eCSStender此方法支持 阅读全文
posted @ 2016-12-06 14:35 半夏微澜ぺ 阅读(652) 评论(0) 推荐(0) 编辑
ie7 ie8 使用border模拟圆
摘要:border-radius 属性ie8+才支持,ie7 ie8 下的圆角就可以使用border进行模拟;(移动端都支持) 我们平常使用border-style一般都是solid实线,其他常用的还有dashed以及dotted,我们这里的主角就是dotted点,在IE浏览器下,dotted点是被渲染成 阅读全文
posted @ 2016-12-06 11:46 半夏微澜ぺ 阅读(929) 评论(0) 推荐(0) 编辑
label标签的可访问性
摘要:与表单元素关联的方法(IE6下label标签包裹控件的方法是不顶用的): 1 使用for和id关联控件 <p><label for="test">标签</label> <input name="input" type="text" id="test" /></p>(一个控件可以支持多个label) 阅读全文
posted @ 2016-12-05 18:32 半夏微澜ぺ 阅读(171) 评论(0) 推荐(0) 编辑
css 选择器中的正则表达式
摘要:正则表达式在任何语言中都有使用,只是使用的形式不一样而已 css也是一门语言,也有自己的正则表达式 正则表达式中的一些通用规则: 1 ^ 表示字符串开始位置匹配 2 $表示字符串结束为止匹配 3 *表示字符串任意位置匹配 4 i表示字符串匹配不区分大小写 5 g 表示字符串全局匹配 css属性选择器 阅读全文
posted @ 2016-12-05 16:07 半夏微澜ぺ 阅读(9243) 评论(0) 推荐(0) 编辑
css3-----calc()
摘要:什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他。 calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。 阅读全文
posted @ 2016-12-02 18:06 半夏微澜ぺ 阅读(240) 评论(0) 推荐(0) 编辑
css原生变量 var
摘要:css 变量的支持情况: 在pc端支持还不错,ie不支持,移动端也不支持,大概这就是css变量没有广泛使用的原因吧 CSS预编译工具Sass/Less/Stylus的便捷之处就是可以定义变量,方便代码的维护,其实css也有自己原生的变量var: 命名方式:--* (以--开头,*代表变量名称) 变量 阅读全文
posted @ 2016-12-02 17:51 半夏微澜ぺ 阅读(1946) 评论(0) 推荐(0) 编辑