伪类选择器

伪类选择器,不用再使用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. PHP7.1扩展开发入门

    第1步: 首先从官网下载了PHP源码http://am1.php.net/distributions/php-7.1.3.tar.bz2 第2步: 解压后可以看到根目录下面的ext文件夹里有ext_s ...

  2. github中fork的使用

    转载https://www.cnblogs.com/patchouli/p/6511251.html 由于git的权限控制功能比较弱,如果想给某个项目提供代码除了直接获得项目的push权限外,gith ...

  3. keras LSTM学习实例

    1. 购物时间预测 http://www.cnblogs.com/arkenstone/p/5794063.html https://github.com/CasiaFan/time_seires_p ...

  4. Shell案例:图案打印

    打印三角形图案 #!/bin/bash echo "Stars" ; i<=; i++ )) do ; j<=i; j++ )) do echo -n " * ...

  5. PyCharm的一些设置

    设置使用UTF-8 在任何情况下: 设置写python脚本,新建 脚本的时候默认加的头文件. # !/usr/bin/env python# -*- coding:utf-8 -*-# Author: ...

  6. [UE4]地图缩放

    一.创建一个设置UI比例尺的函数 二.通过Get Cached Geometry获得当前UI实际显示的尺寸,Get Desired Size获得当前UI原始尺寸,计算得到UI缩放比例尺 三.地图比例尺 ...

  7. Access、SQLServer、Oracle常见SQL语句应用区别

    Access.SQLServer.Oracle常见SQL语句应用区别 关劲松 PMP 如果要兼容Access.SQL Server.Oracle三个数据库版本:我们在编写SQL语句的过程中,尽量使用一 ...

  8. FIN omitted, FIN-ACK sent

    STACKOVER ADDRESS:https://stackoverflow.com/questions/21390479/fin-omitted-fin-ack-sent question: As ...

  9. javaScrip字符串(String)相关

    -----------------------------------------此页只记录前端关于String的东西----------------------------------------- ...

  10. 搭建(WSTMart)php电商环境时缺少fileinfo函数

    搭建WSTMart环境步骤: 第一步:安装phpstudy,一键安装即可 第二步:把下好的系统源码,放到一个文件夹中,并放到刚刚安装好的phpstudy下WWW文件夹下,如WWW>WSTMart ...