[转]CSS背景属性5个应用实例
CSS背景属性5个应用实例.
背景(background)在项目中经常会使用。这篇文章主要讲解的是实际项目中的5个实例。通过具体的分析来达到学习的目的。
1，Li列表
通过ul 和 li 的方式，我们可以构造出一些无序列表。通过ul+li，我们不仅可以做出一些漂亮的菜单，也可以做出一些完美的树形结构。 ul+li默认样式在前面有个小黑点，实际项目中我们可以通过背景来代替这个小黑点。
下面我们看2个实例：
More »
Archive for the ‘HTML/CSS’ Category
完美兼容IE6，摆脱table用CSS实现图片垂直居中
还是昨天的单子。
制作中学到新的东西。
看上图，对于这样的一个图片列表，如果需要采用容器内部图像能水平居中，很简单，大家都知道用 text-align: center
然后如果需要垂直居中呢？
我先前的做法是在那个LI里套一个固定宽高的table，利用td的垂直居中属性完成图片的垂直居中。
然而这种方法显然是非常不标准的。
于是前段时间在网上乱逛时学到一招：
#li_con {display:table-cell;text-align:center;vertical-align:middle;}
这样一来，在#li_con容器中的img标签就会垂直与水平居中了！！
==================悲惨分割线====================
别高兴太早了！看看你的IE6，可恶的IE6似乎不认识 display:table-cell; 所以更别提 vertical-align:middle;让图片垂直居中了！
怎么办呢？
[转]IE6不支持的十个实用的CSS属性
ie6对一些非常有用的css属性完全不支持。比如mini-width，无人不抱怨ie6的css兼容性问题。本文里面，介绍了10个很实但IE却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的，就更有针对性的去编写CSS和Hack了。
一、Outline
在调试CSS问题的时候，我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的，因为它可以在布 局上给我更加具体的可视性。但是如果是块级元素，这可能会发生某些错误——在任何块级元素上添加1px的边框很可能会影响到布局，它会让这个元素的宽度额 外增加2px。
outline 属性是完美的替代者，因为它可以在不影响文档流的情况下呈现该对象。但是IE6 和IE7 不支持 outline 属性，所以，它不能在这两个浏览器中用于调试。
二、Inherit (值)
在CSS开发中有很多这样的例子：通过在特定元素上设置某些样式来告诉该元素来“继承”它父级元素的所有已添加的属性，这样你就可以避免相当多的键盘输入。
这可以通过设置 inherit 来很容易的实现。这可能很有用。比如，当重写 background 属性的时候，常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以，与其重新写这些值，你可能仅仅想要考虑中的元素和其父级元素有相同 的背景属性，一个 inherit 值就可以搞定一切——这显然大大的节省了键盘输入。
不幸的是， inherit 值在IE6和IE7不被支持（除了用于 direction (文字方向) 和 visibility 属性）。
某人说，代码就像女人的裙子——越短越好，看来IE会阻碍我们这个愿望的实现。
三、Empty-Cells
More »
解决怪问题——UTF8 BOM导致的wrap居中失败与顶端空白的解决办法
又是一个全新的全站项目。这次让龙兄做主厨，我做助手。
昨晚在调试框架的时候，生成的页面发生了非常奇怪的现象。CSS中所设置的 #wrap{ margin:0 auto } 忽然失效了。
用FireBug查看到的代码是，包含CSS路径的link标签被包裹到<body>的内部，而不是源码中的在<head>里。
最后求助群里，大家的意见是标签没有闭合，检查了一下，标签是正常的，于是到了w3.org去验证XHTML。
终于发现问题之所在。W3检测给出的错误，第一条就是由UTF8 BOM引起的显示问题。
来来来，看看官方对这个问题的QA（英文）：
我给龙兄的建议是用NotePad++把文件转换成UTF8 without BOM。终于在Controller的文件里找到了问题，修复后一切正常。
这一课真是很有意义，让我领教到了BOM的威力，更领教到了W3的威力，嘿嘿！
21个你需知道的CSS精彩技巧
转载请注明来源：21个你需知道的CSS精彩技巧 | 奇亚
英文原版：21 Amazing CSS Techniques You Should Know
CSS样式表是现代网页设计重要组成部分。没有CSS，网页设计就会像十年前的那样难看。
下面21个精彩的CSS技巧，你也许想都没有想过这些能用CSS来做到！
关于 iPhone 网页开发
转载请注明来源：关于 iPhone 网页开发 | 奇亚
前段时间淘了个 iPod Touch 2 玩，与iPhone相比，少了电话，卫星导航，摄像头功能其他功能还蛮好的。
用了内置的Safari上网后才知道为什么iPhone移动设备上网份额超60%
其易用和人性化程度不由让我想扩展业务领域，想在即将下海的 CutHTML 开展这项服务。
其实用iPod浏览普通网页，可以通过收缩放大方便浏览，其浏览结果和电脑上的Safari无异（指网页的layout）
部分网页针对iPhone设备设计。不具有放大缩小功能。经过勘察得出以下总结：
【转】使用 Dojo 的 Ajax 应用开发进阶教程 : 富含语义的 HTML
HTML 语言是互联网的基础。如何正确合理的编写 HTML 文档，是很多 Web 开发人员关心的问题。富含语义的 HTML 是一种 Web 应用开发的实践，它强调从文档所需要表达的语义出发，使用 HTML 语法中表示文档结构和富含语义的元素来编写 HTML 文档，从而使得 Web 应用的结构与展示分离，降低各部分之间的耦合度。随着 Ajax 应用的流行，这种实践越来越为 Web 开发人员所接受。本文详细介绍富含语义的 HTML 这一开发实践，供 Web 开发人员参考。
More »
CSS Sprites 技巧
众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。
下面是一张样图：
More »
语义化的HTML结构到底有何好处?
相信大家都知道html和css，知道html结构和css表现分离，知道html语义化，这些都是这几年的热门关键字。语义化的html在国内也是一两年前才开始被追捧的，看看现在群里谈论的html结构，关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？
Recent Replies / 最新回复