随笔分类 -  CSS3选择器

css3---经典代码
摘要：1. input 模拟单选框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> label{float:left; margin: 0 5px; overflow: 阅读全文
posted @ 2020-11-09 19:00 distant-遥远 阅读(123) 评论(0) 推荐(0)
css----less预处理器
摘要：###less less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言， 增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。 less的中文官网：http://lesscss.cn/ bo 阅读全文
posted @ 2019-11-06 13:33 distant-遥远 阅读(208) 评论(0) 推荐(0)
css---flex布局--容器
摘要：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 容器设置 新版的为display为flex 老版的为display为webkit-box； 布局方向 老版的布局方向 flex-direction: 阅读全文
posted @ 2019-11-04 12:53 distant-遥远 阅读(500) 评论(0) 推荐(0)
css---动画封装
摘要：animation-name 属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列 值: none 特殊关键字，表示无关键帧。 keyframename 标识动画的字符串 animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。 值 一个动 阅读全文
posted @ 2019-11-03 12:23 distant-遥远 阅读(359) 评论(0) 推荐(0)
css---2D变形
摘要：1.transfrom:rotate(360deg); 用前要加transition: 2s; deg重点 transform:rotate(angle); 正值:顺时针旋转 rotate(360deg) 负值:逆时针旋转 rotate(-360deg) 只能设单值。正数表示顺时针旋转，负数表示逆时 阅读全文
posted @ 2019-11-01 15:04 distant-遥远 阅读(314) 评论(0) 推荐(0)
css---过渡天坑
摘要：异步加载 确实没看懂这什么坑 阅读全文
posted @ 2019-11-01 14:19 distant-遥远 阅读(233) 评论(0) 推荐(0)
css---8 过渡属性刨析
摘要：1. transition-property 默认值为 all，表示所有可被动画的属性都表现出过渡动 可以指定多个 property 属性值： none 没有过渡动画。 all 所有可被动画的属性都表现出过渡动画。 IDENT 属性名称 （可以指定多个） 2 transition-duration 阅读全文
posted @ 2019-11-01 12:18 distant-遥远 阅读(190) 评论(0) 推荐(0)
css----7渐变
摘要：linear-gradient(90deg,red 10%,yellow 20%,green 30%) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ ma 阅读全文
posted @ 2019-10-30 15:05 distant-遥远 阅读(124) 评论(0) 推荐(0)
css---盒模型新增样式
摘要：box-shadow 以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。 默认值: none 不可继承 值： inset 默认阴影在边框外 阅读全文
posted @ 2019-10-30 14:56 distant-遥远 阅读(205) 评论(0) 推荐(0)
css---文本新增样式
摘要：opacity属性指定了一个元素的透明度 默认值：1.0 不可继承 兼容性不是太好 兼容性写法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin 阅读全文
posted @ 2019-10-30 14:48 distant-遥远 阅读(143) 评论(0) 推荐(0)
css---7自定义字体
摘要：1.Adobe illustrator AI是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，是一款非常好的矢量图形处理工具。 该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等， 也可以为线稿提供较高的精度和控制，适合生产任何小型设计到大型的复杂项目 2 阅读全文
posted @ 2019-10-30 14:04 distant-遥远 阅读(239) 评论(0) 推荐(0)
css---6 选择器声明的优先级
摘要：选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0一个选择器的具体特殊性如下确定： 1.对于选择器中给定的ID属性值，加 0,1,0,0 2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0 3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1 阅读全文
posted @ 2019-10-30 13:32 distant-遥远 阅读(191) 评论(0) 推荐(0)
css---6伪元素选择器
摘要：after :在内容后边 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>after</title> <style type="text/css"> div { width: 300px; height: 1 阅读全文
posted @ 2019-10-30 13:02 distant-遥远 阅读(124) 评论(0) 推荐(0)
css---5 only-child or nth-of-type
摘要：1 _nth-child系列 :nth-child（index） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nth-Child</title> <style type="text/css"> ul > 阅读全文
posted @ 2019-10-30 12:50 distant-遥远 阅读(180) 评论(0) 推荐(0)
css---4表单相关伪类
摘要：表单的状态 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> input:checked{ wi 阅读全文
posted @ 2019-10-30 12:02 distant-遥远 阅读(300) 评论(0) 推荐(0)
css---3链接伪类与动态伪类
摘要：链接伪类link：表示作为超链接，并指向一个未访问的地址的所有锚 链接伪类不可以加在div上 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--:link：表示作为超链接，并指向一个未访问的地址的所有锚- 阅读全文
posted @ 2019-10-30 11:42 distant-遥远 阅读(288) 评论(0) 推荐(0)
css3 ---2 属性的选择器
摘要：存在和值属性选择器1：[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>存在和值属性选择器</title> <style type="text/ 阅读全文
posted @ 2019-10-30 11:19 distant-遥远 阅读(163) 评论(0) 推荐(0)
css3 ---1 基本的选择器
摘要：基本的选择器 子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子元素选择器</title> <!--我们也可以称它为直接后代选择器--> <style type="text/css"> #wra 阅读全文
posted @ 2019-10-30 11:03 distant-遥远 阅读(146) 评论(0) 推荐(0)