怎样实现图片居中于层内?

目前的解决方案是,层内加表,表内放图:

<div style="position:absolute;width:200px;height:200px;background-color:#FFCC00">
<TABLE style="width:200px;height:200px">
<TR>
<TD align="center"><img src="http://www.blueidea.com/img/common/logo.gif"></TD>
</TR>
</TABLE>
<div>

如何检查网页浏览器的兼容性

BrowserShots.org 是一个很不错的在线服务,它主要帮助你检查一下你所设计网站是否兼容所有的浏览器。其目前支持四个操作系统: Linux, Windows, MacOS和BSD。浏览器支持的就多了: 包括MSIE,Firefox,Chrome,Safari,Opera,Dillo,SeaMonkey,Navigator等等浏览器的不同版本。
 
使用这个在线服务其实很简单,只需要输入你的网址,并勾选一下各种浏览器。当然,你还可以指定分辨率,色彩度,Javascript,Java和Flash的版本。然后,这个网站会利用虚拟机的技术,启动操作系统然后运行相应的浏览器访问你的网站,并把图抓下来上传到你可以访问的位置以例提供你下载。
需要注意的是,如果你选中了太多的浏览器,可能整个速度就有些慢了,而系统设置是30分钟过期,而可能有很多浏览器的任务却高于这个时间。所以,你需要过会就去点击一下“Extend”按钮,以告诉系统延长过期时间。

DIV设置float后高度不自动增加 - 解决方案

目前用来清除“闭合(清除)浮动”的方法,主要是一下四种:

1. 额外标签法
这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。
我个人不喜欢这种方法,但是它确实是W3C推荐的方法
<div style="clear:both;"></div>
或者使用
<br style="clear:both;" />

2. 使用after伪类
这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。
这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html 比较干净,所以用得还是比较多的。
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

3. 设置overflow为hidden或者auto
这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面

4. 浮动外部元素,float-in-float
这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。

关于表单输入域长度的问题

今天发现在LINUX使用FIREFOX浏览网站时,出现了表单的input和textarea比较长的情况,网页结构被整了乱七八糟的。

然而在WINDOWS下使用IE或者FIREFOX浏览却没有那种情况,而且好好的,挺喜欢的

后来经过反复测试发现原来在LINUX下和WINDOWS下对网页的表单输入域的长度是不一致的(恩,应该是这样,我是这么对自己解释的).

比如说input的size="50",在WINDOWS下只占估计250像素的长度,然而在LINUX下几乎占了整个页面的长度

这是一种比较夸张和超出逻辑的情况,我不知道这个差别是怎么出现的,总之我是找到了解决的办法,也就是在控制表单的输入域长度的时候尽量使用CSS,而不要使用SIZE属性,使用CSS使网页布局更加一致。

此外,文件域在这两个操作系统上的差别也很夸张,在LINUX上它是比较长的,而且控制起来也很麻烦,我基本上不给它设置什么CSS或者属性。

算了,不截图发上来了,记住以后控制表单输入域长度不要使用SIZE属性,要使用CSS(style="width:300px;")。

哎....这些差别是乍搞的呢?!嘿,还真验证了那么一句话:林子大了什么鸟都有。

CSS渐变滤镜大全

注意CSS渐变滤镜与网页变换效果是不同的概念,不过相同的是他们都只适用于IE,在FF下无效。


使用方法:
Eg1:
<meta http-equiv="Page-Enter" Content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=8)">
<meta http-equiv="Page-Exit" Content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=8)">


Eg2:
<table cellpadding="0" cellspacing="0" width="100%" height="22" border="0">
  <tr>
  <td id="msviRegionIdGraphic" bgcolor="#FFFFFF"></td>
  <td id="msviRegionGradient1" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"></td>
  <td id="msviRegionGradient2" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#98B2E6', endColorStr='#3568CC', gradientType='1')"></td>
  </tr>
</table>




23.随机变换效果    
type="progid:DXImageTransform.Microsoft.RevealTrans(enabled=ture,transition=23)"




0.方形逐渐变小    
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)"
交叉形逐渐变大
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)"
菱形逐渐变小    
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)"




1.方形逐渐变大    
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)"
 交叉形逐渐变小
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)"
 菱形逐渐变大    
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)"

2.圆形逐渐变小    
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)"
 加号形逐渐变大
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)"
 星形逐渐变小    
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)"




3.圆形逐渐变大    
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)"
 加号形逐渐变小
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=in)"
 星形逐渐变大    
type="progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)"




4.向上逐渐擦除    
type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)"




5.向下逐渐擦除    
type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)"




6.向左逐渐擦除    
type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)"




7.向右逐渐擦除    
type="progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)"




8.垂直百叶窗效果
type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=left)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=right)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=left)"




9.水平百叶窗效果
type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=up)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=down)"
type="progid:DXImageTransform.Microsoft.Blinds(bands=60,direction=up)"

10.横向棋盘效果    
type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)"
type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=up,squaresX=12,squaresY=12)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=2,squaresY=2)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=2,squaresY=2)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=down,squaresX=60,squaresY=60)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=up,squaresX=60,squaresY=60)"
 

11.纵向棋盘效果    
type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)"
type="progid:DXImageTransform.Microsoft.CheckerBoard(direction=left,squaresX=12,squaresY=12)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=2,squaresY=2)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=2,squaresY=2)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=right,squaresX=60,squaresY=60)"
type="progid:DXImageTransform.Microsoft.Checkerboard(direction=left,squaresX=60,squaresY=60)"

12.随机溶解效果    
type="progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)"




13.左右向中部收缩
type="progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)"




14.中部向左右展开
type="progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)"




15.上下向中部收缩
type="progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)"




16.中部向上下展开
type="progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=horizontal)"




17.阶梯状向左下展开
type="progid:DXImageTransform.Microsoft.Strips(motion=leftdown)"




18.阶梯状向左上展开
type="progid:DXImageTransform.Microsoft.Strips(motion=leftup)"




19.阶梯状向右下展开
type="progid:DXImageTransform.Microsoft.Strips(motion=rightdown)"




20.阶梯状向右上展开
type="progid:DXImageTransform.Microsoft.Strips(motion=rightup)"




21.随机水平线效果
type="progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)"




22.随机垂直线效果
type="progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)"




24.标准渐变转化效果
type="BlendTrans(enabled=true,percent=10)"




25.可调渐变转化效果
type="progid:DXImageTransform.Microsoft.Fade(enabled=ture,overlap=1.0)"




26.向右下插入效果
type="progid:DXImageTransform.Microsoft.Inset(enabled=ture)"




27.马赛克效果    
type="progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)"




28.时钟形射线擦除
type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)"



29.楔子形射线擦除
type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)"



30.辐射形射线擦除
type="progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)"




31.隐藏式幻灯片效果
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)"
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=20)"



32.推动式幻灯片效果
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)"
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=20)"



33.交换式幻灯片效果
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)"
type="progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)"




34.螺旋形收缩效果
type="progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)"




35.隐藏式伸展效果
type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)"



36.推动式伸展效果
type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)"



37.旋转式伸展效果
type="progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)"




38.风车轮转动效果
type="progid:DXImageTransform.Microsoft.Wheel(spokes=20)"




39.梯度擦除效果    
type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)"
type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=reverse)"
type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=forward)"
type="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=1,motion=reverse)"




40.Z字形曲折效果
type="progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)"




注:头23个滤镜(指有标号的)是常见滤镜,均可用第23号滤镜(排在文章中的第一种滤镜)变换参数获得。如1号滤镜可以将23号滤镜中的transition=23改为transition=1,其余同。

用css行为saveHistory实现IE回退保留表单数据

为表单添加以下行为后,点击IE的后退按钮回退,可保留之前的表单数据


1 添加以下META标记:
<META NAME="save" CONTENT="history">



2 CSS行为定义方式如下:
<STYLE>
      .sHistory {behavior:url(#default#savehistory);}
</STYLE>









例子:
在表单中为需要保存历史记录的内容添加样式


<HTML>
<HEAD>
<META NAME="save" CONTENT="history">
<STYLE>
   .sHistory {behavior:url(#default#savehistory);}
</STYLE>
</HEAD>
<BODY>
<INPUT class=sHistory type=text id=oPersistInput>
</BODY>
</HTML>

关于IE的behavior属性使用

test.html




test.htc








 

behavior


 

语法:
 
behavior : url (url) | url (#objID ) | url (#default#behaviorName)
 
参数:
 
url (url) : 使用绝对或相对地址指定DHTML行为组件(.htc)
url (#objID ) : 用二进制实现DHTML行为,#objID为object对象指定的id特性
url (#default#behaviorName) : IE的默认行为。由behaviorName指定
 
说明:
 
设置或检索对象的DHTML行为。
多个行为之间用空格隔开。
关于DHTML行为,请参阅我所编写的其他教程。
对应的脚本特性为behavior。请参阅我编写的其他书目。
 
示例:
 
div { behavior: url(fly.htc) url(shy.htc); }

Moz-CSS大全 - FireFox专用CSS

-moz-activehyperlinktext
-moz-alias
-moz-all
-moz-anchor-decoration
-moz-appearance
-moz-appearance
-moz-arabic-indic
-moz-background-clip
-moz-background-inline-policy
-moz-background-origin
-moz-bengali
-moz-bg-inset
-moz-bg-outset
-moz-bg-solid
-moz-binding
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-radius
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-right-colors
-moz-border-top-colors
-moz-box
-moz-box-align
-moz-box-direction
-moz-box-flex
-moz-box-ordinal-group
-moz-box-orient
-moz-box-pack
-moz-box-sizing
-moz-bulletinboard
-moz-button
-moz-buttondefault
-moz-cell
-moz-center
-moz-cjk-earthly-branch
-moz-cjk-heavenly-stem
-moz-compact
-moz-context-menu
-moz-copy
-moz-count-down
-moz-count-up
-moz-count-up-down
-moz-counter-increment

-moz-counter-reset
-moz-deck
-moz-desktop
-moz-devanagari
-moz-dialog
-moz-dialogtext
-moz-document
-moz-dragtargetzone
-moz-editor-invert-value
-moz-ethiopic-halehame
-moz-ethiopic-halehame-am
-moz-ethiopic-halehame-ti-et
-moz-ethiopic-numeric
-moz-field
-moz-fieldtext
-moz-fixed
-moz-float-edge
-moz-force-broken-image-icon
-moz-grab
-moz-grabbing
-moz-grid
-moz-grid-group
-moz-grid-line
-moz-groupbox
-moz-gtk2-hovertext
-moz-gujarati
-moz-gurmukhi
-moz-hangul
-moz-hangul-consonant
-moz-hidden-unscrollable
-moz-hsla
-moz-hyperlinktext
-moz-image-region
-moz-info
-moz-initial
-moz-inline-block
-moz-inline-box
-moz-inline-grid
-moz-inline-stack
-moz-inline-table
-moz-japanese-formal
-moz-japanese-informal
-moz-kannada
-moz-khmer
-moz-lao
-moz-left
-moz-list
-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-focusring
-moz-mac-menuselect
-moz-mac-menushadow
-moz-mac-menutextselect
-moz-malayalam
-moz-margin-end

-moz-margin-start
-moz-marker
-moz-math-columnline
-moz-math-firstcolumn
-moz-math-firstrow
-moz-math-font-size
-moz-math-font-style
-moz-math-lastcolumn
-moz-math-lastrow
-moz-math-rowline
-moz-math-symbol
-moz-math-text
-moz-myanmar
-moz-opacity
-moz-oriya
-moz-outline
-moz-outline
-moz-outline-color
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-outline-style
-moz-outline-width
-moz-padding-end
-moz-padding-start
-moz-page-break
-moz-persian
-moz-popup
-moz-pre-wrap
-moz-pull-down-menu
-moz-resizer
-moz-rgba
-moz-right
-moz-run-in
-moz-scrollbars-horizontal
-moz-scrollbars-none
-moz-scrollbars-vertical
-moz-show-background
-moz-simp-chinese-formal
-moz-simp-chinese-informal
-moz-spinning
-moz-stack
-moz-tamil
-moz-telugu
-moz-thai
-moz-trad-chinese-formal
-moz-trad-chinese-informal
-moz-urdu
-moz-use-text-color
-moz-user-focus
-moz-user-input
-moz-user-modify
-moz-user-select
-moz-visitedhyperlinktext
-moz-window
-moz-workspace
-moz-zoom-in
-moz-zoom-out
-mozilla-keygen

详细介绍在官方网站搜索吧:  http://www.mozilla.org/

xml css htc 的综合运用

这几个技术都不是很新了,css之所以出现就是为了实现数据与数据的表现形式的分离, xml则是为了无限扩展数据结构本身的限制, htc(更准确的说是behavior)进一步的把代码与表现形式分离开了。

 

之所以要把这些已经出现了若干年的东西重新翻出来说,是因为看到最近的xHTML验证似乎比较热,其实xHTML的目的也就是更好的向XML过渡,形成一种标准化的数据形式.数据与数据表达方式,数据表达方式中的行为与样式的分离正是为了更有效率的组织数据。

 

让我们来看一些例子

 


 

用层模拟小窗口的代码:

 




可以看到,这段内容里同时有需要表达的数据,数据样式和样式的行为模式,对于只关心数据本身的修改者来说,如此多的代码会造成阅读上的困扰.让我们用前面提到的技术重整一下

 

//抱歉这段代码不能直接执行,因为我没有地方放置需要引用的CSS和HTC文件

 



 

这时候大家会很高兴的发现,页面变得如此简单,代码中基本上只有数据本身,几乎完全没有JS了,那么JS在哪里哪?下面是CSS文件:sp/css/global.css

 



 

数据的行为也算作数据的表达样式之一呵呵,那么我们再看看htc文件


//这个代码是我自己的一个比较大的htc中摘录出来的,还包括了一个细线select




至此我们彻底的将三者分开,对于并不精通脚本语言的页面设计者,他可以随意的修改htm页面而不用再担心会引起什么意料不到的后果,只需要用<x:win>就可以简单的作出一个窗口,就好像这是一个普通的HTML标记一样.以后如果希望修改使得窗口不能拖动,也只需要修改一个htc就可以改变所有的页面.数据的结构化将使网站的维护变得异常轻松.



PS:

相关技术:XBL与FIREFOX专有CSS






Firefox下获取iframe元素的属性


这里做一下笔记,网上搜了搜,貌似只有这一种办法。