常见样式知识点

es6: <script type="text/ecmascript-6">

stylus: <style scoped lang="stylus" rel="stylesheet/stylus" >

  var $ss=$("#t-tbody").find("input[disabled][checked]").length;   //[disabled]且checked时的状态

//单选or复选框自定义样式案例
.activity-title-L input[type="checkbox"]{
   -moz-appearance:none; /* Firefox */
   -webkit-appearance:none; /* Safari 和 Chrome */
   appearance:none;
   display: inline-block;
   height: 16px;
   width: 16px;
   background: #fff url(../images/checkbox-blue.png) no-repeat;
   margin-top: 6px;
   margin-right: 4px;
   background-position: 0px -16px;
}
.activity-title-L input[type="checkbox"]:checked{background-position: 0px 0px;}

//菱形css实现
   elem:after{
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background: #fff;
    top: 25px;
    left: 40px;
    opacity: .7;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

 showRemove :false,//显示移除按钮
 showCaption:false,//是否显示标题

//hover卡片效果
.content .daiban-tem li{
    display: inline-block;
    padding-left:40px;
    width:230px;
    height:95px;
    line-height:30px;
    background-color: #fff;
    padding-top:35px;
    color:#999;
    -moz-transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.content .daiban-tem li:hover{
    -moz-transform: translate(0,-5px);
    -webkit-transform: translate(0,-5px);
    -o-transform: translate(0,-5px);
    transform: translate(0,-5px);
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.3);
    box-shadow: 0 0 7px rgba(0,0,0,0.3);
}
//按钮水纹
/*按钮水纹*/
.btn-blue1,.btn-blue2{
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.btn-blue1:after,.btn-blue2:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-transform: scale(10,10);
    -moz-transform: scale(10,10);
    -ms-transform: scale(10,10);
    -o-transform: scale(10,10);
    transform: scale(10,10);
    opacity: 0;
    filter:Alpha(opacity=0);/*IE8以下浏览器*/
    -webkit-transition: transform .5s, opacity 1s;
    -moz-transition: transform .5s, opacity 1s;
    -o-transition: transform .5s, opacity 1s;
    transition: transform .5s, opacity 1s;
}

.btn-blue1:active:after,.btn-blue2:active:after {
    opacity: .2;
    filter:Alpha(opacity=20);/*IE8以下浏览器*/
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -ms-transform: scale(0,0);
    -o-transform: scale(0,0);
    -webkit-transition: 0s;
    -moz-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
}
/*end*/

  

原文地址:https://www.cnblogs.com/holy-amy/p/8203065.html

时间: 2024-10-12 15:33:59

常见样式知识点的相关文章

Android Notification常见样式总结

本文总结一下开发中使用的Notification的常见样式 Demo下载地址 demo里有两首歌和打包后的apk,所以比较大,如果网不好下载请耐心! 代码中用的自定义常量 public static final int TYPE_Normal = 1; public static final int TYPE_Progress = 2; public static final int TYPE_BigText = 3; public static final int TYPE_Inbox = 4

蓝鸥零基础学习HTML5第六讲 CSS的常见样式

蓝鸥零基础学习HTML5第六讲 CSS的常见样式 CSS的常见样式 1.css文本样式的设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size:160px; font-family: "sans-Seri

常见样式问题七、word-break、word-wrap、white-space区别

常见样式问题七.word-break.word-wrap.white-space区别:https://blog.csdn.net/c11073138/article/details/79534394 首先推荐下MDN网站,在上面可以学习html.css.js.对于css而言,可以查看详细的语法.使用案例.浏览器兼容性.附上链接:https://developer.mozilla.org/zh-CN. 一.基本介绍 1.word-break MDN上显示语法: normal | break-all

http常见基础知识点

引言:作为web开发人员,吃透http是很有必要的,下面是我对http协议的基本常用知识点总结. http简介 简单来说,http(HyperText Transfer Protocol,超文本传输)协议就是用于客户端和服务器端之间的通信协议. 用送信来类比,客户端就是写信人,服务器端是收信人,而http协议就是邮寄规则,他保障你写的信能被收到. HTTP协议工作于客户端-服务端架构为上.浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求.Web服务器根据接收到的请求后

细说php一些常见的知识点

一.认识脚本语言 1.常见的脚本语言有:html,css,js,asp,Python等 2.脚本语言的特性: a.语法和机构通常比较简单 b.学习和使用通常比较简单 c.通常以容易修改程序的“解释”作为运行的方式,而不需要”编译“ d.程序的开发产能优于运行效能 3.统一资源定位符URL格式:http://<ip地址>/[端口号]/[路径]/[?<查询信息>] 如果是默认端口80可省略,其他端口则必须在URL中指定 二.动态网站开发所需的web构件 1.客户端IE/Firefox/

CSS总结 最后的选择符和字体、元素常见样式

然后是伪对象选择符,用得比较多的是E:first-letter例如,想让下列段落的第一个字变大:<p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是 一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>则实现的CSS如下: p:first-letter{font-size: 30px;} 若要改变的是第一行的样式,则可以用E:first-line,相信看到这里大家都知道怎么用了,下面是将第一行变成红色字体

操作系统常见面试知识点

1.请分别简单说一说进程和线程以及它们的区别. 进程是具有一定功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源调度和分配的一个独立单位. 线程是进程的实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位. 一个进程可以有多个线程,多个线程也可以并发执行 2.线程同步的方式有哪些 互斥量:采用互斥对象机制,只有拥有互斥对象的线程才有访问公共资源的权限.因为互斥对象只有一个,所以可以保证公共资源不会被多个线程同时访问. 信号量:它允许同一时刻多个线程访问同一资源,但

Java集合类常见面试知识点总结

Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾. 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java核心技术? https://blog.csdn.net/column/details/21930.html 里面有包括Java集合类在内的众多Java核心技术系列文章. 以下总结不保证全对,如有错误,还望能够指出,谢谢. 最后,如果想要更好地完成这部分内容的学习,建议大家还是去看一下原文. Colletion,iterator,comparable 一般认为Co

设计模式常见面试知识点总结(Java版)

设计模式 这篇总结主要是基于我设计模式系列的文章而形成的的.主要是把重要的知识点用自己的话说了一遍,可能会有一些错误,还望见谅和指点.谢谢 更多详细内容可以到我的cdsn博客上查看: https://blog.csdn.net/a724888 最后,如果想要更好地完成这部分内容的学习,建议大家还是去看一下原文. 创建型模式 创建型模式 创建型模式的作用就是创建对象,说到创建一个对象,最熟悉的就是 new 一个对象,然后 set 相关属性.但是,在很多场景下,我们需要给客户端提供更加友好的创建对象