html+css
文章平均质量分 64
andyliu
会使用phpjshtmlubuntu我的微博http://weibo.com/u/2459274251
展开
-
css鼠标样式
巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊。CSS鼠标样式语法如下:任意标签中插入 style="cursor:*" 例子:文本或其它页面元素 文本或其它页面元素 注意把 * 换成如下15个效果的一种:下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧! hand是手型 CSS鼠标手型效果poi转载 2012-03-23 13:27:58 · 538 阅读 · 0 评论 -
html5 placeholder 属性 并检测浏览器是否支持这个属性
今天看一段js代码的时候发现这样一段话if ("placeholder" in document.createElement("input")) return true;else return false;这句话的意思是判断input对象中有没有placeholder属性。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为原创 2013-02-17 15:34:14 · 1780 阅读 · 0 评论 -
深入理解浏览器兼容性模式
关于各种浏览器模式,网上已经有许多文档和资料了,但是很少有能够完全将几个概念阐述清楚的。大部分的资料稍显过时,有些内容可能已经不再适用了。本文中笔者将尽可能将几个概念阐述清楚,并去掉一些过时的内容,仅保留必要的干货。想必你一定知道浏览器有个标准(Standards)模式和一个怪异(Quirks)模式,或许你还听说过有个“准标准(Almost Standards)”模式。而当你打开 Inte转载 2012-10-23 08:46:17 · 1217 阅读 · 0 评论 -
css z-index 不起作用
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释:元素可拥有负的 z-index 属性值。注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!不起作用的原因第一个原因:Z-index 仅能在定位元素上奏效#a{width:200px;height:100px;posit原创 2012-10-17 10:12:36 · 1404 阅读 · 0 评论 -
js 笔记 第一章在html中使用<javascript>标签 以及 html文档模式
1、 标签的defer 属性:延迟脚本执行使用defer='defer' 属性可以让脚本在文档完全呈现完之后再执行,延迟脚本总是按照指定他们的顺序执行的。2、 标签的async属性: 表示当前的脚本不必等待其他脚本,也不必阻塞文档的呈现。但是不能保证异步脚本按照他们在页面中执行的顺序执行。 Test alert('nihao');原创 2012-09-25 22:33:39 · 1186 阅读 · 0 评论 -
css3 background-size
用于设置背景图片的大小,有2个可选值,第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定1个值得,则第2个值默认为auto引擎类型GeckoWebkitPrestoBackground-size -webkit-background-size-o-background-转载 2012-09-24 12:15:55 · 1072 阅读 · 0 评论 -
css3 box-shadow
语法:box-shadow: || 相关属性:text-shadow取值: ? ? || :阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色说明:设置块阴影引擎类型GeckoWebkitPrestoBox-shadow转载 2012-09-25 10:10:57 · 1043 阅读 · 0 评论 -
CSS Hack
CSS Hack是我们解决浏览器兼容性(尤其是IE各版本)问题的常用手段。CSS Hack的手法可以说是五花八门,使用时经常混淆。下面是一个汇总,以便查阅。js代码/***** Selector Hacks ******/ /* IE6及更低版本浏览器 */* html #uno { color: red } /* IE7 */*:first-转载 2012-09-18 12:19:58 · 574 阅读 · 0 评论 -
ios android 电脑端拖动
最近要做个一个手机端的拖动效果,在网上找到一个例子,最后自己改造了一下。实现了,兼容ios android 和电脑端的 拖动效果。 小记一下主要知识点 1:与mousedown、mousemove、mouseup对应的触摸事件分别是touchstart、touchmove、touchend。 2:js 的 apply方法apply() 方法有两个参原创 2012-09-30 08:57:41 · 1231 阅读 · 0 评论 -
15个HTML5的初级技巧
Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。"http://www.w3.org/TR/xhtml1/DTD/xhtml1-t转载 2012-07-31 21:37:13 · 808 阅读 · 0 评论 -
CSS3变换入门
尽管人们期望在屏幕上有些改变,但是CSS和HTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现。比如一个链接要么是这个颜色,要么是那个颜色;一个文本区域要么这么大,要么那么大;一张图片要么是透明的要么是不透明的;它们是从一个状态直接变到另一个状态——中间并没有过渡。这导致大部分网页有些生硬,因为元素只会很死板的切换或改变。是的,你可以使用DHTML、jQ转载 2012-08-02 20:06:22 · 942 阅读 · 0 评论 -
初识 -webkit-filter
现在规范中支持的效果有:grayscale 灰度sepia 褐色saturate 饱和度hue-rotate 色相旋转invert 反色opacity 透明度brightness 亮度contrast 对比度blur 模糊drop-shadow 阴影现在,让我们看一下一些简单的效果吧:原图模糊50%灰度转载 2012-07-12 22:08:06 · 662 阅读 · 0 评论 -
css3 border-image
CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image。今天我们就一起来学习这个border-image的属性。学习完这个border-image以后,大家一定会很兴奋,因为他改变我了们以往设置border的效果,以前我们border只能简单的设置一些纯色或几种简单的线型(如solid,do转载 2012-07-11 15:53:59 · 1995 阅读 · 0 评论 -
复制到剪切板 兼容(IE/FF/Chrome/..)
最近做一个复制到剪切板的功能 在网上找了很多都不好用 最后发现在了 这篇文章很不错 简洁好用 贴出来 希望能帮到更多人原文地址:http://www.lsproc.com/wiki/snippets:copytoclipboard此代码修改自 discuz!, 简易实现代码如下:var clipboardswfdata;原创 2012-05-31 13:28:57 · 17391 阅读 · 2 评论 -
css 在各种浏览器兼容调整
\9 ie 6,7,8,9 都有效 margin-top:10px \9;* ie 6,7 有效 *margin-top:10px;_ ie 6 _margin-top:10px;写的时候按照从兼容的多到兼容的少的顺序来写!important 在 CSS 中的意思就是优先调用,Firefox等认识它,但是ie不认识它(虽然i7e已经认识它了),因原创 2012-03-21 17:39:11 · 647 阅读 · 0 评论 -
设置div中文字超出时自动换行
一、对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;} 2.(Firefox浏览器)white-space:normal; wo转载 2012-03-15 15:56:11 · 38837 阅读 · 1 评论 -
html css 的页面切图
*{margin:0;padding:0;list-style:none;}#tab, #tab li a:hover{background:url(ding.png) no-repeat;z-index:10}#tab{width:760px;height:42px;}#tab li{float:left;}#tab .l1 a{display:block;width:100px原创 2012-03-15 15:57:03 · 1422 阅读 · 0 评论 -
meta 之 viewport 小记
1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)2、height : 和width相对应,指定高度3、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例4、maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0原创 2013-02-16 15:13:46 · 1011 阅读 · 0 评论