zoukankan
html css js c++ java
仿淘宝网站的TabPage导航效果
代码如下:
<!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; auto; background-color: #666666; font-size: 12px; color: #000000; } #container { text-align: left; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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- 3px; border-right- 1px; border-bottom- 1px; border-left- 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- 3px; border-right- 1px; border-bottom- 1px; border-left- 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- 3px; border-right- 1px; border-bottom- 1px; border-left- 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- 3px; border-right- 1px; border-bottom- 1px; border-left- 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- 3px; border-right- 1px; border-bottom- 1px; border-left- 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; } } function init(){ t=document.location.hash.replace('#',''); if(t=='')t=1; switchTag('tag'+t,'content'+t); } </script> </head> <body onload="init()"> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#1" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li> <li id="tag2"><a href="#2" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li> <li id="tag3"><a href="#3" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li> <li id="tag4"><a href="#4" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li> <li id="tag5"><a href="#5" 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>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
青苹果Web应用商店
https://webapp.taobao.com/
PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发,详细需求联系
QQ:8511978
查看全文
相关阅读:
Android的目录结构说明
IOS-线程(GCD)
iOS UI-线程(NSThread)及其安全隐患与通信
iOS UI-自动布局(AutoLayout)
iOS UI-自动布局(Autoresizing)
IOS-Core Data的使用
OC 数据持久化(数据本地化)- 本地存储
iOS UI-应用管理(使用Cell模板)
IOS UI-QQ好友列表
IOS-多线程
原文地址:https://www.cnblogs.com/Dicky/p/401666.html
最新文章
Mac下安装LNMP(Nginx+PHP5.6)环境(转)
Mac下配置mnmp环境
brew Error: Formulae found in multiple taps
Nginx访问控制_登陆权限的控制(http_auth_basic_module)
PHP函数register_shutdown_function的用法
Nginx访问控制_IP访问控制(http_access_module)原理、局限性、解决方法讲解
RabbitMQ学习之(五)_一个基于PHP的RabbitMQ操作类
RabbitMQ学习之(四)_PHP操作RabbitMQ简单Demo
RabbitMQ学习之(三)_Centos6下RabbitMQ PHP扩展的安装
RabbitMQ学习之(二)_Centos6下安装RabbitMQ及管理配置
热门文章
RabbitMQ学习之(一)_初步了解RabbitMQ、RabbitMQ的使用流程、为什么要使用RabbitMQ、RabbitMQ的应用场景
PHP(Mysql/Redis)消息队列的介绍及应用场景案例
MySQL 触发器例子(两张表同步增加和删除)
dede时间格试,dede时间标签
dede 标签
安装ecshop提示“安装数据失败”或者“创建管理员帐号”
JAVA insert() 插入字符串 reverse() 颠倒 delete()和deleteCharAt() 删除字符 replace() 替换 substring() 截取子串
java 实现多线程的两种方式
java 常用的包 默认导入的包
Android编程 获取网络连接状态 及调用网络配置界面
Copyright © 2011-2022 走看看