随笔分类 - html+css
摘要：关于各种浏览器模式，网上已经有许多文档和资料了，但是很少有能够完全将几个概念阐述清楚的。大部分的资料稍显过时，有些内容可能已经不再适用了。本文中笔者将尽可能将几个概念阐述清楚，并去掉一些过时的内容，仅保留必要的干货。想必你一定知道浏览器有个标准（Standards）模式和一个怪异（Quirks）模式，或许你还听说过有个“准标准（Almost Standards）”模式。而当你打开 Internet Explorer 的时候，又看到了什么浏览器模式、文档模式，还有什么兼容性视图等等...这些都是什么？啥是浏览器模式，啥是文档模式？标准模式和准标准的模式有什么区别？IE9兼容性视图和真正的IE9有
阅读全文
摘要：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！不起作用的原因第一个原因：Z-index 仅能在定位元素上奏效<style type="text/css">
#a{width:200px;height:100px;position:relative; background-color:red;z-index:100}
#b{width:300px;height:200px;bac
阅读全文
摘要：最近要做个一个手机端的拖动效果，在网上找到一个例子，最后自己改造了一下。实现了，兼容ios android 和电脑端的 拖动效果。 小记一下主要知识点 1：与mousedown、mousemove、mouseup对应的触摸事件分别是touchstart、touchmove、touchend。 2：js 的 apply方法apply() 方法有两个参数，用作 this 的对象和要传递给函数的参数的数组。例如：function sayColor(sPrefix,sSuffix) { alert(sPrefix + this.color + sSuffix);
}; var ob...
阅读全文
摘要：1、<javascript> 标签的defer 属性：延迟脚本执行使用defer='defer' 属性可以让脚本在文档完全呈现完之后再执行，延迟脚本总是按照指定他们的顺序执行的。2、<javascript> 标签的async属性： 表示当前的脚本不必等待其他脚本，也不必阻塞文档的呈现。但是不能保证异步脚本按照他们在页面中执行的顺序执行。<!DOCTYPE html>
<html> <head> <title>Test</title> <script type="text/java
阅读全文
摘要：语法：box-shadow：<length><length><length><length>||<color>相关属性：text-shadow取值：<length><length><length>?<length>? ||<color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色说明：设置块阴影引擎类型GeckoWebkitPrestoBox-shadow-moz-box-shadow-webkit-border-shadow兼容性：类型
阅读全文
摘要：用于设置背景图片的大小，有2个可选值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定1个值得，则第2个值默认为auto引擎类型GeckoWebkitPrestoBackground-size-webkit-background-size-o-background-size兼容性：类型Internet ExplorerFirefoxChromeOperaSafari版本(×)IE6(×)Firefox 2.0(√)Chrome 1.0.x(√)Opera 9.63(√)Safari 3.1(×)IE7(×)Firefo
阅读全文
摘要：CSS Hack是我们解决浏览器兼容性（尤其是IE各版本）问题的常用手段。CSS Hack的手法可以说是五花八门，使用时经常混淆。下面是一个汇总，以便查阅。js代码/***** Selector Hacks ******//* IE6及更低版本浏览器 */* html#uno { color: red }/* IE7 */*:first-child+html#dos { color: red }/* IE7, FF, Saf, Opera */html>body#tres { color: red }/* IE8, FF, Saf, Opera (除了IE 6、7的所有浏览器) */ht
阅读全文
摘要：尽管人们期望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的实在太少了，而那些还需要用代码来实现。比如一个链接要么是这个颜色，要么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另一个状态——中间并没有过渡。这导致大部分网页有些生硬，因为元素只会很死板的切换或改变。是的，你可以使用DHTML、jQuery或者自己编写JS来实现过度，但是这需要更多的代码来实现本应该非常简单的功能。我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及
阅读全文
摘要：Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，希望能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML5的Docty
阅读全文
摘要：现在规范中支持的效果有：grayscale 灰度sepia 褐色saturate 饱和度hue-rotate 色相旋转invert 反色opacity 透明度brightness 亮度contrast 对比度blur 模糊drop-shadow 阴影现在，让我们看一下一些简单的效果吧：原图模糊50%灰度100%灰度50%褐色100%褐色50%亮度100%亮度色相反色饱和度对比度文章转载自：http://www.qianduan.net/what-is-webkit-filter.html
阅读全文
摘要：CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color，只剩下最后一个边框图片border-image。今天我们就一起来学习这个border-image的属性。学习完这个border-image以后，大家一定会很兴奋，因为他改变我了们以往设置border的效果，以前我们border只能简单的设置一些纯色或几种简单的线型（如solid,dotted,double,dashed等）那么我们以后就可以通过border-image这个属性改变以前的一切，可以给边框设置不同的图片效果。至于如何实现，就跟我一起往下看吧。为了能更好的学习和理解bo
阅读全文
摘要：最近做一个复制到剪切板的功能 在网上找了很多都不好用 最后发现在了 这篇文章很不错 简洁好用 贴出来 希望能帮到更多人原文地址：http://www.lsproc.com/wiki/snippets:copytoclipboard此代码修改自 discuz!, 简易实现代码如下:<script>
var clipboardswfdata; var setcopy_gettext = function(){ clipboardswfdata = document.getElementById('data').value; window.document.cl...
阅读全文
摘要：巧合要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式，小例子供大家使用啊。CSS鼠标样式语法如下：任意标签中插入 style="cursor:*" 例子：<span style="cursor:*">文本或其它页面元素</span> <a href="#" style="cursor:*">文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种：下面是对这15种效果的解释。移动鼠标到解释上面，看看你的鼠标起了什么变化吧！ hand是手型 <a h
阅读全文
摘要：\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已经认识它了），因此我们可以利用它进行各个浏览器之间的微调。 margin-top:10px !important;ie 7，ie 8 兼容 <meta http-equiv="X-UA-Compatible" content="IE
阅读全文
摘要：<html><head></head><style>*{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;height:42px;}#tab .l1 a:hover{background-position:0px -42
阅读全文
