_______________________________________________________________  css3 瀑布流 N 列
<ul><li>aaa</li><li>aaa</li></ul>
ul{-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;}
ul li {

-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;}
/*--------------------------------------   input框必填星号*垂直居中设置  -----------------------*/
<font color="red" style="position:relative; top:2px;">*</font>;&nbsp;功能名称
 /*--------------------------------------   字号小于12px  -----------------------*/
font-size:10px;-webkit-transform:scale(0.8);  *此时属性为 block / inline-block;
/*--------------------------------------- 阴影 x-offset x轴偏移y   blur 模糊值 color of shadow 阴影颜色 */
边框阴影：  -webkit-box-shadow: 1px 1px 3px #ccc;  -moz-box-shadow: 1px 1px 3px #ccc;  box-shadow: 1px 1px 3px #ccc;
边框下阴影：
-webkit-box-shadow: 0 5px 5px 0 rgba(50,50,50,0.1);
-moz-box-shadow: 0 5px 5px 0 rgba(50,50,50,0.1);
box-shadow: 0 5px 5px 0 rgba(50,50,50,0.1); 
右下阴影：box-shadow:2px 2px 5px #222;  //   box-shadow:1px 2px 7px #777;
边框发光：-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .3); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .3); box-shadow: 0 0 6px rgba(0, 0, 0, .3);  
 边框内阴影（单边）

  1. -webkit-box-shadow:0px 3px 3px #c8c8c8 inset;
  2. -moz-box-shadow:0px 3px 3px #c8c8c8 inset;
  3. box-shadow:0px 3px 3px #c8c8c8 inset

文字阴影：  text-shadow:1px 1px 1px #000;

背景渐变：  background: -webkit-linear-gradient(#75828b,#5f6770);
放射渐变：  background:-webkit-gradient(radial,25 25,0,25 25,25,from(#fff),to(#ccc));
  1. 文字白边： text-shadow: 0 1px 1px #fff;
滤镜(兼容IE)：      filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;
滤镜CSS3            border:1px solid rgba(0,0,0,0.1); background:rgba(0, 0, 0, 0.8);
/*-------------------------------------- 文本域里的换行，展示时，显示出来  */
_______________________________________________________________  H5 两端对齐
详解flex: https://www.runoob.com/w3cnote/flex-grammar.html

  1.  
  2.              display: flex;           
  3.              justify-content: space-between;
_______________________________________________________________ 保持一行，超出省略
width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
/*-- 多行省略*/
  1. display: -webkit-box;
  2. -webkit-box-orient: vertical;
  3. -webkit-line-clamp: 3;
  4. overflow: hidden;
_______________________________________________________________ 奇数，偶数 
  1. li:nth-child(odd)
  2. li:nth-child(even)
  3. 或者：
  4. li:nth-child(2n)
  5. li:nth-child(2n+)
    li:not(:nth-last-child(1)):not(:nth-last-child(2)) /*非最后2个*/
________________________________________________________________  H5 平均分，并居中

ul {
display: flex;
}
ul li {
flex: 1;
text-align:center;
}

// flex 九宫格

>ul{    background: #fff;
    display: flex;
    flex-direction: row; /**布局内item 方向*/
    flex-wrap: wrap; /**不够了就换行*/
    justify-content: space-between; /**主轴两边对其*/
    > li {
      display: flex;
      width: 33.33333%;
      height: 90px;
      justify-content: center;
      align-items: center;
      &:nth-child(3n) >a {
        border-right: none;
      }
      >a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
  1. // 网格布局，平分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

_______________________________________________________________ grid
  1. <div class='grid'>
  2.       <a>grid01</a>
  3.     </div>
  4.  
  5. .grid {
  6.   margin: 50px auto;
  7.   height: 300px;
  8.   width: 300px;
  9.   display: grid;
  10.   grid-template-rows: 100px 100px 100px;
  11.   grid-template-columns: 100px 100px 100px;
  12.   box-sizing: border-box;
  13.   > a {
  14.     margin-top: -4px;
  15.     margin-left: -4px;
  16.     box-sizing: border-box;
  17.     line-height: 100px;
  18.     text-align: center;
  19.     border: 4px solid #ccc;
  20.   }
  21. }

——————————————————————————————————  解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

  1. table{
  2.     table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
  3. }
  4. td{
  5.     width:%;
  6.     word-break:keep-all;/* 不换行 */
  7.     white-space:nowrap;/* 不换行 */
  8.     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
  9.     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  10. }

.FM_customer_slideUp2 .cz_button ul{display:-webkit-box;display:-moz-box;display:box;}

.FM_customer_slideUp2 .cz_button ul li{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;text-align:center;height:40px;line-height:40px;}
如：

  1. .test {display:-webkit-flex;display:flex;}
  1.     .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>
    ________________________________________________________________  经过， 渐变色
a{ color: #666; 
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; 
}
a:hover {color: red}
________________________________________________________________  左右激变
background: -webkit-linear-gradient(left,transparent,#666);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000000), to(transparent));
background: -webkit-linear-gradient(#000000, transparent);
background: -moz-linear-gradient(#000000, transparent);
background: -ms-linear-gradient(#000000, transparent);
background: -o-linear-gradient(#000000, transparent);
background: linear-gradient(#000000, transparent);
-pie-background: linear-gradient(#000000, transparent);
________________________________________________________________  旋转动画
<style>
#imgg{animation:imgg 5s linear 0s infinite;}
@keyframes imgg{
0%{transform:rotateY(0deg);}
25%{transform:rotateY(90deg);}
50%{transform:rotateY(180deg);}
75%{transform:rotateY(270deg);}
100% {transform:rotateY(360deg);}
}
</style>
<div id="imgg">  aaa </div>
________________________________________________________________ 经过 翻牌效果，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 翻牌</title>
</head>
<body>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none; margin:0; padding:0;}
.brandsShow{ width:1200px; height:620px; margin:0 auto; }
.brandsShow ul{ margin-left:-20px; width:1225px; height:auto; }
.brandsShow ul li{ float:left; display:inline; width:283px; height:283px; }
.flip-container {perspective: 1000;
-webkit-perspective: 1000px; /*父类容器中 perspective 子类允许透视*/
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
margin:0px auto; float:left; margin-left:20px; margin-bottom:20px; border:1px solid #fff;}
.flip-container:hover .back {transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg); z-index:2;}
.flip-container:hover .front { transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg); z-index:1}
.flip-container, .front, .back {width: 283px;height: 283px;}
.flipper {transition:transform 0.6s ease-out;
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out;
-ms-transition: transform .5s ease-in-out;
-o-transition: transform .5s ease-in-out;
-webkit-transform-style: preserve-3d; /*使其子类变换后得以保留 3d转换后的位置*/
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
display:block;position: relative;}
.front, .back {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;}
.front img, .back img{ width:283px; height:283px; overflow:hidden;}
.front {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);}
.back { z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);}
</style>
<ul>
<li class="flip-container " ontouchstart="this.classList.toggle('hover');">
<a href="brandLi.html" class="flipper">
<div class="front "><img src="data:images/pic/brand10.jpg">前面</div>
<div class="back " ><img src="data:images/pic/brand01.jpg">后面</div>
</a>
</li>
<li class="flip-container " ontouchstart="this.classList.toggle('hover');">
<a href="brandLi.html" class="flipper">
<div class="front "><img src="data:images/pic/brand10.jpg"></div>
<div class="back " ><img src="data:images/pic/brand01.jpg"></div>
</a>
</li>
</ul>
</body>
</html>
________________________________________________________________ 经过 360度旋转
@-webkit-keyframes btnRotate {
0% {
    -webkit-transform: rotateZ(0deg);
    }
100% {
    -webkit-transform: rotateZ(360deg);
    }
}
#startMenu button:hover img {
    -webkit-animation: btnRotate 1.5s linear infinite;   ---1 为旋转一圈
}
________________________________________________________________ 判断浏览器是否支持html5
<!-- 判断浏览器是否支持html5 -->
<div style="">你知道你的浏览器过时了吗？</div>
<script>
        window.onload = function() {
            if (window.applicationCache) {
                alert("你的浏览器支持HTML5");
            } else {
                alert("你的浏览器不支持HTML5");
            }
        }
    </script>  
<!-- 判断浏览器是否支持html5 -->
 

________________________________________________________________

一直写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]-->这对标签给输出出来，

在此想问一下大家有没有什么更好的解决办？

<!--___________________________________________屏幕 适配-->

@media screen and (min-width:1920px){
 
}
@media screen and (min-width: 1280px) and (max-width: 1920px) {
}
@media screen and (min-width: 960px) and (max-width: 1279px) {
}
@media only screen and (min-width: 640px) and (max-width: 959px){
}
 
<!-- 通用CSS-->
    a,button,input,textarea,select,option,p,div{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;}
    body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;font-weight:normal;}
    img{border:0 none;max-width:100%;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0.2)}
    i,em,b{font-style:normal;font-weight:normal}
    ul,ol,li,dl,dt,dd{padding:0;margin:0;list-style-type:none;list-style:none}
    input,select,h1,h2,h3,h4,h5,h6{font-size:100%;border-radius:0;}
    table{border-collapse:collapse;border-spacing:0}
    a{text-decoration:none;color:#333}
    .clear:after{content:"\200B";display:block;height:0;clear:both;*zoom:1}
 
    body{margin:0 auto;min-width:320px;/*max-width:640px;*/font-size:14px;color:#929292;-webkit-text-size-adjust:100%; font-family:Helvetica; text-shadow:none;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
}
 
============================================  背景图片自适应，固定不动

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;

 ============================================  问大家一下，软键盘挡住输入框，这个问题大家怎么解决的
 setinterval = setInterval(() => {
      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常用收集的更多相关文章

  1. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  2. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  3. CSS常用选择器名

    一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...

  4. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  5. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  6. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  7. 各大浏览器CSS Hack收集

    各大浏览器CSS Hack收集  >>>>>>>>>>>>>>>>>>>>> ...

  8. CSS常用选择器

    关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...

  9. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

随机推荐

  1. 又爱又恨系列之枚举enum

    其实枚举挺简单的,只不过以前没好好学,所以不知道这个东西,恩,现在梳理一下 整体而言,首先枚举是一个数据类型,这个数据类型和结构体有点像 可以分为三个层次 1.枚举数据类型定义 第一种:enum 枚举 ...

  2. [bzoj1009][HNOI2008]GT考试

    Description 阿申准备报名参加考试,准考证号为位数,他不希望准考证号上出现不吉利的数字. 他的不吉利数学有位,不出现是指中没有恰好一段等于. 可以为. Input 第一行输入.接下来一行输入 ...

  3. matlab之meshgrid()函数

    以最常见的一个用法为例: [X,Y]=meshgrid(xgv, ygv) xgv是一个(一维的,行)向量,ygv也是. 产生的X和Y,规格相同,都是二维向量,高度为size(ygv,2),宽度为si ...

  4. PowerDesigner给两个表添加reference，中间显示外键信息步骤

    如题,我用的是PowerDesigner15,其他的应该也类似. 解决方法: 右击reference,就是那条线,选中format,然后是content->center,在null,name,c ...

  5. Consuming a RESTful Web Service

    本篇文章将介绍使用Spring来建立RESTful的Web Service. 我们通过一个例子来说明这篇文章:这个例子将会使用Spring的RestTemplate来从Facebook的提供的API中 ...

  6. selenium 基本的键盘方法

    今晚不想加班,于是赶紧回来看看书: 1.下了selenium的小工具:FireBug/FirePath. 2.确定了看书顺序,我觉得难度低点开始比较好,所以我还是先看基于Python的selenium ...

  7. AngularJs angular.bind、angular.bootstrap、angular.copy

    angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...

  8. Python基本数据类型之tuple

    一.创建元组: ages = (11, 22, 33, 44, 55) ages = tuple((11, 22, 33, 44, 55)) 元组和列表几乎一样 元组的元素不可修改,但是元组元素的元素 ...

  9. UVA 11419SAM I AM（输出 最小覆盖点 ）

    参考博客:如何找取 最小覆盖点集合 题意:R*C大小的网格,网格上面放了一些目标.可以再网格外发射子弹,子弹会沿着垂直或者水平方向飞行,并且打掉飞行路径上的所有目标,计算最小多少子弹,各从哪些位置发射 ...

  10. 修改/etc/profile导致常用命令不可用的解决办法

    原因:/etc/profile文件修改有误 解决办法: 用/usr/bin/vim /etc/profile进入,进去后修改正确/etc/profile,然后重启机器让该文件生效即可.