返回   CHF站长论坛 > 综合讨论区 > 网站开发与设计
刷新本页 阿里88的一段代码[精品]
注册账号 论坛帮助 会员列表 日历事件 标记版面已读

网站开发与设计 网页设计、网站开发、网站维护与调试交流区。

斗地主梭哈 变态魔域 魔兽世界私服 魔兽世界私服 中国导航-提升网站流量和价值 天龙八部私服 传奇世界私服 新开传奇私服
热血江湖私服 魔兽世界私服 魔兽世界私服 诛仙私服 传奇外传私服 魔域私服 魔域私服
发表新主题 回复
第1页，共3页 1 23 >
 
主题工具 评分: 主题评分: 1 票，平均 5.00 分。 显示模式
旧 2006-04-08, 17:19   #1 (页面定位)
srsman
 
srsman 的头像
 
注册日期: 2005-11-08
帖子: 1803
srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦srsman 身上有一圈迷人的光环哦
默认 阿里88的一段代码[精品]
代码:
<!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>无标题文档</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/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) 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/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) 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/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) 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/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) 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/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) 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/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
	padding: 0 15px 0 15px;
}
#container #title .selectli1 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
	display: block;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli2 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
	display: block; 

	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli3 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli4 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli5 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
	display: block; 
	background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) 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="selectli"+i;
			document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+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="selectli1"><span class="selectspan1">首页</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/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
             <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
           </tr>
         </table>
  </div>
</div>  

</div>
</body>
</html>
DEMO:http://blog.621000.net/al.htm
srsman 当前离线   回复时引用此帖
旧 2006-04-08, 17:28   #2 (页面定位)
不学无术
Ulysses 的元神
 
不学无术 的头像
 
注册日期: 2005-08-31
住址: 冥王星
帖子: 15290
不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀不学无术 有着人尽皆知的贡献和荣耀
默认
这个不错。
不学无术 当前离线   回复时引用此帖
旧 2006-04-08, 17:55   #3 (页面定位)
shangjay©
 
shangjay 的头像
 
注册日期: 2006-01-13
住址: 武汉
帖子: 3053
shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星shangjay 即将成为的新星
默认
确实。不错
shangjay 当前离线   回复时引用此帖
旧 2006-04-08, 21:14   #4 (页面定位)
100000why
 
注册日期: 2006-02-11
帖子: 185
100000why 是普普通通的会员
默认
也就是选项卡效果
见过类似的
不过这个很漂亮


我本将心向课堂，奈何春风过走廊~~
100000why 当前离线   回复时引用此帖
旧 2006-04-08, 22:45   #5 (页面定位)
老林©
 
老林 的头像
 
注册日期: 2005-09-06
帖子: 10437
老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星老林 即将成为的新星
默认
不错
老林 当前离线   回复时引用此帖
旧 2006-04-08, 23:11   #6 (页面定位)
一路走
 
一路走 的头像
 
注册日期: 2005-11-05
帖子: 2935
一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦一路走 身上有一圈迷人的光环哦
默认
不错，好东西
一路走 当前离线   回复时引用此帖
旧 2006-04-09, 16:50   #7 (页面定位)
good8
 
注册日期: 2006-01-11
帖子: 86
good8 是普普通通的会员
默认
要是能将将http://www.flash8.net/里的此代码搞定最好了，楼主试试！？
上传的图像
文件类型: jpg {B9E76F3B-B9AF-4F29-9301-FC.jpg (6.4 KB, 11 次查看)
good8 当前离线   回复时引用此帖
旧 2006-04-10, 02:54   #8 (页面定位)
枕云
 
枕云 的头像
 
注册日期: 2005-10-03
帖子: 80
枕云 是普普通通的会员
默认
确实的确不错。。。
枕云 当前离线   回复时引用此帖
旧 2006-04-10, 03:20   #9 (页面定位)
Kevin_Zhou©
 
Kevin_Zhou 的头像
 
注册日期: 2005-10-23
帖子: 11033
Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星Kevin_Zhou 绝对是天王巨星
默认
不错,收藏!
Kevin_Zhou 当前离线   回复时引用此帖
旧 2006-04-10, 09:37   #10 (页面定位)
Function
 
Function 的头像
 
注册日期: 2006-03-24
帖子: 3891
Function 是一个将要出名的人Function 是一个将要出名的人Function 是一个将要出名的人Function 是一个将要出名的人Function 是一个将要出名的人Function 是一个将要出名的人Function 是一个将要出名的人Function 是一个将要出名的人
默认
引用:
作者: good8
要是能将将http://www.flash8.net/里的此代码搞定最好了，楼主试试！？
效果是类似的，阿里的是通过 onclick 行为来触发，flash8 的是通过 onmouseover 来触发。

当然可能也有一些其它的细节差异，而且界面，更多的是 CSS 等效果问题。
Function 当前离线   回复时引用此帖
旧 2006-04-10, 10:07   #11 (页面定位)
swenge
 
swenge 的头像
 
注册日期: 2005-11-28
帖子: 386
swenge 是普普通通的会员
默认
不错收了！


引用:
出售FLASH全站PHP + 生HTML + 7000本地数据 + 采集 + 赠送一个大站本地采集规则 + 绚丽模板 + 技术支持！
QQ：1158459 或 PM 看演示
swenge 当前离线   回复时引用此帖
旧 2006-04-11, 16:53   #12 (页面定位)
BoBo
 
BoBo 的头像
 
注册日期: 2005-09-29
住址: 国家安全部
帖子: 921
BoBo 是普普通通的会员
默认
没有YAHOO.COM那个好


引用:
看什么，我没文化没素质，还怕你不成。
BoBo 当前离线   回复时引用此帖
旧 2006-04-11, 16:58   #13 (页面定位)
OUYANG
 
OUYANG 的头像
 
注册日期: 2005-09-06
帖子: 2777
OUYANG 正向着好的方向发展OUYANG 正向着好的方向发展OUYANG 正向着好的方向发展OUYANG 正向着好的方向发展
默认
引用:
作者: 一路走
不错，好东西


人生一场戏，你是主角也是配角！
OUYANG 当前在线   回复时引用此帖
旧 2006-04-12, 10:36   #14 (页面定位)
警察叔叔
 
注册日期: 2006-03-29
帖子: 8
警察叔叔 是普普通通的会员
默认
早会了
警察叔叔 当前离线   回复时引用此帖
旧 2006-04-12, 10:58   #15 (页面定位)
流氓兔
 
流氓兔 的头像
 
注册日期: 2005-09-27
帖子: 909
流氓兔 正向着好的方向发展流氓兔 正向着好的方向发展流氓兔 正向着好的方向发展流氓兔 正向着好的方向发展流氓兔 正向着好的方向发展
默认
非常喜欢 以前找过这样的 代码 可找不到 今天终于出现了


我的"拔萝卜"
流氓兔 当前离线   回复时引用此帖
回复
第1页，共3页 1 23 >

书签

编辑标签
标签
无

« 上一主题 | 下一主题 »
主题工具
显示模式 对此主题评分
平板模式 平板模式
对此主题评分:



所有时间均为北京时间。现在的时间是 09:39。

联系我们 - 站长资讯 - 论坛存档 - 返回顶端