总结css的使用技巧
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的使用技巧的更多相关文章
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 第八十四节,css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- 《CSS动画实用技巧》课程笔记
概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- 10个CSS简写/优化技巧-摘自网友
10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...
- Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧
<!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...
- CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- DIV+CSS一些小小的技巧
DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...
- DIV+css排版问题技巧总结---v客学院技术分享
DIV+css排版问题技巧总结 一.排版思路 1.从上到下,从左到右,从大到小. 2.首先确定排版分区,排除色块分布,然后再从简单的部分开始. 3.在某一块内将HTML部分写好 ...
随机推荐
- yum search 不好用时
用 yum provides */ eg :yum provides */pstack
- 火影忍者之~鸣人 (字符串处理,strcmp)
火影忍者的男主角漩涡鸣人,因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在,火影是动漫火影忍者中主人公鸣人所在的国家的最强忍者的头衔 ...
- java.util.Collection List与其子类 Set与其子类
package com.Collection; import java.util.ArrayList; import java.util.Collection; import java.util.It ...
- windows的虚拟磁盘(vhd,vhdx)使用
以前一直使用u盘或者移动硬盘接上usb直接拷贝文件,发觉速度一般.而且一般只有一个盘,分类也很不方便. 后来发现windows的虚拟磁盘可以解决我的问题... 经过一段时间的使用后发觉使用虚拟磁盘的方 ...
- 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 ...
- easychm生成帮助文件时出现的目录导航乱码问题
将html生成帮助文件时出现乱码问题的主要原因是:文件编译格式的问题 (一般的网页都是utf-8格式的,将其改为GB2312就可以了):
- ES6-块级作用域绑定-let和const
一.var声明及变量提升机制 var声明,无论实际上在哪里声明,都会被当做在当前作用域顶部声明的变量,这就是变量提升机制. 二.块级声明 块级声明用于声明在指定块的作用域之外无法访问的变量.块级作用域 ...
- Android深入理解JNI(二)类型转换、方法签名和JNIEnv
相关文章 Android深入理解JNI系列 前言 上一篇文章介绍了JNI的基本原理和注册,这一篇接着带领大家来学习JNI的数据类型转换.方法签名和JNIEnv. 1.数据类型的转换 首先给出上一篇文章 ...
- java入门学习(6)—封装,继承,多态,this,super,初始代码块
1.[封装]:将对象的状态信息隐藏,不允许直接访问,而是通过该类提供的的方法阿里实现内部信息的访问和操作. 使用到的修饰符:private,不用修饰符(default),protected,publi ...
- 更换pip源,解决pip install安装包慢的问题
而pip是很强大的Python包安装工具,但是由于国外官方pypi经常被墙,导致不可用,所以最好是将使用的pip源更换一下,这样就能解决被墙导致的装不上库的问题.网上有很多可用的源,例如豆瓣:http ...