WEB开发网
开发首页
CMS教程
WEB开发
网站运营
网页设计
图形图像
数据库
服务器
网络安全
手机开发
软件开发
操作系统
软件教学
PHP开发
PHP培训
开发学院
网页设计
DivCss
CSS+JS实现的选项卡效果(html组件)
阅读
CSS+JS实现的选项卡效果(html组件)
2006-12-19 19:21:42 来源:WEB开发网
核心提示:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html lang
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html lang="us-en"> <head> <title>CSS选项卡(html组件)</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta name="keyWords" content=" "/> <meta name="description" content="" /> <style type="text/css"> div.card div{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px;} div.card a{ color:black; font-size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px;} div.card div.home a.home{ font:normal normal bold 14px/1.5 宋体;} div.card div.international a.international { font:normal normal bold 14px/1.5 宋体;} div.card div.sport a.sport{ font:normal normal bold 14px/1.5 宋体;} div.card div.finance a.finance{ font:normal normal bold 14px/1.5 宋体;} div.card div.content{ background-color:white; border:1px solid #ff8000; height:100px;} </style> <script type="text/javascript"> var shq={} shq.cmenu=function(e) { var e=window.event?window.event.srcElement:e.target; if(/a/i.test(e.tagName)){ e.parentNode.className=e.className; e.parentNode.nextSibling.innerHTML=e.innerHTML; e.parentNode.nextSibling.style.cssText='border-top:none'; e.blur(); } } </script> </head> <body> <div class="card"> <div > <a href="#" class="home">国内</a> <a href="#" class="international">国际</a> <a href="#" class="sport">体育</a> <a href="#" class="finance">财经</a> </div><div class="content"></div> </div> <div class="card"> <div > <a href="#" class="home">国内</a> <a href="#" class="international">国际</a> <a href="#" class="sport">体育</a> <a href="#" class="finance">财经</a> </div><div class="content"></div> </div> <div class="card"> <div > <a href="#" class="home">国内</a> <a href="#" class="international">国际</a> <a href="#" class="sport">体育</a> <a href="#" class="finance">财经</a> </div><div class="content"></div> </div> </body> </html><script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>
Tags:
CSS
JS
实现
编辑录入:爽爽 [
复制链接
] [
打 印
]
相关阅读
››
JSP上传文件到指定位置
››
CSS里的 no-repeat属性是什么
››
CSS设置DIV背景色渐变显示
››
js文本框中禁止非数字字符输入
››
实现dedeCMS二级导航的简单方法
››
实现discuz投票选项文字添加链接进入查看详情
››
CSS3实现翻转菜单效果
››
实现android socket 聊天与调试
››
js判断是手机访问还是电脑访问,进行自动跳转
››
css让背景图片拉伸填充的属性
››
实现windows7系统3D切换页面的方法
››
实现Windows7系统局域网发现共享
中查找“CSS+JS实现的选项卡效果(html组件)”更多相关内容
中查找“CSS+JS实现的选项卡效果(html组件)”更多相关内容
上一篇:
用CSS设计高体验的表单显示效果示例
下一篇:
苹果应用商店最热门的三款免费游戏
更多精彩
Oracle中对两个数据表交集查询简介
Flash实例教程:用AS3代码表现倾斜角与斜率
通过ClassLoader管理组件依赖(图)
调优 DB2 UDB v8.1 及其数据库的最佳实践(2)
使用Silverlight Toolkit中的主题(Theme)
赞助商链接
热点阅读
kmixer.sys引发系统蓝屏之解决途径
ul li 横向排列不换行的做法
Excel移动到最后一行最后一列快速选择部分数...
Linux/ubuntu 查看JDK版本是32位还是64位
插入对象
[视频]vs2005入门之变量的概念\声明\特性\常...
用AI自动描图工具粗略扫描
一个简单的外挂制作
如何更改MFC按钮的背景色
可以直接越狱翻墙的Android手机版Opera Min...
焦点图片
Android获取SD卡总容量...
Photoshop调出内衣美女...
Windows7系统下有线网...
解决FF浏览器和IE下载...
最新推荐
Android 如何修改默认输入法
Windows 8中将开始菜单(metro界面)创建关机...
Android获取SD卡总容量,可用大小,机身内存...
详解Linux 系统命令及其使用
解决网页内容无法复制
实用的Win 7远程桌面连接技巧
Photoshop调出内衣美女照柔美效果
Windows7系统下有线网络优先级设置
JQuery实现下拉,单选,复选三大控件方法,
php常用过滤非法/特殊字符串的方法
精彩阅读
解析SQL Server 2005 溢用之:合并列值
Palm 模拟器 StyleTap
如何设置代理服务器
如何创建属于自己的GNU/Linux发行版系统
拒绝死板 操作系统还原有高招
MySQL数据库密码的恢复与重设
Windows 7中Firewall的新特性介绍
Photoshop给外景婚片简单聚光及润色处理
PHPUnit袖珍指南之自动测试
MySQL的基本命令
电脑定时关机一法
VMware Player简介
技术首页
| 关于本站 |
广告合作
|
联系我们
|
友情连接
|
网站地图
Copyright © 2003-2013
CnCms
.Com
. All Rights Reserved 京ICP备10000768号