css常用技巧集合
1 不想让按钮touch时有蓝色的边框或半透明灰色遮罩(根据系统而定)
/*解决方式一*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符
/*解决方式二 html中加上*/
<meta name="msapplication-tap-highlight" content="no">
2 清除img标签图片下方出现的几像素空白间隙,产生原因是img的vertical-align属性默认为baseline(元素放置在父元素的基线上)
/*解决方式一*/
img{
vertical-align: top;
}
/*解决方式二*/
img{
display: block;
}
3 单行文本溢出则显示省略号
/*文本id为txt,块级,有宽度*/
#txt{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
4 多行文本溢出显示省略号,仅能在webkit内核的浏览器中使用,如果想普遍适用,就可以通过js获取容器高度,超出就删除文本,最后替换成...
/* 方式一
* 需定义好容器高度
*/
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/*第几行显示省略号*/
overflow: hidden;
}
js多行文本溢出显示省略号,文本在类main的p标签中,贴出body里面的代码
/* 方式二 jQuery
*/
/*html部分*/
<div class="main">
<p>测试测试测试测试测试测试测试测试测试测试测试测试</p>
</div>
/*css部分*/
.main{
margin: 100px;
width: 100px;
height: 4em;
border: 1px solid #000;
text-align: center;
}
/*JQuery部分*/
(function(){
var divH = $('.main').height();
var $p = $("p", $(".main")).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
})();
5 清除浮动
.clearfix {
clear: both;
*zoom: 1;
}
.clearfix:after {
display: block;
overflow: hidden;
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
content: ".";
}
6 模糊文本
color: transparent; text-shadow: 0 0 2px rgba(0,0,0,0.8);
css常用技巧集合的更多相关文章
- PyCharm常用技巧集合
PyCharm常用技巧集合 一.添加或者修改文件模板 File>settings>Editor>File and Code Templates>Python Script 你可 ...
- HTML、CSS常用技巧
一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...
- CSS 常用技巧
概述 相信大家在写css属性的时候,会遇到一些问题,比如说:垂直对齐,垂直居中,背景渐变动画,表格宽度自适应,模糊文本,样式重置,清除浮动,通用媒体查询,自定义选择文本,强制出现滚动条,固定头部和页脚 ...
- api日常总结:前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
- CSS拾遗+技巧集合
1.实现尖角符号. 这是内联inline-block标签独有的特性. <!DOCTYPE html> <html lang="en"> <head&g ...
- css常用技巧:input提示文字;placeholder字体修改
1 很多网站都需要更改 <input>内部的placeholder 文字颜色属性:下面来介绍下这个技巧. 2 源代码: <!DOCTYPE html><html> ...
- css常用技巧1
css绘制三角形 <style> .triangle-box{ margin: 50px auto; height: 300px; width: 500px; box-shadow: 1p ...
- css常用技巧
去点号 list-style:none; 字体居中 text-align:center; 链接去下划线 text-decoration:none; 鼠标禁止右键 <body oncontextm ...
- CSS常用Hack集合(adding)
1> IE9 and IE10 @media screen and (min-width: 0\0) { .p-form input.p-value[type="checkbox&qu ...
随机推荐
- Android网络开发实例(基于抓包实现的网络模拟登录,登出和强制登出)
学习Android有几个月了,最近喜欢上了网络编程,于是想通过Android写一些一个小程序用于连接外网.在这里非常感谢雪夜圣诞的支持,非常感谢,给我打开新的一扇门. 1.声明,本程序只能用于西南大学 ...
- 五金配件行业ERP解决方案
五金行业信息化需求分析 “国内竞争国际化,国际竞争国内化”将是近几年我国五金行业发展的特点,中国作为全球五金制造中心的地位将进一步稳固.随着中国融入全球经济环境进程的加快以及经济实力的快速崛起,中国已 ...
- NAT穿透进行P2P文件传输
实现一个简单的p2p文件传输,主要解决NAT穿透问题,使用tcp协议传输. NAT背景介绍 简介 NAT(Network Address Translation ,网络地址转换) 是一种广泛应用的解决 ...
- 清空file文件域的方法
我们在实际应用中经常希望能把文件域给清空,比如使用change事件时,因为不清空再次选择同一文件时将不在触发change事件. 但是在IE中,由于安全设置的原因,是不允许更改文件域的值的,也就是不能使 ...
- mysql数据库开始——增删改
注释语法:#注释语 一.T-SQL语句注意:1.语句写完后用“分号:”代表这一句结束2.列结束用逗号,最后一列写完不用写逗号3.符号一定是英文的 关键字:主键:primary key外键:foreig ...
- STC-单片机控制系统
电源测量命令 60V开 FD02060001010100000060V关 FD02060002010100000060V保开 60V保关 -8KV开 -8KV关 FD02092802010201000 ...
- 本地存储和cookies之间的区别
- Django REST framework使用ViewSets的自定义路由实现过程
在Django中使用基于类的视图(ClassView),类中所定义的方法名称与Http的请求方法相对应,才能基于路由将请求分发(dispatch)到ClassView中的方法进行处理,而Django ...
- 使用slice和concat对数组的深拷贝和浅拷贝
一.数组浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份. 如下代码,如果只是简单才用赋值的方法,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问 ...
- 【iOS】7.4 定位服务->2.1.4 定位 - 官方框架CoreLocation 案例:指南针效果
本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...