07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态（鼠标点击前显示的状态） a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态（鼠标点击后的状态...） a:active{样式} 鼠标点击时的状态 补充 input:focus{样式} 点击后鼠标移开保持鼠标点击时的状态 上述中的hover,active也适合普通标签 父级 兄弟:hover ~ 自身...{} 自身:hover {} 注意:（只有在时标签中有效） 二.css鼠标样式设置 cursor是样式中的一种属性代表光标 cursor语法:auto | crosshair...body{ cursor: url("小图片地址")}:设置鼠标指针默认为一个小图片 也可以结合a标签的四大伪类结合使用 注意: cursor:url都是和伪类结合使用,而且书写格式要cursor:url...(链接),auto; 三.reset操作 在开发中往往用不到四种伪类，且要清除掉系统的默认样式 就可以如下对a标签进行样式设置：清除系统默认样式 - reset操作 代码如下 a { color
用惯了 Phpstorm 的话，敲代码没方法提示令人不适，TP6模型类没方法提示因为缺少文档注释，可以将 tp5.1 的注释拿到tp6.0中，使其有方法提示 1....找到tp5.1的框架模型类源码文件 ---- 源码文件：thinkphp\library\think\Model.php 复制 \think\Model 文档注释中的 @method 没有 select...刚复制的 @method 粘贴到 TP6.0 的 \think\Model 中 ---- 源码文件：vendor\topthink\think-orm\src\Model.php 粘贴到此处 有 select
在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。...class ，element.toggle('class-name',[add_or_remove] toggle函数的第二个参数true为添加，false为删除 这个方法的作用就是，当myDiv元素上没有这个...CSS类时，它就新增这个CSS类；如果myDiv元素已经有了这个CSS类，它就是删除它。...就是反转操作。...)都支持这个classList类，所以，相信新型的javaScript类库里都会使用classList类来操作页面CSS类，而不需像以前一样去分析元素节点的class属性！
所以，只要你充分理解了上面这句话，恭喜你，你已经从直接操作DOM的时代毫无压力的过渡到了MVVM时代！ 话不多说，先来看看MVVM项目的工程目录： ?...然后对应的代码在自己的标签里面各司其职，所有需要的html、css、javascript都在里面。...css!sass }, { test: /\.css$/, loader: "style!...在实战演练过后，Vue给我的感觉就两个字：省心。所有的操作关注点都在data上面。...本系列文章还没有结束，下篇，也可能是终结篇，即将来袭！
CSS中两个类选择器写在一起一、CSS层叠样式表设计当中，两个类选择器写在一起，那么如果这两个类选择器之间没有使用英文的“,”隔开，而是使用空格，那么一般表示的是选择第一个类选择器的子元素中类名为第二个类选择器的所有元素...，即这两个类选择器一般是父、子元素（或后代元素）的递进关系，目的是为了更精确地选择到HTML的元素，比如.A .B就可以选择A类中的B类元素，而不是所有的B类元素（A类元素之外可能还有B类元素）。...二、如果这两个类选择器之间有英文“,”隔开，那么这两个类的元素是被同时选择，比如.A, .B就是同时选择A类元素和B类元素，并可以同时这两个元素设置相同的CSS样式。...CSS中两个类选择器写在一起实例代码，及在线编辑器下方的实例中，运行之后，可以将两个类选择器中的空格改成英文的“,”，然后再运行看看二者效果上的区别：这是段落p，不包含子元素...中两个类选择器写一起是什么意思，可分有逗号和没有免责声明：内容仅供参考。
不小心删除后生成了一个 删除不必要的 这是正常的，但是还是不行 原因在于这个info还有以来的lib，这些lib的iml文件也是有问题的；一一修改； 你可以查看你的adsplugin.iml 文件也是没有...还有你的module的类前面的符号是未被引用状态的灰色。不是正常蓝色C 。...这时候点进去看看你的adsplugin.iml 是有错误的，我的原因是没有merge修改，里面有HEAD项，由于没有merge修改的问题。...但是，Gradle不是IntelliJ IDEA的本地项目模型 - 它是独立的，保存在.iml文件中，并且存在于.idea/目录中的元数据。...在Android Studio中，这些内容主要是由Gradle构建脚本生成的，这就是为什么当您更改文件时，有时会提示您“使用Gradle文件同步项目” build.gradle。
现在有两个list集合，A 集合 B集合； 两个集合里面都存储user对象， 现在要将B集合里面，不在A集合的数据过滤出来之后，得到；
HTML5学堂（码匠）：昏暗的场景下，查看任何的图片、效果都会给人不适的感觉，所以人们往往喜欢在明亮的场景中来体验世界的美好。...当用户的鼠标移入到某一张图片时，“镁光灯”即聚焦在当前的图片上，这张图片就高亮的展示出来，同时为了更突出所选的这张图片，就把没有被选择到的其它图片添加阴影透明。...针对如上的说法，特地在CSS样式中封装了一个叫做active的类名，其中主要设置的是鼠标移入后会展示的状态，所以在书写上只需要借助添加或者移除类名即可操作。...}) ; //当鼠标离开... }, function(){ // 找到刚刚离开的列表项中的图像，并删除活动类 $(this).find('img').removeClass('...，如下操作： // 当鼠标离开无序列表时... $('.spotlight ul').on('mouseleave',function(){ // 找到图像并将不透明度更改为1（完全可见）
当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正️️。让我们共同努力，一起进步！ 加油，一起CHIN UP！...'; （html中图片的属性在js中都可以被修改） 还可以修改html中表单的属性。...对于html中元素所带的基本属性，我们就如上文一样直接修改就行，而对于css中的样式，我们就要换种方式了。...当使用 JavaScript 的 DOM 操作 修改 元素的css样式时 , 有两种主要的方法 : 行内样式操作 element.style 类名样式操作 element.className...这是在 DOM 操作中常用的方法之一。 因为可以设置类名，所以我们可以通过修改类名去修改元素属性。 <!
在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员： :is :where :not :has 本文将带领大家了解、深入它们。...:is 伪类选择器 :is() CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。...在 W3 CSS selectors-4 规范 中，新增了一个非常有意思的 :focus-visible 伪类。...有了这个伪类，就可以做到，当用户使用鼠标操作可聚焦元素时，不展示 :focus 样式或者让其表现较弱，而当用户使用键盘操作焦点时，利用 :focus-visible，让可获焦元素获得一个较强的表现样式。...它之所以重要是因为它的诞生，填补了在之前 CSS 选择器中，没有核心意义上真正的父选择器的空缺。 :has 伪类接受一个选择器组作为参数，该参数相对于该元素的 :scope 至少匹配一个元素。
css3动画一般通过鼠标事件或者鼠标状态定义动画，通常我们可以用CSS中伪类、使用js修改元素的样式属性或追加删除样式来执行定义的动画。...通常我们可以用CSS中伪类和js中的鼠标事件来定义，CSS中伪类执行动画包括： 动态伪类 起作用的元素 描述 :link 只有链接 未访问的链接 :visited 只有链接 访问过的链接 :hover...所有元素 鼠标经过元素 :active 所有元素 鼠标点击元素 :focus 所有可被选中的元素 元素被选中 上面的例子就是使用CSS中伪类执行动画的。...使用js修改元素的样式属性或追加删除样式来执行动画： 一般是鼠标事件操作和定时操作（window.setTimeout()，window.setInterval()）； 还应注意当一个元素使用过渡（transition...这被视为如果初始状态从来没有存在过那么元素总是在它的最终状态。克服这个限制最简单的办法是使用极少毫米数的window.setTimeout()。
任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) WebAPI概念 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) 此处的...JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应...) 设置元素属性的值:元素.属性名 = 属性值 2.特点： 1.class在js中是一个关键字，如果要拿到类名需要使用className 2.只能获取到行内样式的属性值，无法得到行外(内联/外联)样式的属性值...，而是在原先类名的基础上加 一个类，这里需要注意多个类名之间的空格 例如：div.className += " two";//字符串拼接添加类型，注意多个类名之间的空格 ...5.页面中 任何元素 都可以注册 很多个事件(点击，移入等) <meta name="viewport
一、超链接伪类 1.何为超链接伪类 在CSS中，使用超链接伪类来定义超链接在鼠标点击的不同时期的样式。...超链接伪类示例1.jpg 2.深入了解超链接伪类 （1）实际开发 在实际开发中，不是每一个超链接都需要定义4种状态，我们只会用到两种状态：未访问时状态和鼠标经过状态（a:hover）。...二、深入了解:hover 1.适用于任何元素 :hover伪类不是只限于a元素，而是可以定义任何一个元素在鼠标经过时的样式。...:hover的应用十分广泛，任何一个网站都会大量运用它，一定要好好掌握。 （1）示例 ① 例1 为div设置伪类:hover 类hover.png 三、鼠标样式 1.浏览器鼠标样式 在CSS中，使用cursor属性来定义鼠标样式。
class：指定标签的类名。CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。 2、CSS选择器常见的有几种?...、还没有释放的E元素| |E:hover | 匹配鼠标悬停其上的E元素 | | E:focus | 匹配获得当前焦点的E元素| | E:lang(c) | 匹配lang属性等于c的E元素| |...从高到低分别是： 1、在属性后面使用 !...important 会覆盖页面内任何位置定义的元素样式 2、作为style属性写在元素标签上的内联样式 3、id选择器 4、类选择器、 5、伪类选择器 6、属性选择器 7、标签选择器 8、...鼠标经过的“已访问链接”可应用a:visited、a:hover、a:active这三种类选择器来定义样式，因为后面的样式会覆盖前面的样式，所以a:hover应放在a:hovor的后面，a:active
今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。 我们先来看个例子，本例子是我在闲逛 Codepen 时看到了，很有意思： ?...本文主要讲的是如何只用 CSS 控制一次动画的行进，暂停与开始。 拆解分析需求 上述动画控制要完成的效果是： 页面 render 后，无任何操作，动画不会开始。...只有当鼠标对元素进行 click ，触发元素的 :active 伪类效果的时候，动画才开始进行； 动画进行到任意时刻，鼠标停止点击，则动画停止； 重新对元素进行点击，动画继续从上一帧结束的状态开始 如果动画播放完...paused; } 只有通过点击的时候，动画才会运行： body:active div { animation-play-state: running; } 看看效果，为了方便看清点击的过程，在点击的过程中...CodePen Demo -- CSS控制动画行进[2] 总结一下 嗯，整个过程其实非常简单。理解了这种方法后，就可以随意加到你想的任何动画中，再抛一个类似的 Demo： ?
鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作...案例：百度换肤实现 4.1.7. jQuery操作类 1)添加类 - 添加一个类 addClass(class)给某个元素添加一个 CSS 类 $('div').addClass('myClass1...'); 代码: 注意:类名没有”点” -添加多个类 addClass(class1 class2 class3...)给某个元素添加多个 CSS 类 添加多个类时, 类名使用空格隔开 $ (‘div...代码实战: 切换显示隐藏 我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判 断。...，但是如果用户滑动鼠标太快了，会出现，前面动画没有执行完毕，后面动画就开始执行，导致动画很乱！
等等 多说一嘴： 不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。...选择器 想要操作任何一个标签，那么首先需要做的事情就是选中对应的标签，而这个就是选择器的作用 基础选择器 标签选择器 标签名 {属性1: 值1;属性2: 值2;} 特点：会将页面上所有符合的标签都选择上...，但是id选择器只能被一个元素调用 在同一个页面中吗，不能出现两个id值相同的元素 通配符选择器 * { 属性1: 值1; 属性2：值2; } 特点：选中任何元素，后期用于页面初始化。...伪类选择器 伪类选择器可以理解为选择的元素的一种状态，并不是如之前直接选中元素就完事了 a:link 没有被访问的时候的状态 a:visited 访问之后的状态 a:hover 鼠标移动上去之后的状态...a:active 鼠标按下的状态 伪类选择器在实际工作中，不会写这么多，意义不大，推荐简写的方式完成 a {} a:hover {} 文字的对齐 缩进 下划线 水平对齐 text-align:值;
1 源码路径selenum/webdriver/common/action_chains.py图片2 功能描述提供鼠标操作，模拟用户的鼠标行为；如鼠标的各种单击、双击、滑动、拖拽等操作。..._actions = []5 ActionChains类APIAPI说明perform(self)执行已经存储的操作reset_actions(self)清除已存储在本地和远程端的操作click(self...，如果没有则默认点击鼠标所在位置context_click(self, on_element=None)右键单击，如果有on_element则点击，如果没有则默认点击鼠标所在位置double_click...=None) 在元素上释放鼠标按钮，如果没有元素，则在当前位置释放send_keys(self, *keys_to_send)在当前位置发送按键 ，键常量在Keys类中send_keys_to_element...(self, element, *keys_to_send)发送按键在当前定位元素上，键常量在Keys类中6 实例输入百度网址输入NoamaNelson回车搜索最大化窗口全选输入的内容，重新输入N点击“
直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样： 通常而言，CSS 负责表现，JavaScript 负责行为。...原理 以上面的 Demo 为例子，要使用 CSS 实现鼠标跟随，最重要的一点就是： 如何实时监测到当前鼠标处于何处？ OK，其实很多 CSS 效果，都离不开 障眼法 二字。...好的，如果把每个元素的 hover 效果去掉，那么这个时候操作页面，其实是没有任何效果的。但同时，通过 :hover 伪类，我们又是可以大概得知当前鼠标是处于页面上哪个区间的。...CSS鼠标跟随按钮效果 一开始，我在 CodePen 上看到了下面这个效果，使用了 SVG + CSS + JS 实现，我就想着，仅用 CSS，能不能 copy 一下： ?...额，我的看法是也许业务中真的用不上或者应用场景极为有限，但是多了解一些，能在遇到问题的时候多点选择，多一些思考的空间，更好的发散思维，至少是无害吧。
尤其在我们一些重交互、重逻辑的网站中，我们需要考虑用户的使用习惯、使用场景，从高可访问性的角度考虑，譬如假设用户没有鼠标，仅仅使用键盘，能否顺畅的使用我们的网站？...假设用户没有鼠标，这个真不一定是针对残障人士，很多情况下，用户拿鼠标的手可能在干其他事情，比如在吃东西，又或者在 TO B 类的业务，如超市收银、仓库收货，很可能用户拿鼠标的手操作着其他设备（扫码枪）等等...:thumbsup: 下面的截图，完全由键盘操作完成： ? 通过元素的 :focus 伪类以及键盘 Tab 键切换焦点，用户可以非常顺畅的在脱离鼠标的情况下，对页面的焦点切换及操作。...然而，在许多 reset.css 中，经常能看到这样一句 CSS 样式代码，为了样式的统一，消除了可聚焦元素的 :focus 伪类： :focus { outline: 0; } 我们给上述操作的代码...而这样做，从可访问性的角度来看，对于非鼠标用户，无疑是灾难性的。 基于此，在W3 CSS selectors-4 规范[22] 中，新增了一个非常有意思的 :focus-visible 伪类。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
