1. 纯 CSS 的 tooltips

现在的要求是使用纯css在页面上显示一个title,或者图片的描述文字(在鼠标移入图片之后):

content,attr()

content一般与::before,::aftere伪类使用,表示一个元素的前,后

arrt();一般用于获取一个元素的属性。

<a class="caption" href="#" data-title="pic name" data-content="this is a pic"><!---data-content是自定义的属性--->
<img alt="img alert">
</a>
<style>
.caption:hover::after{
content:attr(data-title) ;
}
</style>

感觉还是很low.....

那么我们可以使用hint.css库文件https://github.com/chinchang/hint.css

一个很好的例子https://codepen.io/SitePoint/pen/akAmPw

既然说到了content,那么他可以实现计数器的功能:http://codepen.io/lonekorean/pen/wKbzv

2) cubic-bezier() 动画

https://yisibl.github.io/cubic-bezier/#.17,.67,.04,.91

要想网站或 app 的 UI 更加引人注目的话,可以使用动画。但是标准的 easing 选项非常有限,比如“linear”或是“ease-in-out”。像是弹跳动画更是标准选项无法实现的。使用 cubic-bezier() 函数,就可以让元素按你想要的方式去动画。

3) CSS calc() 对齐 position:fixed 元素

比如三局平均分布的布局,中间间距为5像素。

*{margin: 0; padding: 0;}

.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}

.col-3:nth-child(3){margin-right: 0;} </style>

浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com

总结css的使用技巧的更多相关文章

  1. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  2. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  3. 第八十四节,css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  4. 《CSS动画实用技巧》课程笔记

    概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...

  5. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  6. 10个CSS简写/优化技巧-摘自网友

    10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...

  7. Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧

    <!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...

  8. CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  9. DIV+CSS一些小小的技巧

    DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...

  10. DIV+css排版问题技巧总结---v客学院技术分享

                DIV+css排版问题技巧总结 一.排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...

随机推荐

  1. yum search 不好用时

    用  yum provides */  eg :yum provides */pstack

  2. 火影忍者之~鸣人 (字符串处理,strcmp)

    火影忍者的男主角漩涡鸣人,因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在,火影是动漫火影忍者中主人公鸣人所在的国家的最强忍者的头衔 ...

  3. java.util.Collection List与其子类 Set与其子类

    package com.Collection; import java.util.ArrayList; import java.util.Collection; import java.util.It ...

  4. windows的虚拟磁盘(vhd,vhdx)使用

    以前一直使用u盘或者移动硬盘接上usb直接拷贝文件,发觉速度一般.而且一般只有一个盘,分类也很不方便. 后来发现windows的虚拟磁盘可以解决我的问题... 经过一段时间的使用后发觉使用虚拟磁盘的方 ...

  5. Spring报错:java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be opened because it does not exist

    感谢:http://blog.chinaunix.net/uid-20681545-id-184633.html提供的解决方案,非常棒 ! 问题说明: 新建一个Spring项目,新建一个Bean类:H ...

  6. easychm生成帮助文件时出现的目录导航乱码问题

    将html生成帮助文件时出现乱码问题的主要原因是:文件编译格式的问题 (一般的网页都是utf-8格式的,将其改为GB2312就可以了):

  7. ES6-块级作用域绑定-let和const

    一.var声明及变量提升机制 var声明,无论实际上在哪里声明,都会被当做在当前作用域顶部声明的变量,这就是变量提升机制. 二.块级声明 块级声明用于声明在指定块的作用域之外无法访问的变量.块级作用域 ...

  8. Android深入理解JNI(二)类型转换、方法签名和JNIEnv

    相关文章 Android深入理解JNI系列 前言 上一篇文章介绍了JNI的基本原理和注册,这一篇接着带领大家来学习JNI的数据类型转换.方法签名和JNIEnv. 1.数据类型的转换 首先给出上一篇文章 ...

  9. java入门学习(6)—封装,继承,多态,this,super,初始代码块

    1.[封装]:将对象的状态信息隐藏,不允许直接访问,而是通过该类提供的的方法阿里实现内部信息的访问和操作. 使用到的修饰符:private,不用修饰符(default),protected,publi ...

  10. 更换pip源,解决pip install安装包慢的问题

    而pip是很强大的Python包安装工具,但是由于国外官方pypi经常被墙,导致不可用,所以最好是将使用的pip源更换一下,这样就能解决被墙导致的装不上库的问题.网上有很多可用的源,例如豆瓣:http ...