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 ...
随机推荐
- [转帖] iptables之四表五链
iptables之四表五链 http://www.cnblogs.com/clouders/p/6544584.html mark 学习一下 对防火墙一无所知.. iptables可谓是SA的看家本领 ...
- 使用 SSH 秘钥远程连接
团队开发中常用到 Git.SVN 等版本控制工具,可以大大提高开发效率. 就是将代码统一放到一个代码仓库中,方便管理. 为了安全起见,每次push.pull 代码的时候,都需要输入用户名.密码, 对于 ...
- 微信内置浏览器在使用video标签时（安卓）默认全屏的原因及解决办法
根据X5论坛得到的答案是:设计如此. 腾讯真是越来越嚣张了,一家独大后用户体验都不注重了(不给程序员留活路). 听说有个申请加入vdeo白名单的,域名验证后就可以解决默认全屏(反正我是没见过申请入口, ...
- pandas缺失值处理
1.检查缺失值 为了更容易地检测缺失值(以及跨越不同的数组dtype),Pandas提供了isnull()和notnull()函数,它们也是Series和DataFrame对象的方法 - 示例1 im ...
- pandas取值
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/24 15:03 # @Author : zhang chao # @Fi ...
- mysql的主主复制详解
Mysql双主部署 解释: 所谓双主备份,其实也就是互做主从复制,每台master既是master,又是另一台服务器的slave.这样,任何一方所做的变更,都会通过复制应用到另外一方的数据库中. 要求 ...
- caffe实现多任务学习
Github: https://github.com/Haiyang21/Caffe_MultiLabel_Classification Blogs 1. 采用多label的lmdb+Slice L ...
- hdu6165（拓扑排序+tarjan缩点）
题意:就任意两个点能否到达: 解题思路:首先将图简化,比如假设图里有一个环,那么,这环内两个点肯定是能相互到达的,那么就不用考虑这环内的点了,很简单就想到用tarjan算法将环缩成一个点,然后就是判断 ...
- Linux 4.21包含对AMD Rome处理器中新的Zen 2架构重要的新优化
导读 Phoronix的Linux爱好者报告说,Linux 4.21里包含对AMD Rome处理器中新的Zen 2架构重要的新优化.AMD新推出的7nm EPYC Rome芯片带来了一种全新的独特架构 ...
- Enum 扩展
项目中,用到枚举值,并且增加中英文描述. 一般的[Description]属性,无法满足中英文,所以进行了简单扩展. 继承DescriptionAttribute,增加了英文描述description ...