CSS实例(七)：工具条效果

最新推荐文章于 2022-11-08 17:45:48 发布
最新推荐文章于 2022-11-08 17:45:48 发布
阅读量1.9k 收藏
点赞数
分类专栏： div/css
图片素材：




　　网页代码：
Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4.     <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>   
  5. <title></title>  
  6. <style type="text/css">  
  7.     html,body{  
  8.         font-size:12px;  
  9.     }  
  10.     .dataBar a,.dataBar span,.dataBar div{  
  11.         display:block;  
  12.         height:16px;  
  13.         line-height:16px;  
  14.         vertical-align:middle;  
  15.         float:left;  
  16.     }  
  17.     .dataBar div{  
  18.         float:left;  
  19.         padding:0 0.5em;  
  20.     }  
  21.     .dataBar a{  
  22.         color:red;  
  23.         text-decoration:none;  
  24.         padding-left:3px;  
  25.     }  
  26.     .dataBar a:hover,.dataBar a#currentData{  
  27.         color:white;  
  28.     }  
  29.     .dataBar  span{  
  30.         cursor:hand;  
  31.         padding-right:3px;  
  32.     }  
  33.     .dataBar a:hover,.dataBar a:hover span,.dataBar a#currentData,.dataBar a#currentData span{  
  34.         background:url(tab.gif) 0 0;  
  35.     }  
  36.     .dataBar a:hover span,.dataBar a#currentData span{  
  37.         background-position:100% 100%;  
  38.     }  
  39. </style>  
  40. <script type="text/javascript">  
  41.         function itemClick(a){  
  42.             var id = "currentData";  
  43.             if(a.id==id){  
  44.                 return true ;  
  45.             }  
  46.             else{  
  47.                 document.getElementById(id).id="";  
  48.                 a.id=id;  
  49.             }  
  50.             return true;  
  51.         }  
  52. </script>  
  53. </head>  
  54. <body style="background-color:#ccc">  
  55.     <!--http://wallimn.iteye.com-->  
  56.     <div class="dataBar" style="height:16px;">  
  57.         <a href="#" id="currentData" onclick="itemClick(this)"><span>最新动态</span></a>  
  58.         <div>|</div>  
  59.         <a href="#" onclick="itemClick(this)"><span>高清</span></a>  
  60.         <div>|</div>  
  61.         <a href="#" onclick="itemClick(this)"><span>美剧</span></a>  
  62.         <div>|</div>  
  63.         <a href="#" onclick="itemClick(this)"><span>动漫</span></a>  
  64.     </div>  
  65. </body>  
  66. </html>  


　　效果，编辑调试环境IE7：


CSS3悬停凸起菜单工具条特效
06-24
CSS3悬停凸起菜单工具条特效是一款黑色3D质感的图标菜单工具条，图标导航栏悬停高亮突出显示特效。
css+javascript制作的模仿word工具条
05-28
css+javascript制作的模仿word工具条css+javascript制作的模仿word工具条css+javascript制作的模仿word工具条
纯CSS打造一个顶部工具条(兼容所有浏览器)
weixin_30443895的博客
04-15 195
可能许多人在制作顶部DIV跟随滚动的时候认为用JS才可以实现,这里我用CSS写了一个顶部工具条,代码如下; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns...
CSS简约垂直导航工具条
ICode联盟
09-20 207
下载地址简约的垂直样式导航工具条样式，hover悬停黑色竖直的图标导航工具栏，悬停冒泡文字提示效果。可用于功能性网页工具栏ui布局特效。 dd:
CSS--overflow:hidden在项目实例中使用心得分享
09-22
CSS中的overflow属性是一个非常实用的工具，它通常用于处理元素内部的内容溢出问题。"overflow:hidden"则是这个属性的其中一个值，它能够隐藏超出元素设定范围的内容，并且不提供滚动条，从而使得溢出的内容不会显示...
CSS 导航条 10个实例
03-22
本教程将通过10个CSS导航条实例，帮助你掌握创建吸引人且功能强大的导航条的技巧。这些实例主要关注样式和交互效果的实现，旨在提升用户体验。 1. **静态水平导航条**： 创建一个基本的水平导航条，通常包括链接...
js实现常见的工具条效果
01-19
实现功能如下： 1. 二维码展示功能； 2. “回到顶部”功能。(选择“全屏预览”，滑动滚动条，查看回到顶部功能) 效果图： ...工具条</title> [removed][removed] <style type=text/css> bod
HTML5 CSS3 ：canvas 模拟实现电子彩票刮刮乐实例代码
07-12
在这个“HTML5 CSS3：canvas模拟实现电子彩票刮刮乐实例代码”中，我们将深入探讨如何利用Canvas API创建一个互动式的刮刮乐彩票效果。 首先，Canvas的基本用法是通过`<canvas>`标签在HTML文档中创建一个画布，然后...
19款最经典的CSS样式导航栏.zip
11-20
19款最经典的CSS样式导航栏 即全面又经典实用！
HTML5+CSS3小实例：全屏导航栏菜单
艾恩小灰灰的博客
05-01 1238
HTML5+CSS3实现全屏导航栏菜单，悬停在右上角的小图标，点击以圆形扩散的方式绽开全屏导航栏，这种方式的导航栏很吸睛，运用也越来越广，赶紧学起来呀！ 效果： 源码： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="
（3）CSS小例子（工具栏）（终）
像初雪一样自由洒落
02-20 476
制作一个类似的工具栏 制作效果如下： 附上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> ...
css3工具栏菜单
ICode联盟
12-13 330
下载地址 .cf:before,.cf:after { content:""; display:table;}.cf:after { clear:both;}body { background: #a9b6c8; color: #fff; font: 14px/18px Arial, sans-serif; text-align: center;}p { bottom:10px; left:10px; position:absolute;}a { color:#fff;}/*---------------
图解CSS3核心技术与案例实战（第七章CSS3盒模型）
qq_34309704的博客
11-16 394
1、在CSS中主要有以下几种盒模型：inline、inline-block、block、table、absolute position、float。 2、CSS中每一个元素都是一个盒模型 3、CSS中盒模型被分为两种：W3C的标准模型和IE的传统模型，比同之处是两者的计算方法不一样（比如元素高度等） 4、box-sizing属性： 事先定义盒模型的尺寸解析方式 ① box-sizing：c
html css 导入工具栏,左侧工具栏CSS实现
weixin_35926485的博客
06-16 164
* {margin:0;padding:0}body {height:3000px;}.rgnotice {position:fixed;top:28%;right:0;background-color:#C2C2C2;-webkit-box-shadow:-5px 5px 8px #EBEBEB;-moz-box-shadow:-5px 5px 8px #EBEBEB;-o-box-shadow...
工具栏控件样式
weixin_34290000的博客
04-01 389
CMFCToolBarButton类有一组风格标志，用于确定按钮的外观和行为。您可以通过调用CMFCToolBarButton :: SetStyle来设置这些标志的组合。 以下值确定控件表示的按钮的类型： TBBS_BUTTON标准按钮（默认）。 TBBS_CHECKBOX复选框。 TBBS_CHECKGROUP一组复选框的开始。 TBBS_GROUP一组按钮的开始。 ...
html图片布局工具栏,页面布局（CSS）：页头区域里的工具栏《 从设计到代码：布局设计 》...
weixin_42353053的博客
06-22 470
现在这个在页头上显示的工具栏里面只有一个项目，我们再给它添加一个，找到 toolbar 这个容器，复制一份它里面的这个 toolbar__item 元素。这样顶部工具栏会出现两个叠加到一块儿的项目。这里我们要让它们水平排列。 回到项目，在 assets/css 里面，新建一个样式表，名字叫 toolbar.css。在这个 layout 文档里，链接刚才创建的这个 toolbar 这个样式表。 把这...
CSS通用样式4——工具类
qq_66198247的博客
11-08 1119
Bootstrap提供了十几个辅助工具类，包括边框、清除浮动、颜色、display、浮动、定位、文本对齐等。在开发中可以直接应用这些类，让开发更加快捷和简单。
2021年DREAMWEAVER网页CSS实例教程：导航素材与布局详解
本资源是一份关于DREAMWEAVER网页制作和CSS实例的详细教程，更新于2021年，主要针对互联网行业的网页设计和技术实现。教程分为两部分：CSS混沌初开I和II。 在CSS混沌初开I部分，作者重点介绍了导航菜单素材的设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值