首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

全栈之前端 | 11.CSS3基础知识之列表链接学习

cursor 属性 - 设置鼠标指针悬停在元素样式 :link 伪类 - 默认链接状态 :visited 伪类 - 已访问链接状态 :hover 伪类 - 鼠标停留选中链接状态 :focus 伪类...cursor 属性 - 设置鼠标指针悬停在元素样式 描述: 此属性设置光标的类型(如果有),即在鼠标指针悬停在元素时显示相应样式。...例如: 默认链接样式为,具有下划线,访问过 (Unvisited) 链接是蓝色, 访问过 (Visited) 链接是紫色, 而悬停 (Hover) 一个链接时候鼠标光标会变成一个小手图标...:hover CSS 伪类在用户使用指针设备与元素进行交互时匹配,通常情况下,用户将光标鼠标指针)悬停在元素时触发。...:active CSS 伪类匹配被用户激活元素, 即当用鼠标交互时,它代表是用户按下按键和松开按键之间时间, 其一般被用在和 元素 a:link { /* 访问链接

11310

前端如何提高用户体验:增强可点击区域大小

举个例子,WCAG准则2.3.2规定:网页不包含任何闪光超过3次/秒内容。 用户应该能够使用台式机/笔记本电脑键盘以及移动设备或平板电脑触摸屏来操作输入。...在下面的图中,我模拟了两个按钮不同情况。左侧,按钮更小,更远,用户需要更多时间与它互动。右侧,按钮大小更大,接近于它同级输入元素,这将使交互容易、更快。 ?...我把鼠标悬停在按钮光标仍然是一个指针,这很好。不过,我也可以选择文本和悬停时,有一个文本光标!如果使用了正确元素,就不会发生这种情况。 ?...这种体验不是很好,鼠标或手指指向屏幕如此小目标会比较难。 在下图中,它可点击区域更大并且更易于交互。 ? 事例源码:https://codepen.io/shadeed/pe......章节标题 某些情况下,需要在章节标题远端添加“查看更多”按钮或箭头。 在下面的示例,我将箭头放置假圆,以便可以正确地使箭头居中。

4.7K20
您找到你想要的搜索结果了吗?
是的
没有找到

CSS美化超链接样式

超链接四种状态样式排列是固定,一般不能随意调换 正确顺序时Link,visited,hover,active 当鼠标经过超链接是,会先执行第一行声明, 但是紧接着第三行声明会覆盖掉第一行和第二行声明样式...} /*超链接被访问后样式*/ a:hover{color: green;} /*鼠标经过超链接样式*/ a:active{color: yellow;} /*超链接被激活时样式*/ </...: 四、定义光标样式 默认情况下,鼠标指针经过超链接显示为手形。...通常消染为一个箭头 pointer 指针光标,表示一个超链接 move 十字箭头光标,用于标示对象可被移动 e-resize、ne-resize 、nw-resize 、 n-resize、se-resize...通常渲染为I形光标 text 表示程序正忙,需要用户等待,通常渲染为手表或沙漏 wait 光标对象包含有帮助内容,通常渲染为一个问号或一个气球 help 自定义光标类型图标路径

1.7K30

四大伪类,css鼠标样式设置,reset操作,静止对文本操作

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

1.5K20

这几个CSS小技巧,你知道吗?

前言 在网页设计和前端开发,CSS属性是非常重要一部分。...) 2.修改光标停留在页面上样式 一般情况下鼠标的样式是一个箭头,改变鼠标光标的样式为其他类型: /*类为first元素,设置鼠标为不可用状态 。...*/ .first{ cursor: not-allowed; } /* 类为second元素,将鼠标指针设置为放大镜效果 */ .second{ cursor: zoom-in...; } /* 类为third元素,将鼠标指针设置为十字准星形状*/ .third{ cursor: crosshair; } ​...(改变之后光标) 3.保持组件纵横比大小 构建响应式组件时候,组件高度与宽度不协调经常会导致视频和图像会出现拉伸情况,影响读者观感,因此我们需要设置组件纵横比属性: .example{

17920

.net mvc + layui做图片上传(二)—— 使用流上传和下载图片

这与浏览器安全性机制有关,浏览器不允许用户用任意路径访问服务器资源,因为这可能造成服务器其他位置信息被泄露。浏览器只允许用户用相对路径直接访问本项目路径下资源。...我这个demo是一个code first实现案例,所以你看到这个解决方案还有其他几个项目在里面,但是不用担心,本案例只涉及mvc项目(Console),不与其他几个项目产生依赖。...,这个类主要用于二进制文件 “读” 和 “写” 二进制数据。...(4)偏移量 offset:流数据写入(或读出)到缓存数组时,数据是按照类似排队顺序,一个一个写,流中有一个指针一样东西,数据读了几个,这个指针就向前移动几位,指针移动多少就是偏移量,偏移量作为流使用一个重要参数...while (offset < inputStream.Length) { ///存储流数据数组,该数组大小根据流读取数据量大小调整,若读取数据量大于规定数组最大大小

2K31

CSS笔记(3)

标签理论可以放在html文档任意地方,但一般会放在标签. 3.外部样式表(链接式)用最多!.... 2.html页面,使用标签引入这个文件 Emmet语法 Emmet语法前身是...(一)CSS复合选择器 CSS,可以根据选择器类型把选择器分成基础选择器和复合选择器,复合选择器是建立基础选择器之上,对基本选择器进行组合形成....选择鼠标指针位于其链接 a:active 选择活动链接(鼠标按下弹起链接) 注意事项: 为了确保生效,请按照LVHA顺序声明 :Link-:Visited-:Hover-:Active...焦点就是光标,一般情况表单元素才能获取,因此这个选择器也主要针对于表单元素来说. 效果如下: 当鼠标点击文本框时,边框颜色会变化.

47910

Qt编写安防视频监控系统9-自动隐藏光标

一、前言 这个效果灵感来自于大屏电子看板系统,很多系统尤其是上了大屏时候,其实在用户不在操作时候,是很不希望看到那个鼠标箭头指针,只有当用户操作时候才显示出来,这个就需要开个定时器定时计算最后一次用户操作时间...,和当前时间比较,如果超过了鼠标操作隐藏时间,则隐藏鼠标Qt中提供了方法qApp->setOverrideCursor(Qt::BlankCursor);这样设置个空白鼠标指针就表示隐藏鼠标,如果需要恢复调用...搞个bool存储当前鼠标是否隐藏,鼠标隐藏时候置为真,拦截鼠标移动事件,一旦发现之前鼠标处于隐藏状态,则立即恢复指针状态,同时将标志位改为假,不然频繁恢复指针没有意义,只有当指针隐藏时候才需要恢复一次...鼠标右键可删除当前+所有视频,截图当前+所有视频。 录像机管理、摄像机管理,可添加删除修改导入导出打印信息,立即应用新设备信息生成树状列表,不需重启。 pro文件可以自由开启是否加载地图。...默认超过10秒钟操作自动隐藏鼠标指针。 高度可定制化,用户可以很方便在此基础衍生自己功能,支持linux系统。

1.4K20

Chrome 浏览器自定义光标!这款插件不能错过!

今天给小伙伴们安利一款自定义光标的 Chrome 插件: Custom Cursors:自定义光标,用可爱、有趣和时尚东西替换一层不变默认光标。 废话少说,让我们先看看效果图吧!...四、获取更多有趣光标 五、自定义光标大小 六、开启&关闭光标 ---- 一、Custom Cursors:自定义光标 这是一款非常可爱粉红色 Chrome 自定义光标插件。...你可以每个网页用明亮华丽鼠标指针展示您个性。忘记多年出现在显示屏无聊和简单光标。...现在您可以将鼠标指针改为粉红色和可爱东西;) 二、下载自定义光标插件 首先,下载并安装该插件: 下载地址:https://www.chajianxw.com/fun/21721.html 如何安装可参考下面的教程...安装成功后,浏览器右上角可看到安装成功图标: 点击它,即可选择自己想要自定义光标样式: 非常简单,选择哪个,光标立马就会变成了选择那个样式了。

1.1K20

职场人必备WORD排版十大技巧

答:有,如果要进行“页面设置”,只需用鼠标左键双击标尺没有刻度部分就可以打开页面设置窗口。...如果采用键盘上“ Shift ”键配合鼠标左键进行选择,可这样进行:将光标移到要选取文字首(或末),再按住“ Shift ”键不放,然后将鼠标指针移到要选取文字末(或首)并单击,此时也可快速选中这段连续文字...3 一行文字选取: 将指针移到该行行首,光标指针变成向右箭头时,单击鼠标左键即可; 4 一段文字选取: 将指针移到该段第一行行首,同样光标指针变成向右箭头时,双击鼠标左键即可。...5 整个文件内容选取: 把指针移到该文件任一行首(指针变成向右箭头时),快速单击鼠标左键三次便可选中整个文件内容(也可利用组合键“ Ctrl+A ”快速选定)。...6.快速对齐段落 问: Word 要设置段落对齐,通常大家是利用格式工具栏对齐方式进行,请问有没有方便快速方法呢?

1.4K70

鼠标教鞭:Presentify for mac

想要注释任何屏幕,突出显示光标,Presentify Mac版绝对是您首选,该软件拥有随时随地画画、高亮显示鼠标指针、撤消/重做支持等强大功能,简便易用非常不错。...非常适合现场演示和远程工作时视频通话。通过Sidecar或Astropad连接到MacbookiPad运行。与XP笔一起使用。...2、高亮显示鼠标指针使用presentify,您无需再移动光标来吸引观众注意力。更改光标突出显示颜色,不透明度和大小。您也可以选择仅在移动光标/鼠标时突出显示。...为每个屏幕保存会话,因此屏幕之间切换时无需切换控件,颜色等。每个屏幕都有自己撤消/重做堆栈,因此您会意外擦除看不见内容。6、白板如果需要,可以白板绘制(不要在其他应用程序绘制)。...您甚至可以将白板颜色更改为您想要颜色。

78640

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

鼠标悬停在曲线上,直到指针变为线段,然后拖动该曲线。 Ctrl + 拖动 移动贝塞尔控点。 移动与另一个折点重合时无法选择贝塞尔控点。将鼠标悬停在控点,直到指针变为折点,然后拖动该控点。...减号 (-) 或 Ctrl+滚动鼠标滚轮 缩小。 缩小地图。 Z+水平移动光标或 Z+滚动鼠标滚轮 更改 z 值。 要增加 z 值,可向后转动鼠标滚轮或按 Z 键同时将指针向右侧拖动。...要减小 z 值,可向前转动鼠标滚轮或按 Z 键同时将指针向左侧拖动。 Shift+Z+水平移动光标或 Shift+滚动鼠标滚轮 加快 z 变化速度。 按住 Shift 并转动鼠标滚轮。...或者,要将 z 值更改为速度提升 15 倍,请按住 Shift+Z,同时向左或向右移动指针。 Caps Lock+Z+水平移动光标或 Caps Lock+滚动鼠标滚轮 减慢 z 变化速度。...按住 Caps Lock 并转动鼠标滚轮。或者,要将 z 值更改为速度变慢 5 倍,请按住 Caps Lock 然后按住 Z 键,同时向左或向右移动指针。 B 打开或关闭表面捕捉。

69420

MFC--响应鼠标和键盘操作

画点之前我们还需要为对话窗口获取设备上下文.即CClientDC dc(this);这条语句.通过为CClientDC类声明一个新实例来完成,参数this是当前窗口指针.这个类封装了设备上下文以及大多数可以对其进行操作...很简单,鼠标确定两点间连上直线.可以按照如下步骤来实现:     首先向我们对话框类--CMouseDlg类添加两个成员变量,m_iPrevX,m_iPrevY,类型为int,属性为private...我们为上面的画图程序添加一点功能,当某个键被按下时,改变光标的形状.A改为默认光标;B改为I型竖线;C改为沙漏型;X退出程序     首先选择WM_KEYDOWN消息添加一个函数.代码如下: void...注意:当鼠标移动过程光标将切换为默认箭头.   ....对我们写程序来说就是CMouseApp类.当我们需要访问封装在CWinApp类功能或当前派生类时,可以使用AfxGetApp函数得到指向它指针.对继承派生不熟回去好好看看c++书.

1.8K10

ASP.NET MVC 4 RCJSCSS打包压缩功能

ASP.NET MVC 4可以使用BundleTable捆绑多个css文件和js文件,以提高网络加载速度和页面解析速度。更为重要是通过捆绑可以解决IE浏览器31个CSS文件连接限制。...于是,我们只好小心翼翼处理这些css文件页面引用。ASP.NET捆绑是ASP.NET 4.5新功能,是System.Web.Optimization命名空间下。...三个类,做法改为通过WebActivator启动。...新系统配置将路由规则、过滤器及打包规则等注册逻辑由Application_Start拆出来,各自放在独立文件案,管理及修改起来一目了然,架构漂亮。...打包压缩前,加载网页需要发出20个请求,总共传输5,992+812,541=818,533 Bytes资料。 ?

3.1K70

【第3版emWin教程】第39章 emWin6.x指针输入设备(摇杆)

触摸屏控制已经移植章节进行了讲解,本章我们使用开发板上自带摇杆来控制光标,让大家对指针输入设备有个全面的认识,以后使用任何其它输入设备都是一样。...2、指针输入设备所有API函数emWin手册中都有讲解,下图是中文版手册里面API函数位置 下图是英文版手册里面API函数位置: 39.2 指针输入设备介绍 指针输入设备指鼠标、触摸屏、游戏操纵杆等设备...单个应用可以使用多个指针输入设备,以支持鼠标、触摸屏、游戏操纵杆同时使用。...一般情况下,指针输入设备驱动所做检测到事件(比如移动鼠标或者按下触摸屏)时调用函数GUI_PID_StoreState()。...2、 emWin指针输入设备含有一个 FIFO 缓冲器,默认情况使用函数GUI_PID_StoreState最多可以保存5个PID事件,用户可以GUIConf.h文件重新配置宏定义GUI_PID_BUFFER_SIZE

66120

html网页详细代码「建议收藏」

7,Flash,如果屏蔽鼠标右键?FS命令都是什么意思?...Dreamweaver4CSS样式面板: 按CTR+SHIFT+E--出现样式表对话框,点击NEW,出现编辑对话框,左边最后一项extensions-cursor 选择你要改指针形式就可以了,然后把你要想改变地方运用样式表...我们浏览网页时,当鼠标停留在图片对象或文字链接上时,鼠标的右下角有时会出现一个提示信息框。对目标进行一定注释说明。一些场合,它作用是很重要。 alt 用来给图片来提示。...7,Flash,如果屏蔽鼠标右键?FS命令都是什么意思?...Dreamweaver4CSS样式面板: 按CTR+SHIFT+E--出现样式表对话框,点击NEW,出现编辑对话框,左边最后一项extensions-cursor 选择你要改指针形式就可以了,然后把你要想改变地方运用样式表

7.3K41

H7-TOOL发布固件V2.13,全新示波器上位机界面,信号发生器任意波形输出,脱机烧录增加BlueNRG-LP和桃芯科技(2022-02-11)

,直接打印电压值到串口示波器 6、Lua输出窗口字体 字体大小可调节 7、信号发生器独立到单独窗口,新增任意波形输出功能 8、解决win11下左侧图标闪烁问题 详细介绍可以看更新记录...,测量结果与我们设置是一致: 5、H7-TOOL新版示波器操作更好支持了触发电压调节和光标测量功能 (1)、整个界面介绍: 电后点击右下角“启动采集”按钮就可以开启示波器采集了。...现在显示区做了控制,不会完全移动到波形区外: (4)、CH1和CH2波形放缩 CH1和CH2是同时放缩鼠标剪头波形显示区内,鼠标滚轮可以放缩波形: (5)、垂直光标测量,用于波形周期测量...勾选垂直光标即可,然后鼠标左键选中垂直线,就可以左右调节两个垂直光标的位置,从而可以方便测量波形周期: (6)、水平光标测量,用于波形电压测量 勾选水平光标即可,然后鼠标左键选中水平线,就可以上下调节两个垂直光标的位置...支持高清字体后,上位机软件解码效果字体展示舒服些: 同时也更好适配了下Win11,并且LUA窗口字体支持了放缩控制: 按住键盘CTRL键,滚动鼠标滚轮就可以看到效果了: 8、当前支持脱机烧录芯片列表

1.1K30

前端特效开发 | JS实现聚光灯看图效果

HTML5学堂(码匠):昏暗场景下,查看任何图片、效果都会给人不适感觉,所以人们往往喜欢明亮场景来体验世界美好。...当用户鼠标移入到某一张图片时,“镁光灯”即聚焦在当前图片,这张图片就高亮展示出来,同时为了突出所选这张图片,就把没有被选择到其它图片添加阴影透明。...;同时为了让鼠标移入时有更好展示状态,hover时特地为图片增加一个白色边框,以区分当前展示图片区域。...实现聚光灯效果,主要需要考虑两个方面,一个是鼠标移入时对选中图片进行高亮展示,同时对其它选中设置前面对象设置好透明度值;另一方面需要考虑是当鼠标移开图片时,需要移除高亮显示,并且回归原来初始状态...针对如上说法,特地CSS样式中封装了一个叫做active类名,其中主要设置鼠标移入后会展示状态,所以书写上只需要借助添加或者移除类名即可操作。

4.3K50
领券