CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的 详细阐述 。原先只在CSS玩家之间作为一种制作方法流传，后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 http://www.go...
H5结构知识点一：body,nav,section需要h1-h6; header,div不需要h1-h6. h5结构测试网站：https://gsnedders.html5.org/outliner/移动端么meta格式：移动端要加的标签<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">移动端图片自适应css(配合上述标签使用):img{display:block;max-width:100%;}css3标签：ouline:none 点击无虚线css3内边距和边...
这些统计中比较有趣的部分是，IE6、IE7、IE8之间的数值很接近，这防止了单个Microsoft的浏览器占居统治地位——与过去的情况相反。根据这些令人遗憾的统计结果，在为客户开发网站的时候开发人员对所有当前使用的IE浏览器做全面的测试是必要的，而且这样在个人项目上也可以拉拢更多的用户。多谢那些JavaScript库(框架)，跨浏览器的Javascript的测试已经像当前形势所允许的那样接近完美了。但在CSS开发中还不是这样，特别是关系到IE目...
首先，关于伪元素的语法：有的时候单冒号也能用，但最好写双冒号。伪类：匹配的是元素(不同状态或结构的)。伪元素：匹配的是元素中的一部分内容(首字符，首行文本)。::first-letter匹配某元素的首字符。例： <!DOCTYPE html><html><head><title>test010_伪元素选择器_::first-letter</title><style type="text/css">p::first-letter{color:red;}</style></head><body><p>hello world</p></body></html> 结果：::first-line匹配某元...
精灵图精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术 原理:将多张单一的图片整合到一张图上，以背景引入,并使用background-position调整背景位置，使之显示不同图片 目的:降低浏览器向服务器的请求次数,提高网页加载速度 优点:降低请求次数,多张图整合成一张降低整体大小,整改一张图使得整体风格主题改变,提高维护性 缺点:自适应布局难控制,制作繁琐,不合理的整合图片会导致调用混乱,一张图更改导致整体变化(牵一发...
首先，id选择器权重级别最高，class选择器其次，html选择器最后。 例子：<div ><div ><div ><span>嘿嘿嘿</span></div></div> </div> 选中span标签当选中span标签，也可能权重相同，也可能不同，得分下面2种情况。1.权重相同，谁在后面谁决定。（下面例子嘿嘿嘿的字体颜色为黄色）<style>div.t2 span { color:red;}div.t1 span {color:yellow;} </style> 2.权重不同，权重大的决定。（下面例子嘿嘿嘿的字体颜色为黄色）<style>/...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.container{width: 1000px;margin: 10px auto;border: 1px solid red;}h3.title {color: #F2AE11;font-size: 1.3em;margin-bottom: 3em;text-align: center;font-weight: 500;line-height: 1.1;}h3.title span {display: block;/*设置为块级元素会独占一行形成上下居中的效果*/font-size: 3em;color: #212121;position: relative;/*定位横...
常见的基于关系的选择器选择器选择的元素A E元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)A > E元素A的任一子元素E(也就是直系后代)E:first-child任一是其父母结点的第一个子节点的元素EB + E元素B的任一下一个兄弟元素EB ~ EB元素后面的拥有共同父元素的兄弟元素E你可以任意组合以表达更复杂的关系。你还可以使用星号（*）来表示”任意元素“。一般情况下，如果你提高了某个选择器的的确定度，你便提高它...
1.一列布局html:<div class="header"></div><div class="body"></div><div class="footer"></div>css: .header{height: 100px;background: pink;}.body{height:500px;background: blue;}.footer{height:100px;background: #ddd;} 2.双飞翼布局（中间自适应，左右列固定宽度）html:<div class="main"><div class="cont"></div></div><div class="left"></div><div class="right"></div>css: .main {float: left;width: ...
这是个css3动画框架，现在很流行，在小动画效果有很多，使用的方式<div class="animated bounce"></div>/*只要修改bounce这个类就可以*/ 一、atention Seekers1、bounce2、flash3、pulse4、rubberBand5、shake6、swing7、tada8、wobble9、jello二、Bouncing Entrances 1、bounceIn2、bounceInDown3、bounceInLeft 4、bounceInRight5、bounceInUp三、Bouncing Exits1、bounceOut2、bounceOutDown3、bounceOutLeft4、bounceOutRight5...
随着项目规模的增大，协作开发也越来越长见，协作开发时间久了就会遇到一个恶心的文件冲突问题。假设一个HTML文件引用了两个外部JS文件，而这两个外部JS文件你没有修改的权限，你只有HTML文件的修改权限，两个外部JS文件都定义了window.onload事件。代码假设如下：<script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> a.js的文件内容：window.onload=function(){ alert("这...
一般而言，鼠标以斜向上的箭头显示，移到文本上时变为有头的竖线，移到超级链接上变为手型。但用css可控制鼠标的显示效果，如可使鼠标移到普通文本上也显示成手型。 用css控制的语法如下: <span style="cursor:*">文本或其它页面元素</span> 把 * 换成如下15个效果的一种： hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。 下面是对这1...
边框 http://www.w3school.com.cn/cssref/pr_border.aspp {border:5px solid red; }可以按顺序设置如下属性： border-width border-style border-colorobject.style.border="3px solid blue"边框阴影(CSS3 ) http://www.w3school.com.cn/cssref/pr_box-shadow.aspdiv{box-shadow: 10px 10px 5px #888888;}JavaScript 语法：object.style.boxShadow="10px 10px 5px #888888"语法box-shadow: h-shadow v-shadow blur spread color in...
很多时候，我们不能使用一些现成的js插件实现弹框效果。于是乎，总是不得不使用最原始的方式来实现类似弹框的效果。不巧，最近在项目中遇上了一次，在此将使用过的代码进行一波整理。 要实现css蒙板思路如下：用一个div弹出框下面的东西，做一个覆盖层；用一个div做为弹出框内容，将之覆盖于所有div之上。即：（1）一个能够完整覆盖背景的灰色div；（2）一个有弹出框弹出效果（浮于页面之上，可以是类似突出效果）的div，div之中可...
div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme-info .field{font-weight:bold}#crayon-theme-info .field,#crayon-theme-info .value{margin-left:5px}#crayon-theme-info .description.value{font-style:italic;color:#999}#crayon-theme-info .type{text-align:center;min-width:120px;font-weight:bold;border-right:1px solid #ccc;padding-right:5px}#crayon-theme-...