Web2.0 is the xhtml+css layout era...

HTML5的新标签

分类:Xhtml+Css | 发布者:Tim | 发布日期: 2010-7-7 
关注Web发展的人们都几乎都知道html5的强大,都在讨论html5是否会取代并淘汰flash。
本文并不对html5是否取代flash进行讨论,我们来看看html5除了有名的<video>标签外,还有什么新成员添加到html标签大家族。

HTML5新增的标签分别有:
  • 嵌入内容:canvas标签 audio标签 embed标签 video标签 source标签
  • 文档部件:header标签 nav标签 section标签 footer标签 article标签 aside标签 hgroup标签
  • 内容分组:figure标签 figcaption标签
  • 文本层次语义:time标签 ruby标签 rp标签 rt标签 keygen标签 mark标签 meter标签 progress标签
  • 表单元素:datalist标签 output标签
  • 互动元素:details标签 summary标签 command标签

Tags: ,

让IE8以IE7的渲染模式来渲染CSS

分类:Xhtml+Css | 发布者:Tim | 发布日期: 2009-3-8 
极少时候,需要用到IE8 CSS hack
但是网络搜索到的都是标题党,所提供的并不是真正的IE8 CSS hack
难道IE8没有专有的识别字符?

答案我也不知道,未发现。
但是可以通过另外一种途径,使你的网页能像IE7那样显示。
虽然我明白,IE8比IE7进步很多,网页标准的支持也更大
渲染CSS上与Firefox非常接近了,在IE8上所见与Firefox几乎无异(极少差异,但却存在)。
但是因为IE这个家族的其他两位重要成员IE6、IE7还是非常多人在使用,特别是IE7。
目前截至2009年05月为止,IE7占有率为44.51%,IE6占有率为17.52%,IE8为3.99%
IE6、IE7是网页设计师们重点的网页测试对象(这里所说的网页测试,是在浏览器中CSS布局的定位是否精确)。
但是我们也得考虑IE8,IE8是的成熟是未来几年升级的对象,因该会有部分用户从IE6直接升级到IE8。
因此我们一定要考虑IE8,把它纳入网页测试对象。

以上是我针对性的分析,言归正传。

微软IE设计团队在设计IE8的时候就为IE8浏览增加了兼容模式、IE7浏览模式。
因此我们用微软提供的下代码可以在IE8浏览器中使用IE7的渲染模式来渲染CSS
<meta http-equiv="x-ua-compatible" content="ie=7" />

这是一个“思想”倒退的办法,但是能暂时解决在IE8中遇到的问题。

其实很少需要用到以上方法,前面说过,IE8上所见与Firefox几乎无异(极少差异,但却存在)。
这个“几乎”就让我使用了一次“让IE8以IE7的渲染模式来渲染CSS”
Tags: ,

使IE6中DIV(或其他容器)设置高度(height)为100%

分类:Xhtml+Css | 发布者:Tim | 发布日期: 2009-3-4 
当你在制作网页中用CSS定义一个DIV(或者其他容器,如table等...)的height:100%
在IE6中此定义无法达到预期纵向(y)100%显示效果时
以下方法可以帮你解决

首先请用CSS定义
body{height:100%}

此定义是为了让本身body就具有height为100%

然后
再定义你想让其达到高100%纵向满屏的DIV(或者其他容器)的父DIV(或者其他容器)
其高度亦为height:100%

注意加重字体所表达的意思

即:
你要定义一个DIV的高100%纵向满屏
那么请先将其上级的DIV的高定义为100%
上级有多少个DIV,你都要定义它们的高为100%
这样才能达到包含在里面的DIV的高为浏览器高100%的纵向满屏效果。

Tags: , , , ,

CSS网页设计解决方案(Hacks & Issues)

分类:Xhtml+Css | 发布者:Tim | 发布日期: 2008-6-13 
    1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。

    2、浏览器特定的选择器

    英文地址:  http://www.solidstategroup.com/page/1592


    当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。

    IE6以下

   *html{}

    IE 7 以下

*:first-child+html {} * html {}

    只对IE 7

*:first-child+html {}

    只对IE 7 和现代浏览器

html>body {}

    只对现代浏览器(非IE 7)

html>/**/body {}

    最新的Opera 9以下版本

html:first-child {}

Safari

html[xmlns*=”"] body:last-child {}

    要使用这些选择器,请在样式前写下这些代码。例如:

#content-box {
  width: 300px;
  height: 150px;
}
* html #content-box {
  width: 250px;
}
/* 重写上面的代码并且把宽度改为250px
在IE6以下版本中适用。 */

较常用的CSS层叠样式表缩写总汇

分类:Xhtml+Css | 发布者:Tim | 发布日期: 2008-6-13 
善用CSS层叠样式表缩写可以有效地把CSS文件的大小减小。

CSS缩写的主要规则如下:

颜色(color)
16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;

容器填充(padding)与边距(margin)
通常有下面四种书写方法:
    property:value1; 表示所有边都是一个值value1;
    property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
    property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
    property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
Tags: , ,

Mozilla给网站制作朋友们的CSS书写顺序建议

分类:Xhtml+Css | 发布者:Tim | 发布日期: 2008-6-13 
css显示样式定义属性
display
list-style
position
float
clear
Tags: , ,

XHTML+CSS布局可调用JS实现实时样式风格替换

分类:Xhtml+Css | 发布者:Tim | 发布日期: 2007-12-28 
如果大家常常泡论坛的话,估计也知道现在这些论坛(不论是 Discuz!或者是PHPWind等等)都支持在论坛底部有一个选择风格的列表菜单链接!
如果你的网站页面是以层叠样式表来定义网页的样式风格的话
又制作了多个层叠样式表(css)就可以用以下的方法来增加你的网站的风格可选性
这样的话浏览者就可以根据自己心情来更换论坛的风格!
下面就是要教大家怎样实现这样的功能!一共有四步。
Tags: , , , ,

用CSS控制DIV透明

分类:Xhtml+Css | 发布者:Tim | 发布日期: 2007-12-27 
如果要控制DIV透明度,就需要用到CSS的滤镜
其中的Alpha属性就是来实现透明的
甚至可以达到渐变透明效果。
以下为引用部分

用滤镜filter的Alpha属性实现透明。表达格式如下:

filter: alpha(opacity=?,finishopacity=?,style=?,startX=?,startY=?,finishX=?,finishY=?);

各项赋值说明:
opacity代表透明度,可选值从0到100,0代表完全透明,100代表完全不透明;
finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100;
style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形;
startX和startY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。
Tags: , , ,
分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]