css3 - 特性
伪类选择器
伪类选择器,不用再使用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 - 特性的更多相关文章
- [转]JavaScript快速检测浏览器对CSS3特性的支持
转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...
- 现在就能投入使用的12个高端大气上档次的CSS3特性
原文:http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/ 原文中有demo展示及下载. 翻译开始 ...
- 20个非常绚丽的 CSS3 特性应用演示
这篇文章收集了20个非常绚丽的 CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力.随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用 ...
- 利用CSS3特性巧妙实现漂亮的DIV箭头
DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...
- CSS3特性修改(自定义)浏览器默认滚动条
前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成 ...
- CSS3特性 盒模型 动画
转发自0101后花园 CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 一.Transitions 语法:transi ...
- 针对css3特性浏览器兼容 封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
- CSS3特性
2018-08-20 CSS3:用于控制网页的样式和布局 1.transform:rotate(30deg); CSS3 模块 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多 ...
- JavaScript快速检测浏览器对CSS3特性的支持情况
项目中使用动画效果在IE9下不支持,所以写了个判断浏览器是否支持动画的函数,进而扩展到下面判断浏览器支持任一特定CSS3属性的函数. function supportAnimation(){ var ...
- 20、前端知识点--html5和css3特性(一)
[html5/css3]css中的flex弹性布局学习总结 https://blog.csdn.net/Umbrella_Um/article/details/99490209 用CSS/CSS3 实 ...
随机推荐
- PHP7.1扩展开发入门
第1步: 首先从官网下载了PHP源码http://am1.php.net/distributions/php-7.1.3.tar.bz2 第2步: 解压后可以看到根目录下面的ext文件夹里有ext_s ...
- github中fork的使用
转载https://www.cnblogs.com/patchouli/p/6511251.html 由于git的权限控制功能比较弱,如果想给某个项目提供代码除了直接获得项目的push权限外,gith ...
- keras LSTM学习实例
1. 购物时间预测 http://www.cnblogs.com/arkenstone/p/5794063.html https://github.com/CasiaFan/time_seires_p ...
- Shell案例:图案打印
打印三角形图案 #!/bin/bash echo "Stars" ; i<=; i++ )) do ; j<=i; j++ )) do echo -n " * ...
- PyCharm的一些设置
设置使用UTF-8 在任何情况下: 设置写python脚本,新建 脚本的时候默认加的头文件. # !/usr/bin/env python# -*- coding:utf-8 -*-# Author: ...
- [UE4]地图缩放
一.创建一个设置UI比例尺的函数 二.通过Get Cached Geometry获得当前UI实际显示的尺寸,Get Desired Size获得当前UI原始尺寸,计算得到UI缩放比例尺 三.地图比例尺 ...
- Access、SQLServer、Oracle常见SQL语句应用区别
Access.SQLServer.Oracle常见SQL语句应用区别 关劲松 PMP 如果要兼容Access.SQL Server.Oracle三个数据库版本:我们在编写SQL语句的过程中,尽量使用一 ...
- FIN omitted, FIN-ACK sent
STACKOVER ADDRESS:https://stackoverflow.com/questions/21390479/fin-omitted-fin-ack-sent question: As ...
- javaScrip字符串(String)相关
-----------------------------------------此页只记录前端关于String的东西----------------------------------------- ...
- 搭建(WSTMart)php电商环境时缺少fileinfo函数
搭建WSTMart环境步骤: 第一步:安装phpstudy,一键安装即可 第二步:把下好的系统源码,放到一个文件夹中,并放到刚刚安装好的phpstudy下WWW文件夹下,如WWW>WSTMart ...