伪类选择器

伪类选择器,不用再使用js来控制奇偶不同了

tr:nth-child(even){
  background-color: white;
}
tr:nth-child(odd){
  background-color: yello;
}

此时用传统的hover将失效

tr:hover{
background-color: blue;
}

使用以下方式替代:

table tbody tr:nth-child(even):hover,
table tbody tr:nth-child(odd):hover{
background-color: blue;
 }

三角箭头

三角箭头,设置10px的border,左右都是透明的,上部是白色10px,因边框在角上是对角展示的,加上10px的margin-top就形成了下三角。

.arrow-down{ 
margin-top:10px;
width:0;
height:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
}

同样的左箭头:

    position: absolute;
margin: 0px 10px 0px 0px;
width: ;
height: ;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #e01818;

响应式设计:

页面添加适应设备:
<meta name="viewport" content="width=device-width,initial-scale=1.0"> /** 屏幕分辨率大小 **/
@media only screen and (max-width: 800px){
.el-col-sm-{width: %;}
.el-col-sm-{width: 33.33333%;}
.el-col-sm-{width: %;}
}
@media only screen and (min-width: 800px) and (max-width: 1440px){
.el-col-md-{width: %;}
.el-col-md-{width: 33.33333%;}
.el-col-md-{width: %;}
}
@media only screen and (min-width: 1440px){
.el-col-lg-{width: %;}
.el-col-lg-{width: 33.33333%;}
.el-col-lg-{width: %;}
}

css3 - 特性的更多相关文章

  1. [转]JavaScript快速检测浏览器对CSS3特性的支持

    转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...

  2. 现在就能投入使用的12个高端大气上档次的CSS3特性

    原文:http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/ 原文中有demo展示及下载. 翻译开始 ...

  3. 20个非常绚丽的 CSS3 特性应用演示

    这篇文章收集了20个非常绚丽的 CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用  ...

  4. 利用CSS3特性巧妙实现漂亮的DIV箭头

    DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...

  5. CSS3特性修改(自定义)浏览器默认滚动条

    前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成 ...

  6. CSS3特性 盒模型 动画

    转发自0101后花园 CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 一.Transitions 语法:transi ...

  7. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

  8. CSS3特性

    2018-08-20 CSS3:用于控制网页的样式和布局 1.transform:rotate(30deg);      CSS3 模块 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多 ...

  9. JavaScript快速检测浏览器对CSS3特性的支持情况

    项目中使用动画效果在IE9下不支持,所以写了个判断浏览器是否支持动画的函数,进而扩展到下面判断浏览器支持任一特定CSS3属性的函数. function supportAnimation(){ var ...

  10. 20、前端知识点--html5和css3特性(一)

    [html5/css3]css中的flex弹性布局学习总结 https://blog.csdn.net/Umbrella_Um/article/details/99490209 用CSS/CSS3 实 ...

随机推荐

  1. Uc的个人中心很奇葩

    Uc的个人中心很奇葩,未登录前点击头像是图2选择性别,点击云同步才是图3登录,登录之后,想退出,要点击图1的头像进入图4编辑资料,然后右上角退出登录…摸索了好久,差点抓狂…把你们的产品经理叫出来一下… ...

  2. shell 发送所有内容到会话

    在shell当中 工具 发送键输入到所有会话 会有新的发现

  3. 一个源文件可以写出多个class吗?编译后,会不会生成多个class文件?

    会.一个.java源文件里面可以有内部类.其他类(有且仅有一个类可以声明为public),所以编译后,可以有多个class文件.

  4. Could not determine own NN ID in namespace 'mycluster'

    执行hdfs namenode -bootstrapStandby的时候报错如下 19/03/24 18:00:48 ERROR namenode.NameNode: Failed to start ...

  5. echarts饼图配置

    js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...

  6. C#列的一些操作

    //变更列名 DataTableA.Columns["原来的列名"].ColumnName="新的列名";

  7. C#存储过程中传入传出参数

    作者:卞功鑫  ,转载请保留http://www.cnblogs.com/BinBinGo/p/6399847.html //1 连接字符串 string connectionString = &qu ...

  8. saliency map [转]

    基于Keras实现的代码文档 (图+说明) "Deep Inside Convolutional Networks: Visualising Image Classification Mod ...

  9. window安装mysql教程

    1.下载mysql安装包到指定文件: 比如如图我把下载的mysql zip的内容解压到这个文件里面,具体文件内容如下: my.ini 需要自己创建,里面的内容如下: [mysqld] #basedir ...

  10. sublime 格式化react插件配置教程 jsfmt配置

    1.下载如下插件: https://github.com/ionutvmi/sublime-jsfmt#installation 这个插件是jsfmt,可以直接在package里搜索到: 2.user ...