CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)


Posted in HTML / CSS onAugust 15, 2017

1. 纯CSS Tooltip

 许多网站还是在使用JavaScript来创建Tooltip效果,但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性,比如data-tooltip="…"。然后你就可以在你的CSS文件中添加以下的代码通过attr()函数来显示提示文字

CSS3 函数技巧 用css 实现js实现的事情(clac Counters  Tooltip)

2. CSS3 Counters

counters  这不是一个非常为人熟知的属性,大多数人甚至可能认为浏览器不能很好的支持这个属性,但事实上所有的浏览器都支持这个属性:

这里插一段代码

<input type="checkbox" /><lable>里面是内容</label>

这里我们需要的是类似于 input的选中功能啊 上传啊 等等。但是我们不喜欢他们的样式 需要自己写样式

此时我们可以使用position: absolute; left: -9999px;脱离文档流 让它不占据空间也不显示出来 在label上面写自己想要的效果和样式。
 

 3. 通过clac() 来创建更好的网格

使用flex布局

暂时待定

 4. 通过clac() 对其 position: fixed 元素

calc() 的另一个作用是用来对其position:fixed的元素 比如你有一个内容封装器。 左右都有流动的间距 你希望在这个内容封装器内精准对其position:fixed的元素。但是这种情况要计算left和right属性的具体赋值就很难。通过calc() 可以精准定位。

.wrapper{


max-width: 1000px;


margin: 0 auto;

}

.float-bubble{


positon: fixed; right: calc(50% -500px);

}

    CSS3 函数技巧 用css 实现js实现的事情(clac Counters  Tooltip)

CSS3 函数技巧 用css 实现js实现的事情(clac Counters  Tooltip)

Clac(): calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

好了以上就是小编为大家整理的全部内容啦,希望对大家的学习有所帮助~~~

HTML / CSS 相关文章推荐
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 #HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 #HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 #HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 #HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 #HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 #HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 #HTML / CSS
You might like
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php自定义错误处理用法实例
2015/03/20 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
javascript cookies操作集合
2010/04/12 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python模块的制作方法实例分析
2019/12/21 Python
Pytorch之finetune使用详解
2020/01/18 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
外企测试工程师面试题
2015/02/01 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
租房协议书
2014/04/10 职场文书
大学生学年个人总结
2015/02/15 职场文书
大二学年个人总结
2015/03/03 职场文书
入党群众意见范文
2015/06/02 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
Python3 如何开启自带http服务
2021/05/18 Python