文档章节

CSS填坑代码大全

ITer在路上
 ITer在路上
发布于 2015/10/08 16:28
字数 328
阅读 104
收藏 13

1. 文字溢出省略号显示

white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

2. 文字换行

/*强制不换行*/
white-space:nowrap;
/*自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制英文单词断行*/
word-break:break-all;

3. 画三角形

width: 0; 
height: 0; 
border-style: solid; 
border-width: 0 100px 100px 100px; 
border-color: transparent transparent #f00 transparent;

4. 强制出现滚动条

html{  height: 101%;}

5. 清除浮动

.clearfix{*zoom: 1;}
.clearfix{overflow:hidden;_zoom:1;}
.clearfix:after{clear:both;display:table;content:"”;}

6. 给div实现透明效果,支持ie7+

opacity: 0.5; 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

7.去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

input,button,select,textarea{ outline:none;}
textarea{ resize:none;}

8.去掉chrome记住密码后自动填充表单的黄色背景

input : -webkit-autofill {
    background-color : #FAFFBD ;
    background-image : none ;
    color : #000 ;
}

9.min-height: 最小高度兼容代码

min-height:500px;height:auto !important;height:500px;overflow:visible;

10.placeholder占位符颜色自定义

input:-moz-placeholder { color: #369; }

::-webkit-input-placeholder { color:#369; }

11.焦点去除背景

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-tap-highlight-color: transparent;  
// i.e. Nexus5/Chrome and Kindle Fire HD 7

12.手机版本网页a标记虚线框问题

a:focus { outline:none; -moz-outline:none; }

13.输入框聚焦发光效果

input[type=text],
textarea{
     -webkit-transition: all 0.30s ease-in-out;
     -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
     -o-transition: all 0.30s ease-in-out;
     outline: none;
     border: 1px solid #ddd;
}

input[type=text]:focus, 
textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

© 著作权归作者所有

ITer在路上
粉丝 1
博文 40
码字总数 13808
作品 0
深圳
程序员
私信 提问
喷下干货。。。

看了一个所谓很有干货的文章。想起内涵和外延的定理。内涵越多的,外延越少,反之亦然。也就是所谓,内涵越多的货,越干。干到最后,就是个石头。喜欢干货的,无非身上带的石头少,遇到问题,...

中山野鬼
2013/10/15
925
10
webpack4配置详解之常用插件分享

前言(https://blog.csdn.net/weixin_43254766/article/details/83267838)   继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件、也会包含一些自己了解过觉得不错...

苏南-首席填坑官
2018/11/19
466
1
Next.js 踩坑入门系列(四)— 中期填坑

Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) 引入状态管理Redux 陆续更新... 填坑 第一坑 - params形式路由 上一篇在...

luffyZhou
2018/09/06
0
0
从无到用写个股票分析APP(一)

前言:再给自己挖个坑吧。 我想写个什么东西呢? 一:可以浏览当下相关资讯,以及大盘指数实时更新。 二:添加自选股票,可以查看该股票的走势图,相关资讯以及基本数据。 三:通过 server 端...

youerning
2018/06/28
0
0
webpack4配置详解之逐行逐句分析

前言(https://blog.csdn.net/weixin_43254766/article/details/83267838)   经常会有群友问起、、、甚至配置等等方面的问题,有些是我也不懂的,慢慢从大家的相互交流中,也学到了不少。 ...

苏南-首席填坑官
2018/11/12
235
1

没有更多内容

加载失败,请刷新页面

加载更多

SIPC的保全存证变现应用才是先见之明

Facebook发起的Libra在接连退群后终于在联盟链上线前官宣成立联盟,同时Telegram公链TON在主网上线前被美国SEC要求退回私募非法所得。两个都拥有活跃用户数上亿的社交平台,一个以1000万美元...

SimpleChain
31分钟前
3
0
Node_初步了解(3)回调,作用域,上下文

本文转载于:专业的前端网站➧Node_初步了解(3)回调,作用域,上下文 1. 1 //回调:回调是异步编程最基本的方法,node.js需要按顺序执行异步逻辑的时候,一般采用后续传递的方式,将后续逻辑...

前端老手
31分钟前
3
0
好程序员Java教程分享Java的五大特点

好程序员Java教程为大家分享Java的五大特点希望对初学者有所帮助。 一、Java的(五大)特点: 1.简单性 相对于c语言来说 c语言的核心 指针(保存地址)*p Java中没有指针的概念(使用的是引用概念...

好程序员官网
33分钟前
3
0
移动端rem适配各种屏幕字体

在页面中引入这个js文件,可以实现各个屏幕的字体自适应: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : ......

流年那么伤
35分钟前
4
0
2019我最喜爱的绿色应用活动投票开始,谁能突出重围?

在去年第一届软件绿色联盟开发者大会上,共有36个绿色应用荣获“2018年度我最喜爱的绿色应用”奖项。活动得到了消费者、开发者与应用厂商的一致好评,刚过完十一假期就有小伙伴们后台留言,问...

软件绿色联盟
45分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部