a标签伪类选择器+过度模块
a标签的伪类选择器
1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的。
2.格式:
1):link 修改从未被访问过状态下的样式。
2):visited 修改被访问过的状态下的样式。
3):active 修改鼠标长按状态下的样式。
4):hover 修改鼠标悬停在a标签上状态下的样式。
3.注意点:
1)a标签的伪类选择器可以单独出现也可以一起出现。
2)a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守 爱恨原则---love hate。
3)如果默认状态的样式和被访问过状态的样式一样,那么可以缩写(简单来说就是link跟visited可以直接用a标签里的color替代使用)。
4.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面、和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)、和a标签文字/背景相关的都写在伪类选择器中。
过渡模块
1.过渡效果三要素:必须要有属性发生变化、必须要告诉系统哪个属性需要执行过渡效果、必须告诉系统过渡效果持续的时长。
2.注意点:当多个属性需要同时执行过渡效果时用逗号隔开即可。如果是分开设置过渡效果,则在后面设置的会覆盖前面的效果。
3.其他属性:
4.连写格式:transition:过渡属性 过渡时长 运动速度 延迟时间
注意点:4.1)当多个属性需要同时执行过渡效果时用逗号隔开即可---transition:过渡属性 过渡时长 运动速度 延迟时间,transition:过渡属性 过渡时长 运动速度 延迟时间。
4.2)连写的时候可以省略后面的两个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素。
4.3)如果多个属性运动的速度/延迟的时间/持续的时间都一样,那么就可以简写为transition:all 0s;。
5.编写过渡套路步骤:
1)先编写基本界面,不要管过渡。
2)修改我们认为需要修改的属性 。
3)再回头去给被修改属性的那个元素添加过渡即可。
a标签伪类选择器+过度模块的更多相关文章
- a标签伪类选择器以及伪元素:hover的案例
1.通过我们的观察发现a标签存在一定的状态1.1默认状态, 从未被访问过1.2被访问过的状态1.3鼠标长按状态1.4鼠标悬停在a标签上状态 2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修 ...
- HTML连载64-a标签伪类选择器的注意点与练习
一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- CSS学习笔记-03- 过渡模块之前奏篇 a标签的伪类选择器
CSS3 2D转换CSS3 3D转换CSS3 过渡CSS3 动画 CSS3 的四大金刚. 想要实现酷炫的视觉效果,上面4个是必须要掌握的.学习之前,先复习一下 视觉盛宴的前菜 :a标签的伪类选择器 铛 ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- python 46 边界圆角 、a_img_list标签 、伪类选择器
一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- 超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法)。
<!DOCTYPE html>< html>< head> <meta charset="utf-8" /> < ...
随机推荐
- CSS3 小黄人案例
使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: <div class="wrap"> <!-- 头发 --> <div class=&q ...
- 英语Petrolaeum原油
Petrolaeum (英语单词) Petrolaeum是一个英语单词,名词,翻译为石油. 中文名:石油 外文名:petrolaeum,petroleum 目录 1 含义 2 例句 含义 petrol ...
- Firebird 审计追踪
Firebird 打开审计追踪功能,即在服务器上打开日志记录功能,根据配置记录不同类型的服务器执行情况. 1.首先修改Firebird.conf文件,打开审计功能: AuditTraceConfigF ...
- 基于 k8s-搭建 Kubernetes 的 web 管理界面
查看我们的k8s环境是否正常: 使用kubectl get nodes 获取我们的节点的信息: 到此说明我们的kubernetes环境是正常的,接下来就可以实验了 第一步在master上传所需的软件包 ...
- 一分钟告诉你什么是OPC DA质量代码
[关于TOP Server OPC Server试用版可登录慧都网该产品下载页进行下载] OPC DA(OPC实时数据访问规范)定义了包括数据值,更新时间与数据品质信息的相关标准.这个定义相信大家都很 ...
- 基于RBAC模型的权限设计:如何设计系统权限体系?
一.什么是RABC RBAC(基于角色的权限控制)模型的核心是在用户和权限之间引入了角色的概念.取消了用户和权限的直接关联,改为通过用户关联角色.角色关联权限的方法来间接地赋予用户权限(如下图),从而 ...
- Alpha_6
一. 站立式会议照片 二. 工作进展 (1) 昨天已完成的工作 a. 修改设计图的小毛病 b. 补签卡页面 c. 实现我的,我的卡包,卡片细节功能页面,并可预览 d. 已实现“番茄钟_数据统计”页面和 ...
- <choose><when><if>
--说明:choose类似于switch,其中的when如果不符合则进入otherwise(类似于default),可以结合if标签使用. -- <select> -- SELECT * ...
- Linux系统 jboss/Tomcat服务器pdf文件乱码问题
1.新搭建的环境,但是没有字符集,在windows上的电脑上复制了一份宋体, 字体C:\WINDOWS\FONTS\simsun.ttc(也就是宋体,大小为10M),把他重命名为 simsun.ttf ...
- 关于 ES5 & ES6 数组遍历的方法
ES5 数组遍历方法 1.for 循环 , , , , ] ; i < arr.length; i++) { console.log(arr[i]) } 2.forEach , , , , ] ...