• HTML5 相对于 HTML4 的差异

    此文章指向了一个外部链接

    发布时间:2011/7/25 所属分类:【(X)Html/CSS
  • HTML5设计原理

    这是一篇好文章, 转载保存. 译文地址, 感谢李松峰的辛勤劳动.

    发布时间:2011/7/6 所属分类:【(X)Html/CSS
  • 在apple设备上显示网站图标

    使用apple设备(iPhone, iPad, iTouch等)上的safari上网, 可以将喜欢的站点添加到主屏幕上. 为了给访问者留下美好的印象, 可以给网站准备apple设备使用的图片.
    最简单的方法是在网站的根目录放置一张图片, 名为 apple-touch-icon.png. 针对iphone3及以下, 可以再放置名为apple-touch-icon-57x57.png的图片, 针对iphone4, 可以再放置名为apple-touch-icon-114x114.png的图片, 针对iPad, 可以再放置名为apple-touch-icon-72x72.png的图片.

    发布时间:2011/2/10 所属分类:【(X)Html/CSS
  • HTML5 元素周期表

    包括草拟中的总共106个HTML5元素排列成周期表样式, 速度围观, 地址Periodic Table of the Elements

    发布时间:2010/9/7 所属分类:【(X)Html/CSS
  • Doctype介绍

    浏览器不同的渲染模式:

    1. Quicks Mode(诡异模式)
    在该模式下,浏览器无视当时的Web标准以使得让那些按照20世纪90年代后期比较流行的实践来实现的页面能够正确的被渲染。

    2. Standards Mode(标准模式)
    在该模式下,浏览器会试着去遵守标准来渲染页面。HTML5把这种模式称为:“no quirks mode”。

    3. Almost Standards Mode(近标准模式)
    Firfox、Safari、Chrome、Opera(7.5开始)和IE8也有这种模式,这种模式下实现了传统的table cells的垂直拉伸但有没有严格的遵守CSS2的标准。HTML5把这种模式称为:“limited quirks mode”

    发布时间:2010/6/26 所属分类:【(X)Html/CSS
  • DOM Storage全解析

    sessionStorage与localStorage

    Web Storage实际上由两部分组成:sessionStorage与localStorage。

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

    localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

    发布时间:2010/6/23 所属分类:【(X)Html/CSS
  • 编写跨浏览器兼容的 CSS 代码的金科玉律

    作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。

    Browsers-css in The Principles Of Cross-Browser CSS Coding

    理解 CSS BoxModel
    理解 block 级和 inline 级 对象的区别
    理解 Floating 和 Clearing 属性
    首先使用 IE 进行测试
    IE 浏览器最常见的问题
    永远不要指望在所有浏览器中都一模一样
    Form 控件在不同浏览器显示总是不同
    字体的表现都有差异
    使用 CSS Reset

    发布时间:2010/6/9 所属分类:【(X)Html/CSS
  • HTML5 Table Template

    HTML5 Table Template, HTML5表格模板, 基本涵盖表格中所用元素.
    <table dir="ltr" width="500" border="1">
    <caption>Here we assign header information to cells by setting the scope attribute.</caption>
    <colgroup width="50%" />
    <colgroup id="colgroup" class="colgroup" align="center" valign="middle" title="title" width="1*" span="2" style="background:#ddd;" />
    <thead>
    <tr>
    <th scope="col">Name</th><th scope="col">Side</th><th scope="col">Role</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td>Darth Vader</td><td>Dark</td><td>Sith</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>Obi Wan Kenobi</td><td>Light</td><td>Jedi</td>
    </tr>
    </tbody>
    </table>

    发布时间:2010/6/9 所属分类:【(X)Html/CSS
  • 兼容ie6的十条修复

    我们知道ie会在一段时间内仍然流行,但是我们仍然可以支持浏览器并且避免hacks和条件css吗?这里有十条使用有效的html和css代码修复可以兼容ie6常见的问题。
    1、使用一个声明
    2、使用position: relative
    3、为浮动元素使用display:inline
    4、设置元素启动hasLayout
    5、修复重复字符的bug
    6、使用a标签完成可点击和hover原理
    7、使用!important,或是高级选择符替代ie特定代码
    8、避免百分比定义
    9、早点和经常测试
    10、重构你的代码

    发布时间:2010/6/8 所属分类:【(X)Html/CSS
  • first-letter在各浏览器中的表现

    测试环境, IETester 0.4.4(包含5.5, 6.0, 7.0, 8.0, trident), opera 10.60(presto), firefox 3.6.4和seamonkey 2.1a1(gecko), chrome 6.0.408.1和safari 4.0.5(webkit)

    测试结果来看, 浏览器的表现分为三种种, 一种是: 查找selector的子元素, 第一个元素为text node时应用样式, 否则返回. 如gecko引擎的浏览器和trident引擎的ie7.0及以下版本的浏览器(包含ie7).

    第二种如下: 如果selector的第一个子元素为element node, 则递归查找此元素的子元素, 如果找到text node则应用样式, 没找到则返回. 如webkit引擎的浏览器.

    第三种和第二种比较类似, 只是最后的处理方式不同, 它会一直找到text node的子元素为止(除非整个selector不包含text node. 如presto引擎的浏览器和ie8.0

    发布时间:2010/6/2 所属分类:【(X)Html/CSS
  • 兼容各浏览器的CSS实现超出部分自动换行

    pre {
    white-space: pre; /* CSS 2.0 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3.0 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP Printers */
    word-wrap: break-word; /* IE 5+ */
    }

    发布时间:2010/6/2 所属分类:【(X)Html/CSS
  • HTML5 CSS Reset Style

    html5默认样式reset的CSS, 来源HTML5 Reset Stylesheet

    发布时间:2010/5/28 所属分类:【(X)Html/CSS
  • XHTML1.0的几种DocType的区别

    DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
    其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。
    要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
    XHTML 1.0 提供了三种DTD声明可供选择:
    * 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    * 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    * 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    发布时间:2010/5/27 所属分类:【(X)Html/CSS
  • canvas JavaScript API学习(五)

    上篇文章我们了解了canvas用来处理图像的两个简单的方式:拉伸和裁切。这次我们来挑战像素级的图像处理,这话看起来挺唬人的,不过不用担心,它并没有那么可怕。

    发布时间:2010/5/27 所属分类:【(X)Html/CSS
  • canvas JavaScript API学习(四)

    canvas在绘图方面的能力正在日益增强,它支持简单的动画效果,并且被很多人所看好,从前一段时间“html5代替flash”的炒作中可见一斑,甚至一些大公司也开始使用canvas代替了原本使用flash实现的功能,当然这不是为了赶潮流,而是canvas确实有一些优势,这个以后再探讨。本文要介绍的是canvas在绘图以外的一点内容,因为光有绘图能力是不够的,下面我们就进入canvas图像处理相关的API学习。

    发布时间:2010/5/27 所属分类:【(X)Html/CSS
  • canvas JavaScript API学习(三)

    介绍过一些基本的图形绘制api和比较复杂的贝塞尔曲线的绘制方法,接下来要了解的是如何在canvas里写入文本。为什么要学习这个?canvas跟其他标签不一样!

    发布时间:2010/5/27 所属分类:【(X)Html/CSS
  • canvas JavaScript API学习(二)

    接下来的内容是我对canvas绘图进一步学习心得,这次会介绍更多API方法的使用,来提高我们绘图的能力,创建更多丰富的图形,如果你有一点点图形学基础,那将对你的学习有很大帮助。

    发布时间:2010/5/27 所属分类:【(X)Html/CSS
  • canvas JavaScript API学习(一)

    <canvas>是html5规范中的标签,通过JavaScript脚本可以在canvas中绘画出图形或实现动画效果。更多canvas的资料请查看:The canvas element — HTML5 (including next generation additions still in development)

    发布时间:2010/5/27 所属分类:【(X)Html/CSS
  • raquo laquo rsaquo lsaquo

    发布时间:2010/5/27 所属分类:【(X)Html/CSS
  • CSS3 Help Sheet

    CSS3 Help Sheet, 来自 gosquared.com, CSS3备忘表单

    发布时间:2010/5/24 所属分类:【(X)Html/CSS
« 1 2 3  » 

XeonWell Studio