浏览模式: 标准 | 列表分类:网页|前台相关

新浪头条新闻图文切换效果

Submitted by on 2006, November 30, 9:32 PM

代码:
<title>代码演示专用页面</title>
<style type="text/css">
/* 全局CSS定义 */
body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
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;}
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;}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
a.cBlue:hover{color:#bc2931;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#c00;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}

/* 头图 */
.col{margin: 20 0 0 0;float:center; width:252px;border:1px solid #006BB6;}
.focusPic{margin:0 auto; width:252px;}
.focusPic .pic{margin:0 auto; width:250px; height:191px; padding:5px 0 0; background:url(http://cimg2.163.com/ent/n... no-repeat;}
.focusPic .pic img{margin:6px 0 0 0;}
.focusPic .pic h3 {text-align:left; padding:1px 0 0 12px;}
.focusPic .pic h3 img {margin:0px; }

.focusPic .pic .flashBlank {margin:0 auto; width:100%; height:6px; font-size:1px; }
.focusPic .pic h5 {text-align:left; padding:0px 0 0 12px !important;padding:5px 0 0 12px;}
.focusPic .pic h5 img {margin:0px; }

.focusPic h2{ float:left; width:236px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:236px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px; height:57px;}
.focusPic .more{ margin:0 auto; width:250px; }
.focusPic .more .textNum{float:right; margin:0 8px 0 0;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://ent.163.com/newimg/...}
.focusPic .more .textNum .bg2{ background:url(http://ent.163.com/newimg/...}
.focusPic .more .textNum .bg3{ background:url(http://ent.163.com/newimg/...}
.focusPic .more .textNum .bg4{ background:url(http://ent.163.com/newimg/...}
.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>
<div class="col">
<!-- 头图 -->
<script language="javascript">
var nn;
nn=1;
setTimeout("change_img()",6000);
function change_img()
{
if(nn>4) nn=1
setTimeout("setFocus1("+nn+")",6000);
nn++;
tt=setTimeout("change_img()",6000);
}
function setFocus1(i)
{
sel&#101;ctLayer1(i);
}
function sel&#101;ctLayer1(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"> <a href="http://ent.163.com/06/0410... src="http://cimg2.163.com/ent/2... alt="章子怡黑衣蒙头上吴彦祖保姆车" width="228" height="150" border="0" /></a>
<h3><a href="http://adclient.163.com/ev...
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&amp;Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/n... width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://ent.163.com/06/0410...章子怡黑衣蒙头上吴彦祖保姆车</a></h2>
<p>　　章子怡日前和霍启山闹分手，前晚(4月8日)在香港又被媒体跟拍到她和吴彦祖一起玩乐、还一上车就遮遮掩掩 <img src="http://cimg2.163.com/ent/n... alt="详细" width="3" height="13" /> <a href="http://ent.163.com/06/0410... class="cDRed">详细</a></p>
</div>
<div id="focusPic2" style="display: none;">
        <div class="pic"> <a href="http://ent.163.com/06/0410... src="http://cimg2.163.com/ent/2... alt="刘晓庆重演武则天造型曝光" width="228" height="150" border="0" /></a>
<h3><a href="http://adclient.163.com/ev...
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&amp;Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/n... width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://ent.163.com/06/0410...刘晓庆重演武则天造型曝光</a></h2>
<p>　　《日月凌空》正紧张拍摄,刘晓庆再次扮演武则天,记者通过特殊渠道获得了两张被称为剧组顶级机密的造型照。 <img src="http://cimg2.163.com/ent/n... alt="详细" width="3" height="13" /> <a href="http://ent.163.com/06/0410... class="cDRed">详细</a></p>
</div>
<div id="focusPic3" style="display: none;">
        <div class="pic"> <a href="http://adclient.163.com/ev...,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&amp;Redirect=http://ent.163.com/special/00031SST/FQ.html"><img src="http://cimg2.163.com/ent/2... alt="赢飞利浦768手机" width="228" height="150" border="0" /></a>
<h3><a href="http://adclient.163.com/ev...
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&amp;Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/n... width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://adclient.163.com/ev...,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&amp;Redirect=http://ent.163.com/special/00031SST/FQ.html">赢飞利浦768手机</a></h2>
<p>　　参加飞利浦手机娱乐关键字专题活动，赢取飞利浦768手机，活动正火热进行中 <img src="http://cimg2.163.com/ent/n... alt="详细" width="3" height="13" /> <a href="http://adclient.163.com/ev...,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&amp;Redirect=http://ent.163.com/special/00031SST/FQ.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic4" style="display: none;">
        <div class="pic"><div class="clear flashBlank">　</div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia...,0,29,0" width="228" height="150">
<param name="movie" value="http://cimg3.163.com/ent/2... />
<param name="quality" value="high" />
<embed src="http://cimg3.163.com/ent/2... quality="high" pluginspage="http://www.macromedia.com/... type="application/x-shockwave-flash" width="228" height="150"></embed>
</object>
<h5><a href="http://adclient.163.com/ev...
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&amp;Redirect=http://http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/n... width="104" height="21" alt="" /></a></h5>
        </div>
<h2><a href="http://adclient.163.com/ev...,43,51,60,72,78,84,91,100,110,312,330,332,364,586,702,733,734&amp;Redirect=http://pepsi.163.com/">中国无名小子挑战球星贝克汉姆</a></h2>
<p>　　两个中国无名小子将会亲身与贝克汉姆、罗纳尔迪尼奥、亨利等世界顶级球星面对面。 <img src="http://cimg2.163.com/ent/n... alt="详细" width="3" height="13" /> <a href="http://adclient.163.com/ev...,43,51,60,72,78,84,91,100,110,312,330,332,364,586,702,733,734&amp;Redirect=http://pepsi.163.com/" class="cDRed">详细</a></p>
</div>
<div class="more">
<div class="textNum">
<div class="text">> 更多头图新闻</div>
<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>

Tags: 幻灯, 图片切换

网页|前台相关 | 评论:2 | Trackbacks:0 | 阅读:2321

JS图片按比例缩放,完美版支持动态网页的批量处理

Submitted by on 2006, November 30, 8:51 PM

代码:
<script language="JavaScript">
<!--
//图片按比例缩放
var flag=false;
function DrawImage(ImgD){
var image=new Image();
var iwidth = 150; //定义允许图片宽度
var iheight = 100; //定义允许图片高度
image.src=ImgD.src;
if(image.width>0 &amp;&amp; image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}

ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//调用：<img src="图片" onload="javascript:DrawImage(this)">
//-->
</script>

Tags: JS, 缩放

网页|前台相关 | 评论:0 | Trackbacks:0 | 阅读:1520

做站常用代码

Submitted by on 2006, November 2, 6:34 PM

<linkrel="ShortcutIcon"href="favicon.ico">IE地址栏前换成自己的图标

<linkrel="Bookmark"href="favicon.ico">可以在收藏夹中显示出你的图标

<inputstyle="ime-mode:disabled">关闭输入法

永远都会带着框架
<scriptlanguage="javascript"><!--
if(window==top)top.location.href="frames.htm";//frames.htm为框架网页
//--></script>

防止被人frame
<SCRIPTLANGUAGE=javascript><!--
if(top.location!=self.location)top.location=self.location;
//--></SCRIPT>

<noscript><iframesrc=*.html></iframe></noscript>网页将不能被另存为


判断上一页的来源
asp:
request.servervariables("HTTP_REFERER")

javascript:
document.referrer

最小化、最大化、关闭窗口
<objectid=hh1classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<paramname="Command"value="Minimize"></object>
<objectid=hh2classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<paramname="Command"value="Maximize"></object>
<OBJECTid=hh3classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAMNAME="Command"value="Close"></OBJECT>

<inputtype=buttonvalue=最小化onclick=hh1.Click()>
<inputtype=buttonvalue=最大化onclick=hh2.Click()>
<inputtype=buttonvalue=关闭onclick=hh3.Click()>
本例适用于IE

TEXTAREA自适应文字行数的多少
<textarearows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

本机ip<%=request.servervariables("remote_addr")%>
服务器名<%=Request.ServerVariables("SERVER_NAME")%>
服务器IP<%=Request.ServerVariables("LOCAL_ADDR")%>
服务器端口<%=Request.ServerVariables("SERVER_PORT")%>
服务器时间<%=now%>
IIS版本<%=Request.ServerVariables"SERVER_SOFTWARE")%>
脚本超时时间<%=Server.ScriptTimeout%>
本文件路径<%=server.mappath(Request.ServerVariables("SCRIPT_NAME"))%>
服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSORS")%>
服务器解译引擎<%=ScriptEngine&amp;"/" &amp; ScriptEngineMajorVersion &amp;"." &amp; ScriptEngineMinorVersion &amp; "." &amp; ScriptEngineBuildVersion%>
服务器操作系统<%=Request.ServerVariables("OS")%>

ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">

网页不会被缓存
HTM网页
<METAHTTP-EQUIV="pragma"CONTENT="no-cache">
<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache,must-revalidate">
<METAHTTP-EQUIV="expires"CONTENT="Wed,26Feb199708:21:57GMT">
或者<METAHTTP-EQUIV="expires"CONTENT="0">
ASP网页
Response.Expires=-1
Response.ExpiresAbsolute=Now()-1
Response.cachecontrol="no-cache"
PHP网页
header("Expires:Mon,26Jul199705:00:00GMT");
header("Cache-Control:no-cache,must-revalidate");
header("Pragma:no-cache");

网页|前台相关 | 评论:0 | Trackbacks:0 | 阅读:1033

改善用户体验的alert提示效果

Submitted by on 2006, October 29, 10:48 PM

现在，当弹出千篇一律的Alert警告框被这样的一种方式取代时，给人的感觉是相当的新鲜的。

这样
[html]
<input type="button" value="点击这里" onclick="sAlert("测试效果<br>还可以直接书写HTML代码 <br>? 2006");" />

<script type="text/javascript" language="javascript">
//Author:Daviv
//Blog:http://blog.163.com/jxdawe...
//Date:2006-10-28
//Email:jxdawei@gmail.com
            function sAlert(str){
            var msgw,msgh,bordercolor;
            msgw=400;//提示窗口的宽度
            msgh=100;//提示窗口的高度
            bordercolor="#336699";//提示窗口的边框颜色
            titlecolor="#99CCFF";//提示窗口的标题颜色
            
            var sWidth,sHeight;
            sWidth=document.body.offsetWidth;
            sHeight=document.body.offsetHeight;
            

            var bgObj=document.cr&#101;ateElement("div");
            bgObj.setAttribute("id","bgDiv");
            bgObj.style.position="absolute";
            bgObj.style.top="0";
            bgObj.style.background="#777";
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
            bgObj.style.opacity="0.6";
            bgObj.style.left="0";
            bgObj.style.width=sWidth + "px";
            bgObj.style.height=sHeight + "px";
            document.body.appendChild(bgObj);
            var msgObj=document.cr&#101;ateElement("div")
            msgObj.setAttribute("id","msgDiv");
            msgObj.setAttribute("align","center");
            msgObj.style.position="absolute";
            msgObj.style.background="white";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.border="1px solid " + bordercolor;
            msgObj.style.width=msgw + "px";
            msgObj.style.height=msgh + "px";
          msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
          msgObj.style.left=(sWidth-msgw)/2 + "px";
          var title=document.cr&#101;ateElement("h4");
          title.setAttribute("id","msgTitle");
          title.setAttribute("align","right");
          title.style.margin="0";
          title.style.padding="3px";
          title.style.background=bordercolor;
          title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
          title.style.opacity="0.75";
          title.style.border="1px solid " + bordercolor;
          title.style.height="18px";
          title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
          title.style.color="white";
          title.style.cursor="pointer";
          title.innerHTML="<b>×</b>";
          title.onclick=function(){
            document.body.removeChild(bgObj);
        document.getElementById("msgDiv").removeChild(title);
        document.body.removeChild(msgObj);
        }
          document.body.appendChild(msgObj);
          document.getElementById("msgDiv").appendChild(title);
          var txt=document.cr&#101;ateElement("p");
          txt.style.margin="1em 0"
          txt.setAttribute("id","msgTxt");
          txt.innerHTML=str;
      document.getElementById("msgDiv").appendChild(txt);
      }
        </script>
[/html]
把SCRIPT做成一个JS文件就可以了。

Tags: JS, alert

网页|前台相关 | 评论:0 | Trackbacks:0 | 阅读:1255

Div+CSS布局入门教程

Submitted by on 2006, October 16, 10:55 PM

番茄的DIV+CSS布局教程，好多地方都有转载，只是少了最后一点点。这里是全了，虽然番茄并未写完全部教程，但是已经把我们想要的，大部分都讲述了。推荐。

» 阅读全文

Tags: div, css

网页|前台相关 | 评论:0 | Trackbacks:0 | 阅读:1239

如何制作favicon.ico图标

Submitted by on 2006, October 15, 4:36 PM

制作favicon.ico图标就这么容易，按下面步骤很快完成：


第一步：用画图软件如Photoshop或者FireWorks做一个16*16的图标，为jpg或gif格式；

第二步：然后通过以下站点转换为favicon.ico文件：http://www.chami.com/html-...

第三步：下载生成的favicon.ico并上传至网站根目录；

第四步：在页面的head之间，添加上就可以了。

在线生成favicon.ico

地址:http://www.chami.com/html-...

地址:http://www.chami.com/html-...

有6个在线工具

FavIcon from Pics //这个就是在线生成favicon.ico图标了，提交任何一个图片，它会给你生成一个ICO文件，并打包下载

Favicon Validator //favicon验证

Buddy Icon from Pics //把图片转换成ICO格式，还可制作PNG格式的背景图片

Image Embellisher //制作特殊效果的图片，比如立方体，Windows徽标那样的波浪

Online Image Splitter //切割图片

当然淡水河边也知道，可以用专门的制图软件来做。只是目前淡水河边还不知道什么样的软件可以直接制作ICO。而且用上面的方法不需要重新学习新的软件。方便。

网页|前台相关 | 评论:1 | Trackbacks:0 | 阅读:2545

SP2不显示验证码图片的解决办法

Submitted by on 2006, October 10, 6:46 AM

安装XP sp2 后，有些网站论坛不可以显示验证码图片的解决办法！

如果大家安装xp sp2后，会发现注册一些论坛的时候，需要填写验证码的时，验证码图片无法正常显示出来，没有安装sp2补丁之前却是正常了！其实这很容易解决，方法如下：

用打开记事本，输入下面的信息：

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Security]

"BlockXBM"=dword:00000000

然后另存为扩展名为reg格式的文件。

再双击这个文件导入注册表就可以了

网页|前台相关 | 评论:1 | Trackbacks:0 | 阅读:1771

ewebeditor3.8asp版提供

Submitted by on 2006, September 8, 8:00 PM

ewebeditor3.8 无数数据库的。仔细看了一下，缺少管理部分。
下载文件
点击这里下载文件

Tags: editor

网页|前台相关 | 评论:2 | Trackbacks:0 | 阅读:1687

页面过10秒后自动跳转怎么做?

Submitted by on 2006, August 25, 3:48 AM

最简单的做法是在页面的<head></head>标签中加入以下代码：

<meta http-equiv="Refresh" content="10;url="a.asp"">

这样就会在页面打开后10秒钟跳转到a.asp了。

也可以用javascript的settimeout来完成，在页面中加入以下代码：

<script language=javascript>
var the_timeout = setTimeout("location="a.asp"",10000);
</script>

上面的代码完成同样的效果。

Tags: 跳转

网页|前台相关 | 评论:0 | Trackbacks:0 | 阅读:1330

JS标签

Submitted by on 2006, August 24, 7:48 PM

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml...
<html xmlns="http://www.w3.org/1999/xht...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
    margin: 0; padding:0
}
body {
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    text-align: center;
    height: auto;
    width: auto;
    background-color: #666666;
    font-size: 12px;
    color: #000000;
}
#container {
    text-align: left;
    width: 760px;
    height: 400px;
    background-color: #FFFFFF;
    padding: 20px;
}

#container #title {
    height: 28px;
}
#container #title li {
    float: left;
    list-style-type: none;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin-right: 1px;
}
#container #title ul {
    background-color: #FFFFFF;
    height: 28px;
}
#container #title a {
    text-decoration: none;
    color: #000000;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -29px;
}
#container #title a span{
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -29px;
    padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -87px;
}
#container #title #tag1 a:hover span{
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -87px;
    padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left 0px;
}
#container #title #tag2 a:hover span{
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right 0px;
    padding: 0 15px 0 15px;    
}
#container #title #tag3 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -58px;
}
#container #title #tag3 a:hover span{
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -58px;
    padding: 0 15px 0 15px;    
}
#container #title #tag4 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -145px;
}
#container #title #tag4 a:hover span{
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -145px;
    padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -174px;
}
#container #title #tag5 a:hover span{
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -174px;
    padding: 0 15px 0 15px;
}
#container #title .sel&#101;ctli1 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -87px;
}
#container #title a .sel&#101;ctspan1 {
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -87px;
    padding: 0 15px 0 15px;
}
#container #title .sel&#101;ctli2 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left 0px;
}
#container #title a .sel&#101;ctspan2 {
    display: block;

    background: url(http://pics.taobao.com/2k5... no-repeat right 0px;
    padding: 0 15px 0 15px;
}
#container #title .sel&#101;ctli3 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -58px;
}
#container #title a .sel&#101;ctspan3 {
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -58px;
    padding: 0 15px 0 15px;
}
#container #title .sel&#101;ctli4 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -145px;
}
#container #title a .sel&#101;ctspan4 {
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -145px;
    padding: 0 15px 0 15px;
}
#container #title .sel&#101;ctli5 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(http://pics.taobao.com/2k5... no-repeat left -174px;
}
#container #title a .sel&#101;ctspan5 {
    display: block;
    background: url(http://pics.taobao.com/2k5... no-repeat right -174px;
    padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
    height: 300px;
    padding: 10px;
}
.content1 {
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #3A81C8;
    border-right-color: #3A81C8;
    border-bottom-color: #3A81C8;
    border-left-color: #3A81C8;
    background-color: #DFEBF7;
}
.content2 {
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #ff950b;
    border-right-color: #ff950b;
    border-bottom-color: #ff950b;
    border-left-color: #ff950b;
    background-color: #FFECD2;
}
.content3 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FE74B8;
    border-right-color: #FE74B8;
    border-bottom-color: #FE74B8;
    border-left-color: #FE74B8;
    background-color: #FFECF5;
}
.content4 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #00988B;
    border-right-color: #00988B;
    border-bottom-color: #00988B;
    border-left-color: #00988B;
    background-color: #E8FFFD;
}
.content5 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #A8BC1F;
    border-right-color: #A8BC1F;
    border-bottom-color: #A8BC1F;
    border-left-color: #A8BC1F;
    background-color: #F7FAE2;
}
.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
//    alert(tag);
//    alert(content);
    for(i=1; i <6; i++)
    {
        if ("tag"+i==tag)
        {
            document.getElementById(tag).getElementsByTagName("a")[0].className="sel&#101;ctli"+i;
            document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="sel&#101;ctspan"+i;
        }else{
            document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
            document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
        }
        if ("content"+i==content)
        {
            document.getElementById(content).className="";
        }else{
            document.getElementById("content"+i).className="hidecontent";
        }
        document.getElementById("content").className=content;
    }
}
</script>
</head>

<body>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag("tag1","content1");this.blur();" class="sel&#101;ctli1"><span class="sel&#101;ctspan1">首页</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag("tag2","content2");this.blur();"><span>下载中心</span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag("tag3","content3");this.blur();"><span>产品介绍</span></a></li>
      <li id="tag4"><a href="#" onclick="switchTag("tag4","content4");this.blur();"><span>会员注册与登录</span></a></li>
      <li id="tag5"><a href="#" onclick="switchTag("tag5","content5");this.blur();"><span>联系我们</span></a></li>
    </ul>
  </div>
<div id="content" class="content1">
  <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>    
  <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
  <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div>
  <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
  <div id="content5" class="hidecontent">5、这是使用到的两个图片：
         <table width="58%" border="1" cellspacing="2" cellpadding="0">
           <tr>
             <td width="70%" align="center"><img src="http://pics.taobao.com/2k5... width="250" height="290" /></td>
             <td width="30%" align="center"><img src="http://pics.taobao.com/2k5... width="15" height="290" /></td>
           </tr>
         </table>
  </div>
</div>  

</div>
</body>
</html>[/html]

Tags: JS, 标签

网页|前台相关 | 评论:0 | Trackbacks:0 | 阅读:1163

Records:96‹12345678910›