css小技巧,会不断更新的
1、去除input记住密码后自动填充表单的黄色背景
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
//其中#fff是背景颜色值
2、IE8不支持opacity:0属性,可以加上下面属性:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
3、IE input 框去掉文本框的叉叉和密码输入框的眼睛图标:
::-ms-clear,::-ms-reveal{display:none;}
4、textarea属性
resize:none; //去除大小拖动
outline:none; //去除黄色边框
5、判断是否满足正则表达式要正确书写方式
正则.test(要满足的那个val值)
6、单行文本省略
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
7、当样式表里font-size 小于 12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用:
html{-webkit-text-size-adjust:none;}
8、解决xmp标签不自动换行:
xmp {
whitewhite-space: pre-wrap; /* css-3 */
whitewhite-space: -moz-pre-wrap; /* Mozilla, since 1999 */
whitewhite-space: -pre-wrap; /* Opera 4-6 */
whitewhite-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: pre-wrap; /* Firefox */
}
9、object高度为0不生效的解决方法
在其外层添加一个div,让这个div的高度为0,或者font-size为0
<div style="height:0">
<object object width="0" height="0" ></object>
</div>
10、input框
消除input的记忆功能:在input框里面加:autocomplete="off"
input里面的内容防止复制:oncopy="return false;" oncut="return false;"
input里面的内容取消粘贴:onpaste="return false"
input里面的内容取消选取、防止复制 :<body onselectstart="return false">
11、全屏遮罩代码段(fixed是相对视窗)
<div class="mask"></div>
.mask{position: fixed;top:;left:;width: 100%;height: 100%;z-index:;}
12、display: none与visibility:hidden的区别:
display: none; 不显示,不占据空间
visibility: hidden; 不显示,占据空间
13、当图片和背景之间有空隙的解决方法
在图片上给它display:block
案例:
.search_main{
position:absolute;
width:100%;
height:100%;
z-index:-1;
background-size:cover;
min-height:900px;
left:0px;
}
.search_main img{
width: 100%;
height: 100%;
display: block;
}
css小技巧,会不断更新的的更多相关文章
- CSS 小技巧(不定时更新)
1.Web 文本中的省略号 在Web开发中,对于一种情况很常见.那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题.在今天HTML的标准中并没有相关 ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
- 常用的CSS小技巧
实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...
- CSS 小技巧 | 一行代码实现头像与国旗的融合
到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...
- iOS:小技巧(不断更新)
记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...
- 前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...
- erlang的一些小技巧(不定期更新)
在任意节点热更新代码 rpc:call(Node,c,l,[Mod]) c和l的指的是code,library Erlang Shell隐藏的小技巧 f(). %%把所有绑定变量释放掉 f(Val). ...
- [原创][FPGA]Quartus实用小技巧(长期更新)
0. 简介 在使用Quartus软件时,经常会时不时的发现一些小技巧,本文的目的是总结所查阅或者发现到的小技巧,本文长期更新. 1. Quartus中的模板功能 最近在Quartus II的菜单里找到 ...
- 模仿也是提高,纯css小技巧实现头部进度条
刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...
随机推荐
- Linux的学习--使用PuTTY
交代一下背景,在笔记本上装虚拟机,在虚拟机里装了Ubuntu系统,但用着一直感觉很卡.刚好同学有旧的不用的笔记本,就拿来装了一个Ubuntu. 想要从我的笔记本上控制Ubuntu系统,于是就找到了pu ...
- 在office2010的ppt中加入音乐
Microsoft office Powerpoint,是微软公司设计的演示文稿软件.用户不仅可以在投影仪或者计算机上进行演示,也可以将演示文稿打印出来,制作成胶片,以便应用到更广泛的领域中.利用Mi ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- CentOS7 Tomcat安装
CentOS7 Tomcat安装 CentOS7 Tomcat安装 Download 从Tomcat下载apache-tomcat-8.0.18.tar.gz Install 安装 上传RPM文件到/ ...
- golang中的race检测
golang中的race检测 由于golang中的go是非常方便的,加上函数又非常容易隐藏go. 所以很多时候,当我们写出一个程序的时候,我们并不知道这个程序在并发情况下会不会出现什么问题. 所以在本 ...
- MVC之前的那点事儿系列(6):动态注册HttpModule
文章内容 通过前面的章节,我们知道HttpApplication在初始化的时候会初始化所有配置文件里注册的HttpModules,那么有一个疑问,能否初始化之前动态加载HttpModule,而不是只从 ...
- Socket.Available 属性
获取已经从网络接收且可供读取的数据量. 命名空间: System.Net.Sockets程序集: System(System.dll 中) 从网络接收的.可供读取的数据的字节数. 异常 Ex ...
- Spring @Transactional propagation 各个属性值的含义
REQUIRED:业务方法需要在一个容器里运行.如果方法运行时,已经处在一个事务中,那么加入到这个事务,否则自己新建一个新的事务. NOT_SUPPORTED:声明方法不需要事务.如果方法没有关联到一 ...
- WinPhone学习笔记(三)——WinPhone的动画
这段时间又一直赶任务,结果没有去学习,也没有去写博文,这个动画的内容很早就学了,但是一直没把它整理成博文,现在终于有空就弄一下. 开始先讲讲在WinPhone中做动画有两种动画类型,一种是基于帧动画另 ...
- Bootstrap学习笔记系列5------Bootstrap图片显示
通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来 ...