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 ...
随机推荐
- SQL Data Compare 对比 SQLserver数据
1. 下载redgate的工具 https://www.red-gate.com/dynamic/products/sql-development/sql-compare/download 2. 输入 ...
- jquery中append、prepend, before和after方法的区别
1.prepend() .append()方法在被选元素的开头/结尾插入文本/HTML: 2.before().after()方法在被选元素之前/之后插入内容: append() & prep ...
- html 類 class
為html元素設置類,相同的類使用相同的樣式.一般元素都能使用,可以在<div>和<span>中使用,同一個class可以被個<div>或<span>使 ...
- selenium之测试角色管理页面举例
# 测试角色权限管理页面功能 # author:xr # date:2017-07-20 from selenium import webdriver from login_page import L ...
- linux 环境下 firefox乱码问题解决
https://blog.csdn.net/wlwlwlwl015/article/details/51482065
- poj 2114 Boatherds （树分治）
链接:http://poj.org/problem?id=2114 题意: 求树上距离为k的点对数量: 思路: 点分治.. 实现代码: #include<iostream> #includ ...
- Nginx多进程高并发、低时延、高可靠机制在缓存(redis、memcache)twemproxy代理中的应用
1. 开发背景 现有开源缓存代理中间件有twemproxy.codis等,其中twemproxy为单进程单线程模型,只支持memcache单机版和redis单机版,都不支持集群版功能. 由于twemp ...
- 13 Zabbix Item类型之Zabbix ODBC类型
点击返回:自学Zabbix之路 13 Zabbix Item类型之Zabbix ODBC类型 ODBC是C语言开发的.用于访问数据库的中间件接口 . zabbix支持查询任何ODBC支持的数据库.za ...
- 自学Linux Shell11.6-退出shell
点击返回 自学Linux命令行与Shell脚本之路 11.6-退出shell shell运行的每一个命令都是使用 退出状态码 告诉shell它已经运行完毕.退出状态码是一个0~255的整数值,在命令结 ...
- Spring MVC 起步
跟踪Spring MVC的请求 在请求离开浏览器时①,会带有用户所请求内容的信息,至少会包含请求的URL. 请求旅程的第一站是Spring的DispatcherServlet.与大多数基于Java的W ...