CSS实例(七):工具条效果
来源:互联网 发布:河南省大数据谷是哪里 编辑:程序博客网 时间:2024/06/02 23:31
图片素材:
网页代码:
效果,编辑调试环境IE7:
网页代码:
- <!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">
- html,body{
- font-size:12px;
- }
- .dataBar a,.dataBar span,.dataBar div{
- display:block;
- height:16px;
- line-height:16px;
- vertical-align:middle;
- float:left;
- }
- .dataBar div{
- float:left;
- padding:0 0.5em;
- }
- .dataBar a{
- color:red;
- text-decoration:none;
- padding-left:3px;
- }
- .dataBar a:hover,.dataBar a#currentData{
- color:white;
- }
- .dataBar span{
- cursor:hand;
- padding-right:3px;
- }
- .dataBar a:hover,.dataBar a:hover span,.dataBar a#currentData,.dataBar a#currentData span{
- background:url(tab.gif) 0 0;
- }
- .dataBar a:hover span,.dataBar a#currentData span{
- background-position:100% 100%;
- }
- </style>
- <script type="text/javascript">
- function itemClick(a){
- var id = "currentData";
- if(a.id==id){
- return true ;
- }
- else{
- document.getElementById(id).id="";
- a.id=id;
- }
- return true;
- }
- </script>
- </head>
- <body style="background-color:#ccc">
- <!--http://wallimn.iteye.com-->
- <div class="dataBar" style="height:16px;">
- <a href="#" id="currentData" onclick="itemClick(this)"><span>最新动态</span></a>
- <div>|</div>
- <a href="#" onclick="itemClick(this)"><span>高清</span></a>
- <div>|</div>
- <a href="#" onclick="itemClick(this)"><span>美剧</span></a>
- <div>|</div>
- <a href="#" onclick="itemClick(this)"><span>动漫</span></a>
- </div>
- </body>
- </html>
效果,编辑调试环境IE7:
- CSS实例(七):工具条效果
- 幕布效果CSS代码实例
- 七款 CSS 自動換行效果
- IOS UIToolbar 工具条实例
- CSS滑动导航栏效果实例
- CSS实例(九):多种菜单效果
- HTML与CSS简单页面效果实例
- CSS实例:Tab选项卡效果
- HTML与CSS简单页面效果实例
- CSS学习(七)-边框阴影效果(下)
- CSS基础-37HTML与CSS简单页面效果实例
- 【OpenGL】Shader实例分析(七)- 雪花飘落效果
- CSS(七)
- 工具条
- CSS布局实例 简洁的效果 火红的围城
- CSS实例:用ul+li打造图书目录效果
- CSS实例:非常不错的鼠标悬停TIP效果
- CSS实例(四):实现TabView(页签)效果
- 关于@synchronized(self)的用法
- ubuntu搭建可匿名访问ftp服务器
- 数据库脚本
- Java自定义日志输出文件
- Linux系统中的关机命令
- CSS实例(七):工具条效果
- LA4256 离散+超级汇点 通过连边转移状态
- fatal error C1189: #error : This file requires _WIN32_WINNT to be #defined a
- 异步编程设计模式
- dp+计数 poj-1037-A decorative fence
- 求质量分布均匀的n边形的重心
- 让AngelScript运行起来
- 2013 杭州赛区邀请赛
- 链表的头指针在函数里修改怎么没有用?