CSS中的一些有用技术

1、滑动门技术
我这次也用到这个技术了,其实是一种互相折叠的技术,我已经使用过很多了。
这篇文章中介绍了如何在标签中使用滑动门技术,这个很有用,而且效果不错。
2、对于需要把传统html4.0转到css+xhtml的人,这篇文章很好。
一种简单的对照关系,可以让你把表格布局放到标准的css布局上面来,其实并不费力的。
不过要记住不要滥用float,否则会死的很惨。position:absolute有时也是不错的选择。
捷足先登学用CSS:HTML结构化
3、关于圆角容器
div标签很多时候类似个矩形容器,大家很爱用它。用它实现圆角容器可以让你的网页变得美观生动。
不过问题在于圆角容器会带来大量的嵌套div,不优雅。
为了优雅,可以使用javascript+dom来解决,哈哈,很不错的。
我的简历就使用了自己制作的圆角容器,自己修改javascript很好玩的,使用的东西不难看懂。后面那个网站很不错,456 Berea Street很多人都推荐。
Rounded Corners with CSS and JavaScript
Transparent custom corners and borders | 456 Berea Street
4、IE欺骗技术中的一个简单应用
圆角容器的css使用的一个解决IE对png支持不好的办法,记下来,很有用的。不过目前不知道怎么在css文件里面使用这个hack。里面的代码只对IE其作用,可以弥补IE对Web Standards支持不好的一些问题。
<!–[if lt IE 7]>
<style type="text/css">
/* Serve gif images to IE/Win pre version 7 */
.i1,
.i2 { background-image:url(css/borders.gif); }
.bt,
.bt div,
.bb,
.bb div { background-image:url(css/box.gif); }
/* Set a height to fix up some rendering issues. */
.i1,
.i3 { height:1px; }
</style>
<![endif]–>
5、关于控制框架宽度的方法
本来觉得Chinaren校友录论坛里面可以自动收缩的框架不错。可是后来发现在Firefox不能用。找了很多地方不能解决。结果闲逛的时候发现了解决方法。
框架页如下:
<FRAMESET id="_bodyframeset" rows="38,*" frameSpacing="0" frameBorder="NO">
 <FRAME id="top" src="top.htm" scrolling="no" target="body">
 <FRAMESET id="main" name="main" cols="200,9,*" frameSpacing="0" frameBorder="NO">
  <FRAME name="left" src="left.htm" scrolling="auto" target="body">
  <FRAME name="control" src="control.htm" scrolling="no">
  <FRAME name="body" id="body" src="userlist.htm" scrolling="yes">
 </FRAMESET>
</FRAMESET>
在control中的加入如下javascript函数,调用它可以自动收缩:
function shift_status()
{
 flag = !flag;
 if(flag)
 {
  if(screen.width>1024)
   window.top.document.getElementById("main").cols="200,9,*";
  else if(screen.width>800) 
   window.top.document.getElementById("main").cols="200,9,*";
  else
   window.top.document.getElementById("main").cols="160,9,*";
  GEId("menuSwitch1").src=’images/ej1_30.gif’;
  GEId("menuSwitch1").title=’隐藏’;
 }
 else
 {
  window.top.document.getElementById("main").cols="0,9,*";
  GEId("menuSwitch1").src=’images/ej1_32a.gif’;
  GEId("menuSwitch1").title=’显示’;
 }
}
原来框架页可以动过window访问到,然后就可以通过id访问它的子页面了,哈哈。不过这种Dom解析的说明网上也找不到很好的,查起来非常不方便。谁有好的资源可以告诉我。
6、一个在IE和Firefox都可以工作的灰度隐藏的Js
我了解到Firefox支持了Opcity,可以实现IE私有的filter里面的透明度的设置,所以修改了一下以前的一段js,让两个浏览器都可以实现类似的效果。不过目前在ff上没有渐变的效果,还需要改进。
<script language="javascript">
function high(which){
theobject=which
which.style.opacity=1
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which){
which.style.opacity=0.25
clearInterval(highlighting)
which.filters.alpha.opacity=25
}
function highlightit(that){
if (that.filters.alpha.opacity<100){
that.filters.alpha.opacity+=10
}
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
本文如果需要转载,请和我本人联系,未经同意不得专用,谢谢。

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.