xhtml / css
关注
分享
扫一扫
文章平均质量分 78
iteye_4865
这个作者很懒，什么都没留下…
展开
-
cubic-bezier 模拟实现
cubic-bezier 曲线是 css3 动画的一个重要基石。另一个为 steps （ease 等都是 cubic-bezier 的特殊形式），css3 中的 cubic_bezier 曲线限制了首尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常用的动画效果，同时 canvas 也进行了相应的支持，也存在相应的工具可以根据想要的曲线得到对应 cubic bezier 曲线的控制点参数。...原创 2013-01-05 16:34:03 · 992 阅读 · 0 评论 -
mhtml datauri 与 css expression
mhtml，datauri，css expression 三者有什么关系？1.基础：一切源自 yahoo performace 所提出的第一条：尽量减少连接数规则。于是在 ie<8 下，有人提出了 mhtml 解决方案。并且也有了自动化工具 cssembed。 2.问题：...原创 2010-09-29 18:17:14 · 256 阅读 · 0 评论 -
获取css属性计算值问题
都知道标准浏览器可以用 getComputedStyle 以及对应 ie 可以用 currentStyle 来取得元素渲染时的实际css属性值吧。但是对于css缩写属性似乎很混乱，虽然标准说缩写属性应该正确读取，For some shorthand properties that take missing values from other sides, such as...原创 2010-01-29 23:11:30 · 196 阅读 · 0 评论 -
W3C 万维网联盟
万维网联盟（World Wide Web Consortium，簡稱W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李。为解决web应用中不同平台、技术和开发者带来的不兼容问题，保障Web信息的顺利和完整流通，万维网联盟制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。标准的内...原创 2008-11-11 00:27:23 · 808 阅读 · 0 评论 -
两列布局的自动宽度以及DIV水平居中
两列布局的自动宽度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">...原创 2008-10-20 14:14:33 · 230 阅读 · 0 评论 -
Cross Iframe Trick：the Old New Thing
....doc原创 2008-10-18 22:21:10 · 136 阅读 · 0 评论 -
css 盒模型整理
BOX 模型（BOX Model ）属性什么是BOX ？CSS 把HTML 中以<somesign> ……</somesign> 的部分称为BOX （容器），BOX 有三类属性：padding 、margin 和border 。Margin 属性：Margin 属性分为margin-top 、margin-right 、margin-bottom 、margin...原创 2008-10-17 00:36:33 · 118 阅读 · 0 评论 -
CSS选择器优先级
CSS样式选择器分为4个等级，a、b、c、d，可以以这四种等级为依据确定CSS选择器的优先级。1.如果样式是行内样式（通过Style=””定义），那么a=12.b为ID选择器的总数3.c为Class类选择器的数量。4.d为类型选择器的数量5.属性选择器，伪类选择器和class类选择器优先级一样，伪元素选择器和类型选择器一样6.!important 权...原创 2008-10-17 00:30:59 · 276 阅读 · 0 评论 -
css常用选择器的组成
我们在使用css控制页面表现时,经常会出现这样的情况,定义混乱,明明指定了元素样式,样式却应用不上,很多时候,这些是因为对css选择器的片面理解造成的,本文将系统的描述css选择器的组成及使用规则,同时,也是对Lan天才同学CSS选择器优先级的数位计算法一文的简要补充.css选择器的主要组成1 通用选择器,使用度不高,作用类似通配符,匹配所有元素.用" * "号表示,用来对也面上所有元素应...原创 2008-10-17 00:19:29 · 290 阅读 · 0 评论 -
css选择器介绍
选择器(selector)是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。 1、标记选择器<style> h1{ color:red; font-size:25px; } </style> ...原创 2008-10-17 00:16:34 · 108 阅读 · 0 评论 -
背景图样式回顾
正式点叫 background-image recap ，最近 kissy editor 皮肤做得有点晕，复习解读下 css3 规范 background 部分。chrome 演示：chrome and background-imagebackground-attachment :fixed : 背景相对于浏览器视窗...原创 2010-09-30 13:51:38 · 143 阅读 · 0 评论 -
Hijax 理念
Hijax 在 Bulletproof Ajax 中作者提出了一个叫 Hijax 的理念 ，不是极端的完全采用 ajax 数据与表现分离的做法，而是稍微对传统页面增强一下，javascript 仅仅作为局部刷新的桥梁，所有逻辑仍然放在服务器上，相对于传统做法，Hijax 将页面进一步划分为分离的模块，对每个模块 用相应的处理页面表示，总的页面由各个分离的模块页面 inclu...2009-08-08 21:35:39 · 191 阅读 · 0 评论 -
css 与 javascript 摆放顺序
根据 yahoo 的性能调优建议 , css 放在头部，javascript放在尾部，可是由于其他一些原因，如遗留代码等，往往javascript和css都放在头部。示例： <html><head> <link rel="stylesheet" type='text/css' href="w3c/layout.cs...2009-09-07 17:31:53 · 140 阅读 · 0 评论 -
write html parser
首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取等处理，这样做的结果很严重！ Not XHTML Parser 另一点需要注意的是：不是构建 xhtml parser ，如果是 xhtml 的话可采用 parser generator 根据 grammar 直接生成解析器即可，而 html 由于对错误很宽容（比如普遍的标签不闭合问题），具备超强的错误纠正机制，...原创 2011-12-01 02:48:54 · 173 阅读 · 0 评论 -
css reset revisit
正如 javascript 兼容库的作用， css reset 也扮演着类似的角色，css reset 保证了各个浏览器最基本元素渲染的一致性和统一性，从而减少在构建复杂界面过程中遇到各个浏览器出现不同展现的问题。以前对于 css 框架关注比较少，而近来随着 bootstrap 以及 lesscss 等的出现，使得构建 css 框架也开始成为一种必要。那么先从 css reset 开始...原创 2012-07-25 00:32:49 · 122 阅读 · 0 评论 -
兼容 ie 的 transform
css 2d transform 是 css3 引入的一个新的 css 属性，特别是可以很方便对元素进行旋转和扭曲变换，摆脱了传统枯燥的方方正正的形象，很好玩，但其实 ie 早就支持这种变化了，通过 matrix 滤镜在一些限制条件下完全可以达到同样的效果. 兼容 从角度转化为 matrix 滤镜所需要的矩阵值涉及基础的坐标旋转方面的知识，可参考 wiki . 简单举例： ...原创 2012-02-23 14:00:31 · 1427 阅读 · 0 评论 -
转载：瀑布流布局浅析
简介 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“我要买” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。 这种布局适合于小数据块，每个数据块内容相近且...原创 2011-09-29 19:02:32 · 434 阅读 · 0 评论 -
margin合并整理
多个段落为了美观，浏览器会将它们的垂直距离变得统一，这是一种很常见的现象，在规范中这种现象正式名称叫做：collapsing-margins（margin合并） 。 margin合并的发生要求很多必要的条件：1. 水平margin不会合并。2. 两个上下渲染相邻（不一定是兄弟节点）的块状元素在正常页面流情况下会发生 margin 合并。...原创 2010-06-23 11:25:51 · 288 阅读 · 0 评论 -
fixed 定位 auto 问题
当一个元素被 fixed 定位时，它会脱离文档流而以视窗为参考对象重新定位，但是当 left,top 不设置时，会出现奇怪的现象，尚没找到解释源。absolute 定位 设置定位前：设置absolute定位后： 但是不设置left，top则会： 效果表现为仅仅是脱离文档流...原创 2010-12-02 11:58:29 · 211 阅读 · 0 评论 -
css的优先级与继承
起因：很早就听说通配选择器不好，最好不要使用，似乎使用场景只限于最简单的 css reset： * { margin:0; padding:0; } 直到偶尔看到 这篇文章 对规范深入浅出的分析才似乎有点理解了。规范：首先从层叠（cascade）说起， css 的来源通常有三...原创 2010-11-08 12:30:58 · 180 阅读 · 0 评论 -
搜索结果是否需要语义化
引言： (X)HTML不应该描述网页的外观和表现（那属于css）。它真正的目的应该是提供文档内容的上下文结构和含义—称为“语义标签”。（From Pro CSS Techniques）比较: 无聊看了下baidu，google搜索引擎所产生的结果页面代码，发现两者风格很不一样，google html代码具有明显的语义化，而baidu html代码...2009-09-20 19:59:12 · 86 阅读 · 0 评论 -
初探淘宝查询的方便功能
上了一下淘宝查询商品界面，发现了一个很方便的功能，分析一下哦初始界面： 下拖滚动条时： 可见一些便捷的过滤条件会始终保留在页面顶部，很实用，很方便。用ie6 ， firefox3.5 ，chrome2看了下，taobao很大胆的忽略了ie6，确实是国内web开发所少见的，想起了曾经看过的 ...2009-09-07 17:48:43 · 130 阅读 · 0 评论 -
有关css有趣布局的解答
1.图片在不定高度容器内的垂直水平居中韩国人的一个很好实现利用开头一个空白的容器等高的图片行内元素撑大行高，后续的图片行内元素 vertical-align:middle则该图片参考撑大的行中线垂直居中我这里修改 空白图片高度为 height:100% ,而不是原来的 height:160px ，更具灵活性 <!DO...2009-07-02 15:14:34 · 89 阅读 · 0 评论 -
html body 100% 解析和应用
常见的html, body { height: 100%;}解释 这是为了兼容各个浏览器。IE 处于混杂模式时，body以窗口为高度参照，body设置为100%就可以使得页面和窗口一样高，body里面的嵌套div也可以扩展到窗口高度，这样的话可以使布局适应浏览器窗口大小。窗体 》body》div (html...2009-06-22 21:31:16 · 485 阅读 · 0 评论 -
固定宽度表格布局设定宽度问题
近日做 GridLite 轻量级的Ext Grid 的列宽拖放调整时遇到了一点小问题，记一下呵 首先看下面一段代码： 动态生成一个 table-layout:fixed 的表格 (某一列内容很多不换行，并设置该列宽度)，然后待table渲染后再设置整个 table的css宽度。 table.gridLite { border-collapse:coll...2009-06-04 02:56:58 · 269 阅读 · 0 评论 -
JE 插入代码
tinymce吧，终于去掉了没落的 window.open 弹出窗口，改为时尚的弹出div，可为什么里面还要土土得采用 iframe 嵌入！又不需要格式化文本功能的( ⊙ o ⊙ )啊！ 不过总算有进步了，以前弹出窗口早就不爽了，每次都要找半天代码窗口在哪里，呵！...原创 2009-04-13 22:45:32 · 122 阅读 · 0 评论 -
dtd 的作用 - ie8 bug !?
分析一下 dtd 对于 firefox 和 ie 的 作用 首先看一段很短的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="h...2009-04-07 21:33:55 · 256 阅读 · 0 评论 -
简析行内元素
平时块状元素用得比较多，也比较熟悉，可对于行内元素才是真正包含文字数据的地方，也是重点需要修饰的地方。行内元素提纲： 1. 行内非替换元素 一般是 该元素的内容直接就显示在文档中，如 p元素 中的文本 就 原样不动的显示在最终的界面上。 2.行内替换元素 作为其他显示的一个钩子元素 ，比如 img input 等 ，是要 指示用户代理 插入一个 控件...2009-04-02 17:28:33 · 199 阅读 · 0 评论 -
margin 水平居中原理
如果要使 一个 div在屏幕上水平居中 ，标准的做法是 margin -left: auto; margin -right: auto;根据css 标准 关于水平格式的属性 ： margin-left ,border-left,padding-left,width,padding-right,border-right,margin-right ,这七个属性的值加在一起必须是...2009-04-01 13:55:52 · 312 阅读 · 0 评论 -
浏览器编年史
自己整理的，将要讲的一个东西，放在 slideshare 上了Google Dochttp://www.slideshare.net/yiminghe/web-browser-1147815 主流浏览器的内核： Browser Engine ECMAScript Engine...原创 2009-03-16 00:28:38 · 187 阅读 · 0 评论 -
我喜欢的前端开发利器
1.firefox 正是由于 firefox 的开放性 才 有了 以下 层出不穷的 免费工具。 1.1 firebug firebug 可以 查看页面指定部分html，动态改变 ，调试javascript ，改变css，查看布局，。。。。一把瑞士军刀。 ...2009-03-12 16:31:01 · 308 阅读 · 0 评论 -
简述 css 选择器
css 可以定义不同的标准 来选择可以进行格式化的元素。 1. 元素所在的类型或名称。如 h1 {color:red;} p {color:red;} 2.元素所在的位置信息。如 2.1 选择某个元素下所有的子元素 ...原创 2009-03-09 13:55:59 · 254 阅读 · 0 评论 -
DOCTYPE文档类型声明
HTML 3.2 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">HTML 2.0<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">HTML Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...2009-02-15 18:36:37 · 167 阅读 · 0 评论 -
说说回车键触发表单提交的问题
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：1、如果表单里有一个type=”submit”的按...原创 2009-02-15 18:12:59 · 242 阅读 · 0 评论 -
On having layout
出处：http://old9.blogsome.com/2006/04/11/onhavinglayout译者注：一篇很好的文章，很久以前在blog上就推荐过，这两天断断续续花了点时间翻译了一下，推荐读读。英文原文在此。http://www.satzansatz.de/cssd/onhavinglayout.htm文中所有的 layout 这个单词都未作翻译，一来本身这个单词意思就...原创 2009-04-14 20:33:31 · 125 阅读 · 0 评论 -
转载：闭合浮动元素
updated : 2010-11-08Web前端标准在各浏览器中的实现差异 按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的...原创 2008-09-13 17:30:47 · 183 阅读 · 0 评论 -
转载：css float
Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的（我只是猜想）。如果你知道这些bug，你就能避免这些问题。 ...原创 2008-09-13 17:34:06 · 94 阅读 · 0 评论 -
IE 与 Firefox 的盒模型
对于 IE quirk 模式下的盒模型就不说了，相信都很清楚，那就看看同处于标准模式下也有不同之处。 代码1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...2009-05-20 01:34:00 · 167 阅读 · 0 评论 -
绝对定位的初始包含块问题
对于 body 的子节点绝对定位问题，我们一般设置 top 属性，即假设浏览器窗口左上角是 0，0 坐标，根据这一原则来进行计算合适的top值，使绝对定位元素定位到合适位置。但是 如果用到 bottom 属性，浏览器的表现就有差异了。假设bottom 属性为 0，这时就要明确到底哪个是绝对定位元素的初始包含块，根据 w3c 规范以及css权威指南，这个初始包含块由用户代...2009-05-16 04:52:29 · 331 阅读 · 0 评论 -
简译：网站提速最佳实践
第一次翻译如此长的文章，打算近期完全翻译，就简单描述一下思想，不求信达雅，希望大家都能快速掌握这些技巧，没有版权，随便传播。网站建设虽然对于普通程序员没有太大关系，但是从大局着想也能潜移默化中影响细节的效率实现。 正文 ( 原标题“Best Practices for Speeding Up Your Web Site” ，来源developer.yahoo.com...2009-05-13 23:20:32 · 160 阅读 · 0 评论