分类目录归档:html/css

重置样式

移动端

PC端

加载图片失败,怎样替换为默认图片

img元素加载图片失败,则变成一个小图标,让页面变得难看。此时如何替换为默认图片?
onerror属性
img元素自带onerror属性,加载失败时,触发error事件

jquery.error函数
jquery提供对应的事件处理函数

jquery.one函数
使用上面两种方法,假如默认图片也加载失败,则变成死循环. 此时可使用one()绑定事件

另外error事件,不支持冒泡,jquery.delegate函数捕捉不到error事件。
原生JS方法:

如何在手机浏览器网页中点击链接跳转到QQ聊天界面

既然电脑上有tencent://协议,那么手机上一定也有吧,抓包分析了一下:

是的,具体的是:

,点击试一下?

可是,不知道为什么现在只能到达手机QQ界面,无法到达QQ聊天界面,我用的ios测试的,继续抛砖引玉中。

后来进行了另外的尝试,点击这里试一下。是不是可以进入聊天界面。

链接是这样的:

超酷的固定菜单页面滚动效果

CSS+Cookie实现的固定页脚广告条

经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条。本文将介绍使用CSS+Cookie来实现这一效果。
HTML
首先,我们将横幅广告的html代码放到页面最底部,因为是最后加载的。也可以使用外部js动态插入到页面底部。整个HTML结构由遮罩层.float_layer,内容层.float_content组成,其中.float_bg为广告部分,内容可以是图片、文字等任意形式的html元素,.float_close是关闭按钮,用户不喜欢广告可以关闭展示。

继续阅读

CHROME下去掉保存密码后输入框变成黄色背景样式

做前端的童鞋一定经常遇到过chrome保存密码后input输入框会变成黄色,对于正在开发中的项目,老是出来黄色背景很是不爽。

我们用代码审查查看了input样式发现有如下样式设定。
1
然后我用!important设定后发现不能修改默认状态。最后用了阴影实现了

如果不想保存密码的话加个autocomplete=”off”到form或者input就行了。

相关链接:http://labs.enonic.com/articles/remove-forced-yellow-input-background-in-chrome

超级经典一套鼠标控制左右滚动图片带自动翻滚

css部分:

HTML部分:

继续阅读

用JS控制iframe里的页面,做到3秒自动换一个。

假定iframe的id为ifr
下面是js程序

AJAX:

居中百分比宽高的元素

原文:Centering Percentage Width/Height Elements
译者:涂鸦码龙

如果知道该元素确切的宽高,居中它比较容易,可以参考此文topleft 设成 50%,负 margin 分别设置该元素宽,高的一半。如果明确知道该元素的宽高,用此法居中很容易,如果它的宽高是百分比呢?

你可能认为负的百分比 margin 可以搞定,它适用于水平的 margin,但是 margin 基于宽度(垂直 margin 也是)(译者注:margin 是百分比的话,跟此元素的包含块的宽度有关,见规范),因此当你用负的 top margin 时,失败了。

有个小技巧 ,用一个“ghost”伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙。但是这个方法要求待居中的元素是 inline-block,不是一个真正通用的方案。可能你想居中一个模态窗口,受小屏幕 / 响应式设计所限,你很可能会把对话框设计成百分比宽度(或者其它未知情况,比如仅有 max-width 最大宽度。)

有一种方案!Mary Lou 在 Codrops 用到的,她的文章 / 示例:漂亮的模态窗口效果继续阅读