位置: 编程技术 - 正文

使用css实现全兼容tooltip提示框(css全局样式基础代码)

编辑:rootadmin

推荐整理分享使用css实现全兼容tooltip提示框(css全局样式基础代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css样式兼容所有浏览器,css 兼容,css 全屏,css all,css all,使用css实现全兼容的方法,css 兼容,使用css实现全兼容的方法,内容如对您有帮助,希望把文章链接给更多的朋友!

最终效果图:

基本原理

先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置。这样就得到一个基本的tooltip,但是没有边框看起来总是不舒服,我们可以给div盒子设置一个边框,这没什么难度,但是三角形图标如何设置边框呢?这里我们通过一个取巧的方式,让两个不同颜色的三角形图标叠加,并且位置错开1px,这样底层三角形top border被遮盖,只露出左右border部分,叠加在一起我们就得到一个看似带边框的三角形图标。

step by step

1.先定义一个相对定位的盒子div:

css:

效果:

2.接下来利用上篇post的知识我们给div盒子添加一个三角型图标:

使用css实现全兼容tooltip提示框(css全局样式基础代码)

三角形图标css:

效果:初具雏形,甚至可以拿来直接用了,但是如果tooltip背景色和目标背景色重合,那么我么就很难分辨出来了,所以我们需要给它定义个border。

3.添加bordercss:

效果:盒子有了边框效果,但是下面的小三角还没有被“保护”起来,这对于处女座来说简直是不能容忍的!

4.给“小三角穿上松紧带”前面在讲解原理时我们已经说过,需要使用两个三角形叠加的方式,首先我们定义两个三角形的div,一个背景色和盒子的边框颜色相同,一个背景色和盒子的背景色一致:

css定义如下:

注意:.arrow-bg和.arrow-border的bottom位置相差为1px(可根据边框宽度调整)两个div的顺序不可颠倒。我们来看看最终效果:

ok!大功告成,ie6下跑一下,完全兼容!

下一篇文章我们将通过实现一个jquery tooltips插件来完善我们的tooltips

utf8和unicode编码究竟是什么关系?有何区别? UTF8==UnicodeTransformationFormat--8bit是Unicode传送格式。即把Unicode文件转换成BYTE的传送流。UTF8流的转换程序:Input:unsignedintegerc-thecodepointofthecharactertobeencoded(

收藏了很久的CSS的十八般技巧 最近,经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS,影响CSS的效率发挥。我来分析总结一下错误所在,帮助大家更加容易使用C

XHTML下css+div布局总结 超强推荐 xml(extensibleMarkupLanguage)的出现,结构化文档和数据有了一个通用的、科适应的格式,不仅仅应用在web上,也可以应用在任何地方。标准称为可能。XHTML是T

标签: css全局样式基础代码

本文链接地址:https://www.jiuchutong.com/biancheng/371870.html 转载请保留说明!

上一篇:使用css实现全兼容浏览器的三角形(使用css实现全兼容的方法)

下一篇:utf8和unicode编码究竟是什么关系?有何区别?(unicode和utf–8 编码)

  • 建筑公司收到预付款怎么开票
  • 豆制品属于农产品初加工吗
  • 个体户一年能开多少普票
  • 债务重组计入哪项科目
  • 赔偿支出需要纳税调整吗
  • 报个税的工资表
  • 可转债如何不转换的财务处理
  • 所得税在什么情况下扣除
  • 离职人员个税申报如何处理
  • 疫苗接种防疫站
  • 购买折让
  • 废弃土地的使用年限
  • 增值税税收返还政策
  • 银行询证函费用计入财务费用还是管理费用
  • 发票报销哪些能用专票
  • 进项发票税点属于什么科目?
  • 公司股权转1元转让还涉及哪些税务风险?
  • 滞留发票一般怎么开具
  • 工程款发票备注栏项目名称
  • 金税四期有什么变化
  • 企业所得税查账征收与核定征收的区别
  • 土地作价入股土地如何过户
  • 大额转账人行审核通过
  • 福利费不属于工资
  • 销售东西的物流叫什么
  • 鸿蒙智能充电模式怎么用
  • win10专业版激活密钥永久2023
  • 生产税有哪些
  • 向境外股东分配利润怎么交税
  • 应收债权换入无偿收益
  • 职工教育经费一定要提吗
  • 安装prophet
  • 开发商卖房子要交多少营业税
  • 异地成立分公司的流程和要求
  • PHP:JDToJulian()的用法_日历函数
  • vue设置图片
  • php无限级分类
  • 基于强化学习的智能机器人路径规划算法研究(附代码)
  • linux脚本文件编写
  • 社会团体不属于财政拨款的对象
  • python中重写构造方法
  • 视同销售是指什么
  • 法人与财务负责人不应为同一人
  • mysql基本查询
  • sqlserver数据导入mysql
  • 本期销项税额怎么算
  • mysql的存储引擎有哪些,区别是什么
  • 筹建期的收入要交企业所得税吗
  • 扣除员工餐费怎么做分录
  • 单位缴纳的社保计入什么科目
  • 股份有限公司向股东借款
  • 进口货物的价格组成有哪些
  • 咨询费开发票应该选哪一项?
  • 购买需要安装的生产设备会计分录
  • 公司计提减值好吗
  • 管理费用标准制定
  • sql server使用sql语句
  • 搜狗拼音输入法xp系统
  • 如何设置window图标大小
  • linux进入操作系统
  • spamsub.exe - spamsub进程是什么文件
  • xp系统怎么关闭更新系统
  • 怎么禁止电脑qq自动启动
  • perl 采集入库脚本分享
  • js 获取ua
  • base如何使用
  • jquery获取document对象
  • ubuntu下安装visual studio
  • node.js [superAgent] 请求使用示例
  • JavaScript中的NaN代表什么
  • 关于减肥的好方法
  • node.js 微信小程序
  • jquery操作select元素和option的实例代码
  • jquery中的each方法
  • jQuery 获取跨域XML(RSS)数据的相关总结分析
  • Python的for和in
  • 国家税务总局介绍
  • 合伙企业所得税账务处理
  • 中国有没有豁免权
  • 汽车票用什么查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设