当前位置:  编程技术>WEB前端

DIV+CSS 网页TIP的简单作法

    来源: 互联网  发布时间:2014-09-06

    本文导语:  基本的原理就是用display;当display: block;就显示;当display:none;时就不显示; 例如:  代码如下:#infobox span{ display: none; } #infobox a:hover span{display: block;position:absolute;} zishu test tip /* zishu.cn */ *{ margin:0; padding:0; list-sty...

基本的原理就是用display;当display: block;就显示;当display:none;时就不显示;
例如: 
代码如下:

#infobox span{ display: none; }
#infobox a:hover span{display: block;position:absolute;}

zishu test tip /* zishu.cn */ *{ margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8;} body{ background: #333} #info{padding:50px;} #infobox{padding:0px 20px;background-color: #640000;} #center{background: #ABBAAC; border-top:2px solid #333; padding:20px;} .c{ clear:both; height:1px; overflow: hidden; background:#333} #infobox li{ border-right:1px solid #000; float:left; margin-right:1px; text-align:center;margin-top:-4px; } a{ width:100px;line-height:28px; display:block;} a:link,a:visited{color:#000;background:#FF9900;text-decoration: none;} a:hover,a:active{ color:#FFFF00;background:#000;} /*以是下显示TIP的内容*/ #infobox span{ display: none; } #infobox a:hover span{display: block;position:absolute;border:1px solid #640000;background: #FFFFCC;margin-top:26px!important; margin-top:20px;color:#000;padding:5px;white-space: nowrap;}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 在div中使用css让文字底部对齐的方法
  • mysql iis7站长之家
  • DIV+CSS 英文命名规范
  • div+css与xhtml+css分别是什么意思?
  • div+css如何实现页脚的置底
  • CSS顶级技巧大放送,div+css布局必知
  • CSS技巧DIV为空时占据空间的解决办法
  • CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
  • div+css在思路和流程上实现结构与表现的分离分析
  • 研究了一下div+css的高度自适应问题
  • div+css中Class与ID的区别
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • div+css布局必须要知道的css条件注释理论及实践第1/2页
  • 非常漂亮的Div+CSS布局入门教程第1/5页
  • DIV+CSS布局教程大全与pdf电子书 下载
  • div+css模拟表格效果代码
  • CSS中div、span和center元素
  • 用div+css解决出现水平滚动条问题
  • div+css布局必了解的列表元素ul ol li dl dt dd详解
  • 在DIV+CSS排版中新闻列表的制作方法
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • 如何动态修改层(<div ....> </div>)的显示与否?
  • java命名空间javax.swing.text.html类html.tag的类成员方法: div定义及介绍
  • 父div高度不能自适应子div高度的解决方案
  • java命名空间javax.management类query的类成员方法: div定义及介绍
  • jQuery拖动div、移动div与弹出层实例
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k1div2luminance定义及介绍
  • jQuery拖动div、移动div、弹出层实现原理及示例
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k2div2chrominance定义及介绍
  • Jquery在指定DIV加载HTML示例代码


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3