css/css3常用收集/笔记
-webkit-box-shadow:0px 3px 3px #c8c8c8 inset;
-moz-box-shadow:0px 3px 3px #c8c8c8 inset;
box-shadow:0px 3px 3px #c8c8c8 inset
文字阴影： text-shadow:1px 1px 1px #000;
文字白边： text-shadow: 0 1px 1px #fff;
white-space:pre-line （http://www.cnblogs.com/qianlegeqian/p/3987235.html）
display: flex;
justify-content: space-between;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
li:nth-child(odd)
li:nth-child(even)
或者：
li:nth-child(2n)
li:nth-child(2n+)
li:not(:nth-last-child(1)):not(:nth-last-child(2)) /*非最后2个*/
ul {
display: flex;
}
ul li {
flex: 1;
text-align:center;
}
// flex 九宫格
// 网格布局，平分3列，间隔左右10 上下15
ul {padding: 0 10px 10px; display: grid;
>li {
grid-template-columns: repeat(3, 1fr); // 如果用33.3333会不准确
grid-gap: 10px;}}
________________________________________________ CSS 背景 移步到：https://blog.csdn.net/ssisse/article/details/51533943
________________________________________________ display:flex 移步到：https://blog.csdn.net/qq_35480270/article/details/79282947 http://www.cnblogs.com/lpy001/p/6062466.html
<div class='grid'>
<a>grid01</a>
</div> .grid {
margin: 50px auto;
height: 300px;
width: 300px;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
box-sizing: border-box;
> a {
margin-top: -4px;
margin-left: -4px;
box-sizing: border-box;
line-height: 100px;
text-align: center;
border: 4px solid #ccc;
}
}
—————————————————————————————————— 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
table{
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.FM_customer_slideUp2 .cz_button ul{display:-webkit-box;display:-moz-box;display:box;}
.test {display:-webkit-flex;display:flex;}
.test li{-webkit-flex:1;flex:1;}
.test li:nth-child(1){background:#999;}
.test li:nth-child(2){background:#aaa;}
.test li:nth-child(3){background:#ccc;}
.test li:nth-child(4){background:#999;}
</style>
<ul class="test">
<li>写邮件</li>
<li>新增客户</li>
<li>新建商品</li>
<li>扫描名片</li>
</ul>
________________________________________________________________ 经过， 渐变色
________________________________________________________________
一直写html4后来想试一下html5，然后发现IE9以下的浏览器不兼容html5标签，再网站搜索了一些解决办法，但是都会出现这样或那样的问题，比如说
<!--[if lt IE9]>
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
在ie8以下的浏览器中就会将<!--[if lt IE9]><![endif]-->这对标签给输出出来，
在此想问一下大家有没有什么更好的解决办？
background: url('__TMPL__Public/assets/images/demo/banner.jpg') center fixed no-repeat;
height:888px;
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
document.body.scrollTop = document.body.scrollHeight;
}, 50);
setTimeout(() => {
clearInterval(setinterval);
}, 2000);
【群主】张 2017/12/19 14:23:33
输入框获取焦点时执行这个方法
function arrTest(arr,key){
var obj = {};
for(var i=0;i<arr.length;i++){
if(obj[arr[i][key]]){
return false;
}else{
obj[arr[i][key]] = arr[i];
}
return obj;
}
}
var a = [
{ des: "qwe", b: "reg" },
{ des: "vfg", b: "fgdfd" },
{ des: "qwe", b: "fdfd" }
];
arrTest(a,"des")
css/css3常用收集/笔记的更多相关文章
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- CSS/CSS3常用的样式兼容，样式总结
这篇文章这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用.包括了‘单行缩略号‘.’css圆角兼容'.‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘cs ...
- CSS/CSS3常用的样式
强制文本显示 让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下 单行显示语法:white-space:nowrap; div{ white-space:nowrap; ...
- amazeui学习笔记--css（常用组件15）--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- [总结]WEB前端开发常用的CSS/CSS3知识点
css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...
- amazeui学习笔记--css（常用组件16）--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
随机推荐
- [cnbeta]iPhone 2018年全球出货2.25亿部：中国区下滑两成
iPhone 2018年全球出货2.25亿部:中国区下滑两成 2019年01月22日 20:12 501 次阅读 稿源:快科技 0 条评论 https://www.cnbeta.com/artic ...
- 影响MapReduce性能的几个因素
Hadoop MapReduce性能优化影响MapReduce输入数据处理时间的因素很多.其中之一是实现map和reduce函数时使用的算法.其他外部因素也可能影响MapReduce性能.根据我们的经 ...
- 如何取消浏览器护眼色 Lodop打印图片有窗口颜色的边框
Lodop打印图片出现了边框,然而通常情况下是没有边框的,由于Lodop是基于本机的ie进行解析的,和IE的设置有关.用户的电脑和习惯千差万别,有人喜欢给浏览器加上护眼色,而这一个行为可能导致Lodo ...
- 03 基于umi搭建React快速开发框架(封装列表增删改查)
前言 大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢. 这样我们就可以有更多的时间学习一些新的东西.我们这套框 ...
- Rob Pike 编程五原则
Rob Pike's 5 Rules of Programming Rule 1: You can't tell where a program is going to spend its time. ...
- 自学Linux Shell8.2-linux逻辑卷LVM管理
点击返回 自学Linux命令行与Shell脚本之路 8.2-linux逻辑卷LVM管理 Linux逻辑卷管理器软件包用来通过将另外一个硬盘上的分区加入已有文件系统,动态地添加存储空间. 1. 逻辑卷L ...
- 自学Python5.2-类和对象概念
自学Python之路 自学Python5.2-类和对象概念 面向对象编程的2个非常重要的概念:类和对象 对象是面向对象编程的核心: 在使用对象的过程中,为了将具有共同特征和行为的一组对象抽象定义,提出 ...
- android 让真机显示 DeBug Log调试信息
真机默认是不开启Log 开关的,这么来说我们如果使用真机来搞程序测试的话,需要做以下几个步骤: 下面以华为手机为例开启手机的log功能: 1.在拨号界面输入:*#*#2846579#*#* 进入测 ...
- [hgoi#2019/2/18]比较水
T1--调换纸牌(card) Alex有 n张纸牌,每张纸牌上都有一个值ai,Alex把这些纸牌排成一排,希望将纸牌按值从小到大的顺序排好.现在他把这个任务交给你,你只能进行一种操作:选中一张牌,然后 ...
- 配置远程jupyter notebook
在远程服务器上启动jupyter notebook,然后在本地进行访问.本文使用最简单的一种方法,无需设置密码,所以这种方法也是最不安全的方法,慎用. 1. 在远程服务器上生成jupyter note ...