用户登陆
用户名:
密  码:
验证码:刷新验证码
 

技术文档
日记 (20)
照相馆 (39)
美食 (12)
风景 (4)
javascript+css (11)
php (9)
mySQL (17)
unix (22)
linux (28)
perl (4)
English (43)
flash (11)
其它 (37)
站内公告
偶还有个blog,,http://qiuqiu.showxm.com就是乱写。。。

站点日历
<<  <  2010 - 09  >  >>
SuMoTuWeThFrSa
   1234
567891011
12131415161718
19202122232425
2627282930

最新日志
- 猜火车
- PET3
- phpmyadmin导入数据
- XP写权限
- 计划安排
- 老美英语口头禅，应该学习...
- 外贸人应该必会的英语知识...
- 在外企生存必会的外贸英语...
- 常用外贸术语大全，外贸人...
- 经典商务英语电话报价对话...

最新评论
- 页面有问题鸟～～～～
- 没拍几张啊西西...
- 怎么就这些...应该还有吧...
- 不小心把laochen的评论删...
-
- 貌似未成年的样子
- 来看一下你所写，欢迎回访...
- 因为有所期待，才会失望。...
- 快过年了, 我想念我的家乡...
- ZHONG回不了家啊,,要在异...

日志搜索

站点统计

日志: 257 篇
评论: 39027 篇
引用: 0 个
会员: 69 人
访问:5964228 次
建立: 2007-01-09

+ 本站LOGO +

友情链接
lily
speak2me
孟子E章
pconline视频教程
蛋蛋
朱威廉
短文摘抄
泰国化妆网站
绿色软件站

+ 更多链接 +
Topics in Category: javascript+css :: 1 | 2 | > 浏览样式: 正常模式 | 列表模式
javascript+css Home on the Range   [ 日期: 2008-05-22 | 来源: 本站原创 | Sunny | Emotion Index: +2 ]
Home on the Range

Oh, give me a home where the buffalo roam.

where the deer and the antelope play.

where seldom is heard a discouraging word.

And the skies are not cloudy all day.

Home, home on the range.

where the deer and the antelope play.

where seldom is heard a discouraging word.

And the skies are not cloudy all day.

大山里的家
哦，给我一个家，在那里有水牛的房间，小鹿和羚羊一起玩耍，在那里听不到泄气的话，每天都能看见无云的天空。
家，大山里的家。在那里小鹿和羚羊一起玩耍，在那里听不到泄气的话，每天都能看见无云的天空。

点击这里 展开/隐藏 影音文件
Source URL: http://ftp.116.com.cn/pub2/ertong/ertonggequ/yingwengequ/Home-on-the-Range.mp3
作者: qiuqiu | 分类: javascript+css |  评论: 0  |  引用: 0  | 浏览: 274

javascript+css TAB标签导航样式   [ 日期: 2008-03-27 | 来源: 本站原创 | Sunny | Emotion Index: +2 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_126邮箱页面的TAB标签导航样式</title>
<style><!--body,td{font-size: 12px;}--></style>
<!--
引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程
Editor:weasle
http://www.hxcgw.com
Email:weasle@163.com
QQ:112011531
-->
<style type="text/css">
<!--
body,div,ul,li{
padding:0;
text-align:center;
}
body{
font:12px "宋体";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{ list-style:none;}
/*选项卡1*/
#Tab1{
width:460px;
margin:0px;
padding:0px;
margin:0 auto;}
/*选项卡2*/
#Tab2{
width:576px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜单class*/
.Menubox {
width:100%;
background:url(http://www.makewing.com/images/uppic/200801081251340.gif);
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width:114px;
text-align:center;
color:#949694;
font-weight:bold;
}
.Menubox li.hover{
padding:0px;
background:#fff;
width:116px;
border-left:1px solid #A8C29F;
border-top:1px solid #A8C29F;
border-right:1px solid #A8C29F;
background:url(http://www.makewing.com/images/uppic/200801081249070.gif);
color:#739242;
font-weight:bold;
height:27px;
line-height:27px;
}
.Contentbox{
clear:both;
margin-top:0px;
border:1px solid #A8C29F;
border-top:none;
height:181px;
text-align:center;
padding-top:8px;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body bgcolor="" 无>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<div id="Tab1">
<div class="Menubox">
<ul>
<li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li>
<li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
<li id="one3" onclick="setTab('one',3,4)">新闻3</li>
<li id="one4" onclick="setTab('one',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1" class="hover">新闻列表1</div>
<div id="con_one_2" style="display:none">新闻列表2</div>
<div id="con_one_3" style="display:none">新闻列表3</div>
<div id="con_one_4" style="display:none">新闻列表4</div>
</div>
</div>
<br>
<div id="Tab2">
<div class="Menubox">
<ul>
<li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li>
<li id="two2" onclick="setTab('two',2,4)" >新闻2</li>
<li id="two3" onclick="setTab('two',3,4)">新闻3</li>
<li id="two4" onclick="setTab('two',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_two_1" >新闻列表1</div>
<div id="con_two_2" style="display:none">新闻列表2</div>
<div id="con_two_3" style="display:none">新闻列表3</div>
<div id="con_two_4" style="display:none">新闻列表4</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
作者: qiuqiu | 分类: javascript+css |  评论: 1182  |  引用: 0  | 浏览: 16005

javascript+css 焦点图翻滚   [ 日期: 2008-03-19 | 来源: 本站原创 | Sunny | Emotion Index: +2 ]
<SCRIPT language=javascript>

if(typeof(pgvMain) == 'function')

pgvMain();

</SCRIPT>

<STYLE>#fods UL {
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
P {
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.dis {
  DISPLAY: block
}
.undis {
  DISPLAY: none
}
#bimg {
  FILTER: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 ); WIDTH: 370px; HEIGHT: 299px
}
#bimg IMG {
  BORDER-RIGHT: #a2a2a2 2px solid; BORDER-TOP: #a2a2a2 2px solid; MARGIN-TOP: 6px; BORDER-LEFT: #a2a2a2 2px solid; WIDTH: 346px; BORDER-BOTTOM: #a2a2a2 2px solid; HEIGHT: 279px
}
#simg IMG {
  BORDER-RIGHT: #a2a2a2 2px solid; BORDER-TOP: #a2a2a2 2px solid; MARGIN-BOTTOM: 6px; BORDER-LEFT: #a2a2a2 2px solid; WIDTH: 68px; BORDER-BOTTOM: #a2a2a2 2px solid; HEIGHT: 42px
}
#simg IMG.s {
  BORDER-RIGHT: #f58345 2px solid; BORDER-TOP: #f58345 2px solid; BORDER-LEFT: #f58345 2px solid; BORDER-BOTTOM: #f58345 2px solid
}
#imginfo TABLE {
  FONT-SIZE: 12px; LINE-HEIGHT: 20px
}
#imginfo TABLE TD {
  PADDING-RIGHT: 16px; PADDING-LEFT: 16px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
#imginfo TABLE .t {
  FONT-WEIGHT: bold; FONT-SIZE: 14px; HEIGHT: 26px
}
#imginfo TABLE .i {
  TEXT-INDENT: 2em
}
#imginfo A {
  COLOR: #000; TEXT-DECORATION: none
}
#imginfo A:hover {
  COLOR: #f00; TEXT-DECORATION: underline
}
#fods #Fod_list DIV {
  FONT-WEIGHT: bold; FLOAT: left; CURSOR: pointer; LINE-HEIGHT: 20px; TEXT-ALIGN: center
}
#fods #Fod_list P {
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 4px; PADDING-TOP: 0px; HEIGHT: 20px
}
#fods #Fod_list SPAN.a {
  PADDING-RIGHT: 0px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(http://mat1.qq.com/blog/qblog/mark04.gif) no-repeat left 50%; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 96px; COLOR: #236a00; PADDING-TOP: 2px; TEXT-ALIGN: left
}
#fods #Fod_list SPAN.b {
  PADDING-RIGHT: 0px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 168px; COLOR: #999999; PADDING-TOP: 2px; TEXT-ALIGN: right
}
#fods #Fod_list P.b {
  FLOAT: left; WIDTH: 4px; HEIGHT: 20px
}
#fods #Fod_list DIV.cardb {
  BACKGROUND: url(http://mat1.qq.com/blog/qblog/cardb00.gif); WIDTH: 66px; COLOR: #505050; PADDING-TOP: 5px; HEIGHT: 21px
}
#fods #Fod_list .sb {
  BACKGROUND: url(http://mat1.qq.com/blog/qblog/cardb01.gif); WIDTH: 84px; COLOR: #734e2f; PADDING-TOP: 5px; HEIGHT: 21px
}
#fods #Fod_list DIV.cardj {
  FONT-WEIGHT: normal; BACKGROUND: url(http://mat1.qq.com/auto/blog/carda00.gif); WIDTH: 115px; COLOR: #fff; LINE-HEIGHT: 18px; PADDING-TOP: 4px
}
#fods #Fod_list DIV.cardj A {
  COLOR: #fff; TEXT-DECORATION: none
}
#fods #Fod_list .sj {
  FONT-WEIGHT: normal; BACKGROUND: url(http://mat1.qq.com/auto/blog/carda01.gif); WIDTH: 115px; COLOR: #000; LINE-HEIGHT: 18px; PADDING-TOP: 4px
}
#fods #Fod_list .sj A {
  COLOR: #000; TEXT-DECORATION: none
}
#fods #Fod_list .sj A:hover {
  COLOR: #000; TEXT-DECORATION: none
}
#fods #Fod_list .sb {
  BACKGROUND: url(http://mat1.qq.com/blog/qblog/cardb01.gif); WIDTH: 84px; COLOR: #734e2f; PADDING-TOP: 5px; HEIGHT: 21px
}
.autotdk01 {
  BORDER-RIGHT: #bababa 1px solid; BORDER-TOP: #bababa 1px solid; BORDER-LEFT: #bababa 1px solid; BORDER-BOTTOM: #bababa 1px solid
}
</STYLE>
<!--[if IE]>
<STYLE>#simg IMG {
  MARGIN-BOTTOM: 2px
}
</STYLE>
<![endif]-->
<SCRIPT>
  function getid(obj)
  {
    return document.getElementById(obj);
  }

  function getNames(obj,name,tij)
  {  
    var p = getid(obj);
    var plist = p.getElementsByTagName(tij);
    var rlist = new Array();
    for(i=0;i<plist.length;i++)
    {
      if(plist[i].getAttribute("name") == name)
      {
        rlist[rlist.length] = plist[i];
      }
    }
    return rlist;
  }

  function ri(obj)
  {
    var p = obj.parentNode.parentNode.getElementsByTagName("img");
    for(i=0;i<p.length;i++)
    {
      if(obj == p[i])
      {
        return i;
      }
    }
  }

  function fiterplay(obj,num,t,name)
  {
    var fitlist = getNames(obj,name,t);
    for(i=0;i<fitlist.length;i++)
    {

      if(i == num)
      {
        fitlist[i].className = "dis";
      }
      else
      {
        fitlist[i].className = "undis";
      }
    }
  }

  function ci(obj)
  {
    var p = obj.parentNode.parentNode.getElementsByTagName("img");
    for(i=0;i<p.length;i++)
    {
      if(obj ==p[i])
      {
        p[i].className = "s";
      }
      else
      {
        p[i].className = "";
      }
    }
  }

  function play(obj,n1,n2)
  {
    var p = obj.parentNode.parentNode.getElementsByTagName("img");
    var bimg = getid(n1);
    var num = ri(obj);
    try
    {
      with(bimg)
      {
        filters[0].Apply();
        ci(obj);
        fiterplay(n1,num,"div","f");
        fiterplay(n2,num,"table","f");
        filters[0].play();
      }
    }
    catch(e)
    {
        ci(obj);
        fiterplay(n1,num,"div","f");
        fiterplay(n2,num,"table","f");
    }
  }
var n=0;
function clearAuto() {clearInterval(autoStart);};
function setAuto(){autoStart=setInterval("auto(n)", 3000)}
function auto()
{
  var x = getid("simg").getElementsByTagName("img");
  n++;
  if(n>4)n=0;
  play(x[n],"bimg","imginfo");
}

setAuto();
</SCRIPT>

<SCRIPT language=javascript>

     function fodj(obj)
     {
      var pa = obj.parentNode.parentNode.parentNode.parentNode;
      var pa1 = obj.parentNode.getElementsByTagName("div");
      var ta = pa.getElementsByTagName("tr")[1].getElementsByTagName("ul");
      var na = pa1.length;
      for(i=0;i<na;i++)
      {
        if(pa1[i] == obj)
        {
          pa1[i].className = "sj";
          ta[i].className = "dis";
        }
        else
        {
          pa1[i].className = "cardj";
          ta[i].className = "undis";        
        }
      }
     }
     function fodb(obj)
     {
      var pb = obj.parentNode.parentNode.parentNode.parentNode;
      var pb1 = obj.parentNode.getElementsByTagName("div");
      var tb = pb.getElementsByTagName("tr")[1].getElementsByTagName("ul");
      var nb = pb1.length;
      for(i=0;i<nb;i++)
      {
        if(pb1[i] == obj)
        {
          pb1[i].className = "sb";
          tb[i].className = "dis";
        }
        else
        {
          pb1[i].className = "cardb";
          tb[i].className = "undis";        
        }
      }
     }

</SCRIPT>


===========================================
<TABLE cellSpacing=1 cellPadding=0 width="95%" bgColor=#cccccc
border=0>
<TBODY>
<TR>
<TD bgColor=#ffffff height=430><TABLE cellSpacing=0 cellPadding=0 width=450 border=0>
<TBODY>

<TD>
<TABLE cellSpacing=0 cellPadding=0 width=450 bgColor=#dcdcdc
border=0>
<TBODY>
<TR>
<TD align=middle width=370 height=275>
<DIV id=bimg>
<DIV class=dis name="f">
         <A href="http://blog.qq.com/qzone/27132530/1205769103.htm" target=_blank>
         <IMG src="qq.files/9320891.jpg" border=0></A>         </DIV>
<DIV class=undis name="f">
         <A href="http://blog.qq.com/qzone/622007963/1205805940.htm" target=_blank>
         <IMG src="qq.files/9322734.jpg" border=0></A>
         </DIV>
<DIV class=undis name="f">
         <A href="http://blog.qq.com/qzone/622001433/1205735747.htm" target=_blank>
         <IMG src="qq.files/9324150.jpg" border=0></A>
         </DIV>
<DIV class=undis name="f">
         <A href="http://blog.qq.com/qzone/622009376/1205753099.htm" target=_blank>
         <IMG src="qq.files/9323964.jpg" border=0></A>
         </DIV>
<DIV class=undis name="f">
         <A href="http://blog.qq.com/qzone/622005461/1205748473.htm" target=_blank>
         <IMG src="qq.files/9322066.jpg" border=0></A>
         </DIV>
         </DIV></TD>
<TD id=simg align=left width=80>
        <A href="http://blog.qq.com/qzone/27132530/1205769103.htm" target=_blank>
        <IMG class=s onmouseover="play(this,'bimg','imginfo');clearAuto();" onmouseout=setAuto() src="qq.files/9320891.jpg" border=0><br>
        </A>
<A href="http://blog.qq.com/qzone/622007963/1205805940.htm" target=_blank><IMG onmouseover="play(this,'bimg','imginfo');clearAuto();" onmouseout=setAuto() src="qq.files/9322734.jpg" border=0></A>
<A href="http://blog.qq.com/qzone/622001433/1205735747.htm" target=_blank><IMG onmouseover="play(this,'bimg','imginfo');clearAuto();"
onmouseout=setAuto() src="qq.files/9324150.jpg" border=0></A>
<A href="http://blog.qq.com/qzone/622009376/1205753099.htm"
target=_blank><IMG
onmouseover="play(this,'bimg','imginfo');clearAuto();"
onmouseout=setAuto() src="qq.files/9323964.jpg" border=0></A>
<A href="http://blog.qq.com/qzone/622005461/1205748473.htm"
target=_blank><IMG
onmouseover="play(this,'bimg','imginfo');clearAuto();"
onmouseout=setAuto() src="qq.files/9322066.jpg"
border=0></A></TD>
</TR>
<TR>
<TD id=imginfo vAlign=top colSpan=2 height=104>
<TABLE class=dis height=96 cellSpacing=0 cellPadding=0
width=435 align=center bgColor=#e6e6e6 border=0 name="f">
<TBODY>
<TR>
<TD class=t vAlign=bottom align=left>张曼玉和尔冬升的当年情</TD></TR>
<TR>
<TD
align=left class=i>我刚认识张曼玉的时候，她就是《警察故事》里那个有着两颗小虎牙的样子，很可爱。到后来，她去戴牙箍、整牙，那之后，我就跟她分开了。其实她是慢慢变化的，包括脸型都变了…[<A
href="http://blog.qq.com/qzone/27132530/1205769103.htm"
target=_blank>全文</A>]</TD>
</TR></TBODY></TABLE>
<TABLE class=undis height=96 cellSpacing=0 cellPadding=0
width=435 align=center bgColor=#e6e6e6 border=0 name="f">
<TBODY>
<TR>
<TD class=t vAlign=bottom
align=left>"政府不吃亏"能作为炸楼理由吗？</TD></TR>
<TR>
<TD class=i
align=left>22层98米高总造价3776.7万元的无锡市第一人民医院建成使用仅7年，但政府决定下月将其爆破拆除，在原地新建一座250米的商业高楼…[<A
href="http://blog.qq.com/qzone/622007963/1205805940.htm"
target=_blank>全文</A>]</TD></TR></TBODY></TABLE>
<TABLE class=undis height=96 cellSpacing=0 cellPadding=0
width=435 align=center bgColor=#e6e6e6 border=0 name="f">
<TBODY>
<TR>
<TD class=t vAlign=bottom align=left>车永莉与兵马俑跨越时空的爱恋
</TD></TR>
<TR>
<TD class=i
align=left>小车同学俺就穿上了花花裙子，摆出假装超级可爱的POSE。不过涅，军人家庭出身，本人从小也参了军，多年来习惯了独立自强，一下子变身美美的天使，汗啊，貌似相当不擅长…[<A
href="http://blog.qq.com/qzone/622001433/1205735747.htm"
target=_blank>全文</A>]</TD></TR></TBODY></TABLE>
<TABLE class=undis height=96 cellSpacing=0 cellPadding=0
width=435 align=center bgColor=#e6e6e6 border=0 name="f">
<TBODY>
<TR>
<TD class=t vAlign=bottom align=left>李宗翰：巴黎日记</TD></TR>
<TR>
<TD class=i
align=left>停在我面前的出租车司机是一个亚洲面孔，见到我就用浓郁的广东口音问我："中国人？"哈哈，我马上和他说起了广东话。于是，拿箱子、上车、关门、聊天…[<A
href="http://blog.qq.com/qzone/622009376/1205753099.htm"
target=_blank>全文</A>]</TD></TR></TBODY></TABLE>
<TABLE class=undis height=96 cellSpacing=0 cellPadding=0
width=435 align=center bgColor=#e6e6e6 border=0 name="f">
<TBODY>
<TR>
<TD class=t vAlign=bottom align=left>香港小姐呼唤"自由"</TD></TR>
<TR>
<TD class=i
align=left>香港小姐李诗韵：在豪华的商场外，有一座自由女神像。商场的楼顶设计得像真实的天空一样，随着时间会转为深蓝色…[<A
href="http://blog.qq.com/qzone/622005461/1205748473.htm"
target=_blank>全文</A>]</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
作者: qiuqiu | 分类: javascript+css |  评论: 0  |  引用: 0  | 浏览: 744

javascript+css marquee 滚动代码   [ 日期: 2008-03-19 | 来源: 本站原创 | Sunny | Emotion Index: +2 ]
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 98%">
<TABLE cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR align=middle>
<TD id=demo1 vAlign=top>
<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle>
<TABLE align=center valign="top">
<TBODY>
<TR>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143052.htm"><IMG
height=100
src="梨花节-首页.files/W020080107565179260436.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143050.htm"><IMG
height=100
src="梨花节-首页.files/W020080107563957084929.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143049.htm"><IMG
height=100
src="梨花节-首页.files/W020080107561930513371.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143047.htm"><IMG
height=100
src="梨花节-首页.files/W020080107560480363438.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143046.htm"><IMG
height=100
src="梨花节-首页.files/W020080107558739738239.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143044.htm"><IMG
height=100
src="梨花节-首页.files/W020080107557275053391.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143043.htm"><IMG
height=100
src="梨花节-首页.files/W020080107556443010033.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143040.htm"><IMG
height=100
src="梨花节-首页.files/W020080107554790204319.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143037.htm"><IMG
height=100
src="梨花节-首页.files/W020080107552110058236.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143036.htm"><IMG
height=100
src="梨花节-首页.files/W020080107551049586303.jpg"
width=130 border=0></A> </DIV></TD>
<TD vAlign=top align=middle width=120>
<DIV align=center><A
href="http://www.showchina.org/zt/lhj/jy/200801/t143032.htm"><IMG
height=100
src="梨花节-首页.files/W020080107550087083475.jpg"
width=130 border=0></A>
</DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>


var speed=20
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
作者: qiuqiu | 分类: javascript+css |  评论: 0  |  引用: 0  | 浏览: 273

javascript+css CSS 自动层切换 广告效果   [ 日期: 2007-11-19 | 来源: 本站原创 | Sunny | Emotion Index: +2 ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新闻 切换技术</title>
<style type="text/css">
<!--
body { text-align: center; margin:0; padding:0; background:#fff; font-size:12px; color:#1E3B3B;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0; float:left; color:#222; }
table,td,tr,th{font-size:12px;}
a:link {color: #000; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #c00; text-decoration:underline;}
a:active {color: #000;}
.focusPic{margin:0 auto; width:544px; }
.focusPic .pic{margin:0 auto; width:180px; height:140px; padding:10px 0 0; float:left; }
.focusPic .adPic{margin:0 auto 5px; width:240px; height:29px; overflow:hidden;background:url(/zz/UploadFiles_7131/200604/20060408014934503.gif);}
.focusPic .adPic .text{float:right; padding:9px 4px 0 0; width:140px;}
.focusPic .adPic .text a{color:#1f3a87;}
.focusPic .adPic .text a:hover{color:#bc2931;}
.focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:350px;line-height:160%; height:80px; margin:0; text-align:left;padding:0 0 10px 12px;}
.focusPic p img {margin:0px 0 2px;}
.focusPic .more{ margin:0 ; width:240px; float:left; }
.focusPic .more .textNum{float:left; margin:0 8px 0 5px;padding:0 0 4px;}
.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}
.focusPic .more .textNum .num{float:left; width:113px; height:19px;}
.focusPic .more .textNum .bg1{ background:url(http://php.dvbbs.net/images/20060408014935599.gif);}
.focusPic .more .textNum .bg2{ background:url(http://php.dvbbs.net/images/20060408014935170.gif);}
.focusPic .more .textNum .bg3{ background:url(http://php.dvbbs.net/images/20060408014935201.gif);}
.focusPic .more .textNum .bg4{ background:url(http://php.dvbbs.net/images/20060408014935337.gif);}
.focusPic .more .textNum .num ul{ float:left; width:113px;}
.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block; color:#fff; list-style-type:none; padding:6px 0 0;}
.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }
.focusPic .more .textNum .num li a:visited{color:#fff;}
.focusPic .more .textNum .num li a:hover{color:#ff0;}

-->
</style>
</head>

<body>
<script language="JavaScript" type="text/javascript">
var nn;
nn=1;
setTimeout('change_img()',3000);
function change_img()
{
if(nn>4) nn=1
setTimeout('setFocus1('+nn+')',3000);
nn++;
tt=setTimeout('change_img()',3000);
}
function setFocus1(i)
{
selectLayer1(i);
}
function selectLayer1(i)
{
switch(i)
{
case 1:
document.getElementById("focusPic1").style.display="block";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic1nav").style.display="block";
document.getElementById("focusPic2nav").style.display="none";
document.getElementById("focusPic3nav").style.display="none";
document.getElementById("focusPic4nav").style.display="none";
break;
case 2:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="block";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic1nav").style.display="none";
document.getElementById("focusPic2nav").style.display="block";
document.getElementById("focusPic3nav").style.display="none";
document.getElementById("focusPic4nav").style.display="none";
break;
case 3:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="block";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic1nav").style.display="none";
document.getElementById("focusPic2nav").style.display="none";
document.getElementById("focusPic3nav").style.display="block";
document.getElementById("focusPic4nav").style.display="none";
break;
case 4:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="block";
document.getElementById("focusPic1nav").style.display="none";
document.getElementById("focusPic2nav").style.display="none";
document.getElementById("focusPic3nav").style.display="none";
document.getElementById("focusPic4nav").style.display="block";
break;
}
}
</script>
<div class="focusPic">
<div id="focusPic1" style="display:block ;">
<div class="pic"><img src="http://php.dvbbs.net/images/php.gif" width="136" height="126" border="0" /> </div>
<h2>极速体验</h2>
<p>　　动网论坛采用国际化的开发标准，专业化的开发团队，融入了最新的开发技术，全面保障论坛稳定快捷的运行。全新的数据库架构并引入高效的数据管理机制、独特的数据缓存技术、高效稳定的界面模板设置、全面的自动更新机制为您带来论坛极速体验。</p>
</div>
<div id="focusPic2" style="display: none ;">
<div class="pic"> <img src="http://php.dvbbs.net/images/4_s.gif"border="0" /> </div>
<h2>个性体验</h2>
<p>　　动网论坛提供各种强大的个性化设置功能，独特而全面的权限控制、高效方便的界面模板设置、用户和帖子信息的多样化处理，让您充分体验对论坛全局的个性化控制、体验属于您自己的色彩和界面空间。</p>
</div>
<div id="focusPic3" style="display: none ;">
<div class="pic"> <img src="http://php.dvbbs.net/images/2_s.gif" border="0" /> </div>
<h2>人性体验</h2>
<p>　　动网论坛重视客户感受，提供最体贴最人性化的*作和设置，对浏览用户、管理用户分别提供不同的体贴性*作方式。通过对用户不同信息加以详细分类、设置简明快捷的*作方式、强大而体贴的发贴和管理模式让您充分体验论坛带来的所见即所得之快感。</p>
</div>
<div id="focusPic4" style="display: none ;">
<div class="pic"><img src="http://php.dvbbs.net/images/6_s.gif" border="0" /> </div>
<h2>功能体验</h2>
<p>　　以功能个性化和人性化为基础，动网论坛提供了用户管理、帖子管理、版面管理、数据处理和更新、论坛全局设置、运行情况等全面的多种样式不同功能的管理功能。
</p>
</div>
<div class="more">
<div class="textNum">
<div class="num bg1" id="focusPic1nav" style="display: block;">
<ul>
<li>1</li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg2" id="focusPic2nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li>2</li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg3" id="focusPic3nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li>3</li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg4" id="focusPic4nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

原文网址：http://www.greencss.com/article.asp?id=93
作者: qiuqiu | 分类: javascript+css |  评论: 0  |  引用: 0  | 浏览: 11074

javascript+css css 居中   [ 日期: 2007-11-15 | 来源: 本站原创 | Sunny | Emotion Index: +2 ]
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的div层添加以下属性:

margin-left: auto;
margin-right: auto;

经过这么一番设置问题似乎解决了,在ff中已经居中了,可是在ie中看竟然还是没有居中!
问题并不在css而在xhtml网页本身.
需要加上这样的代码才能使得上述设置有效果:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
作者: qiuqiu | 分类: javascript+css |  评论: 0  |  引用: 0  | 浏览: 1818

javascript+css 怎么才能动态改变script的src   [ 日期: 2007-10-09 | 来源: 本站原创 | Sunny | Emotion Index: +2 ]
我想当然的这么写，结果没用
<script src="aa.htm" id="test"></script>
<a href="#" onclick="test.src='bb.htm'">link</a>

aa.htm
document.write('aaaaa');

bb.htm
document.write('bbbbb');

document.write，在文档已经读取解析完毕以后再调用就不合适了
顶帖也有脚本更新的例子

下面这样可以

a.htm

<script src="1.js" id="oScript"></script>
<button onclick="oScript.src='2.js';">tshow</button><br>
<button onclick="alert(test)">test</button><br>

1.js

test=1;

2.js

test=2;

你的是因为.htm或者document.write的缘故？

参考文档http://hi.baidu.com/ajax/blog/item/bd1b9d163c1fca51f3de3282.html
作者: qiuqiu | 分类: javascript+css |  评论: 0  |  引用: 0  | 浏览: 15765

javascript+css css 制作问题   [ 日期: 2007-06-19 | 来源: 本站原创 | Sunny | Emotion Index: +2 ]
对css缩写的支持问题：
不论是ie 还是ff对css的缩写都有一小点问题
比如
border: 0xp solid #fff;两个浏览器支持都没有问题
但对于四个边的magin不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形
正确缩写：
border-width:0px 1px 2px 3px;
border-style:solid;
border-color:#fff;


第二点是 ie对于css的magin padding 等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。

IE与Firefox的CSS兼容大全 1.DOCTYPE 影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

10.IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}
就能解决大部分问题


注意事项：

1、float的div一定要闭合。

例如：(其中floatA、floatB的属性已经设置为float:left;)<#div id=\"floatA\" >
<#div id=\"floatB\" >
<#div id=\"NOTfloatC\" >
这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在<#div class=\"floatB\">
<#div class=\"NOTfloatC\">
之间加上<#div class=\"clear\">
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：.clear{
clear:both;}
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2、margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<#div id=\"imfloat\">


相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

3、关于容器的包涵关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题

如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

5、最狠的手段 - !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过
作者: qiuqiu | 分类: javascript+css |  评论: 1714  |  引用: 0  | 浏览: 78170

1 | 2 | >

           Copyright © 2006 qiuqiu.wumingzhi.com, All Rights Reserved.
Processed in 0.375000 second(s)