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

前端学习(10)~css学习:选择器:伪类

*/ a:visited{ color:orange; } /*鼠标悬停,放到标签上时候*/ a:hover{ color:green...; } /*鼠标点击链接,但是不松手时候*/ a:active{ color:black; 记住,css,这四种状态必须按照固定顺序写...看一下这四种状态动图效果: ? 超链接美化 问:既然a{}定义了超属性,和a:link{}定义了超点击之前属性,那这两个有啥区别呢?...我们发现,当我们定义a:link和 a:visited这两个伪类时候,如果它们属性相同,我们其实可以写在一起,用逗号隔开就好,摘抄如下: .nav ul li a{...但是前端开发工程师大量实践,发现写link、visited也挺兼容。写法是: a:link、a:visited都是可以省略,简写在a标签里面。

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

html、css 实现二级菜单「建议收藏」

对于css代码,来逐个讲解 一:解决高度坍塌(清除浮动) 因为一级菜单是用ul li来做,虽然ul是块级元素(display: block;)...,它height默认值为auto,此时,它高度不会计算不考虑浮动元素;由于ul里面只有li元素,所以会导致一个悲剧,ul元素height为0 高度坍塌解决办法: (html给ul元素一个类选择器...= 内容区 + 填充区 边框盒 border-box = 内容区 + 填充区 + 边框 所以效果上来看就是:一级菜单5个元素,水平方向上各占20% 给一级菜单li元素还设置了一个属性:相对定位...一般,页面上只显示一级菜单,需要点击一级菜单,才会出现相应二级菜单 需要用到伪类:hover 鼠标悬停在元素上时样式 (html给一级菜单第四个li元素设置了一个选择器.submenu...; } 补充一嘴:css书写选择器时,比如: nav .topnav>li:hover 选中nav元素下.topnav元素子元素li,并且有鼠标悬停在上面 空格,选后代元素 >,选子元素 自此,

2.5K50

web前端常见面试题

怪异模式下,表格字体样式(如 font-size )不会继承。 怪异模式下颜色值必须使用十六进制标记法。 3....对元素语义化目的是为了让元素语义和呈现分离,元素只负责文档内容结构与含义,而 CSS 样式控制内容呈现,像 元素,没有语义但却能将字体变粗,这类元素违背了语义化目的,将会被废弃。...,是可独立分配、可复用结构,如在发布,它可能是论坛帖子、杂志或新闻文章、博客、用户提交评论、交互式组件,或者其他独立内容项目; nav 描述一个含有多个超链接区域,该区域包含跳转到其他页面或页面内部其他部分链接列表...; section 表示文档一个区域(或节),比如,内容一个专题组; main 定义文档主要内容,该内容文档应当是独一无二包含任何在文档重复内容,比如侧边栏,导航栏链接,版权信息...理由如下: 当鼠标悬停在未访问接上时,:link 和 :hover 都会命中,如果 :hover :link 之前声明,那么(:hover)就会被覆盖; 当鼠标悬停在已访问接上时,:visited

2.3K20

BuildAdmin17:一个按钮实现网页全屏,vue是如何做到

前言之前十几篇文章,整个BuildAdmin后台管理系统完成了layout布局、菜单栏、tabs标签栏设计,那么后端管理系统整体框架最后一个部分就是导航菜单栏。...tab栏左侧,导航菜单栏右侧,BuilderAdmin,一个设计了7个功能模块。7个按钮分别对应是:回到首页、中英文切换、浏览器全屏、运行终端命令、清除缓存、个人信息、系统设置。...回到首页这个模块还是比较简单BuildAdmin这个回到首页功能是:打开一个新标签页,回到BuildAdmin官网首页。...实现原理就是点击一下,跳转到BuildAdmin首页,也就是一个\标签。vue架构,使用router来实现跳转。在这里设计是回到/首页,也就是dashboard。...但是有担心误点击导致数据丢失,所以保持当前标签页不变动,新标签页回到首页。

48221

用AI快速生成一个网页(名侦探柯南~灰原哀主题网页),适合大学生web期末大作业

导航区域导航栏最右侧超出导航栏,高60px,宽度500px,里面是5个导航菜单项横向排列,每个宽度100px,高60px。...导航栏背景颜色为#D7719B,字体大小为24px,链接颜色为白色,鼠标悬停时菜单项背景色变为橙色。以下是使用 HTML 和 CSS 实现上述要求导航栏示例代码:HTML:<!...: orange;}在上述代码,我们使用了 HTML 创建了一个导航栏,其中包含一个背景颜色为#D7719B容器nav-bg和一个包含导航菜单项容器nav-links。...链接文本颜色为白色,当鼠标悬停时,背景颜色会变为橙色。通过使用 CSS,我们可以美化和定制导航栏外观,使其符合我们需求。你可以根据自己喜好进一步调整样式,例如更改颜色、字体、边框等。...例如,你可以添加更多样式规则来调整卡片布局、颜色、字体等。此外,确保将图片文件正确放置相应路径,以便在页面上正确显示图片。

13810

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

举个例子,WCAG准则2.3.2规定:网页包含任何闪光超过3次/秒内容。 用户应该能够使用台式机/笔记本电脑上键盘以及移动设备或平板电脑上触摸屏来操作输入。...在下面的图中,模拟了两个按钮不同情况。左侧,按钮更小,更远,用户需要更多时间与它互动。右侧,按钮大小更大,更接近于它同级输入元素,这将使交互更容易、更快。 ?...鼠标悬停在按钮上,光标仍然是一个指针,这很好。不过,也可以选择文本和悬停时,有一个文本光标!如果使用了正确元素,就不会发生这种情况。 ?...章节标题 某些情况下,需要在章节标题远端添加“查看更多”按钮或箭头。 在下面的示例将箭头放置假圆,以便可以正确地使箭头居中。...在下图中,菜单按钮添加了:after伪元素: .menu-2:after { content: ""; position: absolute; left: 55px; top: 0

4.7K20

【建议收藏】用AI快速生成一个网页(名侦探柯南~灰原哀主题网页),适合大学生web期末大作业

导航区域导航栏最右侧超出导航栏,高60px,宽度500px,里面是5个导航菜单项横向排列,每个宽度100px,高60px。...导航栏背景颜色为#D7719B,字体大小为24px,链接颜色为白色,鼠标悬停时菜单项背景色变为橙色。 以下是使用 HTML 和 CSS 实现上述要求导航栏示例代码: HTML: <!...{ background-color: orange; } 在上述代码,我们使用了 HTML 创建了一个导航栏,其中包含一个背景颜色为#D7719B容器nav-bg和一个包含导航菜单项容器nav-links...链接文本颜色为白色,当鼠标悬停时,背景颜色会变为橙色。 通过使用 CSS,我们可以美化和定制导航栏外观,使其符合我们需求。你可以根据自己喜好进一步调整样式,例如更改颜色、字体、边框等。...例如,你可以添加更多样式规则来调整卡片布局、颜色、字体等。此外,确保将图片文件正确放置相应路径,以便在页面上正确显示图片。

9510

网站预加载 JS 脚本 instant.page 使用方法

不知道各位是都了解 instant.page 网站预加载脚本,至少是不知道之前接触过“dns-prefetch”标签,也部分模板集成了接口,昨天看彧繎博客发现这个这个 instant.page...小朋友你四四有很多问号?于是乎就度娘了一下,发现它作用是可以预加载,用户想访问页面,用户点击网站链接之前,他们将鼠标悬停在该链接上。...效果演示 经过测试,发现 instant.page 对站内访问速度提升的确很给力。然而它只会预加载自己站内链接,而不会预加载其他外。... 添加 data-instant-allow-query-string 属性 局部允许:使用标签添加 data-instant 属性(和白名单属性一样) 仅预加载部分指定链接(白名单模式...):如果只想预加载特定链接,请在  添加一个 data-instant-whitelist 标签,并通过向其添加 data-instant 属性来标记要预加载链接。

1.7K30

layui三级菜单渲染

今天给大家讲解一下layui三级动态加载菜单含后端代码。 是最近刚学layui,非常感谢贤心大神。开发出这么牛逼ui框架。...声明:KingYiFan前段是渣渣,本次讲解用前端js并非KingYiFan亲自封装只是稍作修改,非常感谢封装三级菜单CSDN大神:yufengaotian 下图就是三级菜单效果。...为什么要讲这个呢。 ? yufenggaotian大神也博客写道这个问题就借用一下: ? (图来着yufenggaotianCSDN博客) 前端页面: //直接上代码吧 <!...有什么不懂可以跟我联系。 ---- 感谢一路支持的人。。。。。...Love me and hold me QQ:69673804(16年老号) EMAIL:69673804@qq.com 友交换 如果有兴趣和本博客交换友的话,请按照下面的格式评论区进行评论,我会尽快添加上你链接

2.4K10

【魅力网页背后】:CSS基础魔法,从零打造视觉盛宴

"text/css"这条属性,用于告诉浏览器这里是什么格式代码,但是HTML5规范可以不用写。...ID选择器(ID Selector): 使用#加上ID名来选择具有该ID元素,如 #my-id 会选中id="my-id"元素。ID文档应该是唯一。...伪类选择器(Pseudo-class Selector): 用来选择元素特定状态,如 a:hover 选择鼠标悬停在链接上状态。...❤️id与class命名 id命名唯一,单个标签不允许拥有多个id名,同页面不存出现重复id名(id重名会影响js代码获取标签) class命名唯一,单个标签可以拥有多个class名,不同标签允许使用相同...HTML,像素(px)是一种常用长度单位,用来指定元素宽度、高度、边距、填充等尺寸。

11410

为什么区块会有如此强大生命力?(下)

接上一篇文章中举摇奖例子 ,我们追问:为什么区块技术能节约成本?能节约多大成本?节约成本有什么好处?原来系统为什么成本高?成本高什么地方?...能节约成本原因就是:自证清白。 而节约成本就是收益啊!能自证清白区块系统能将摇奖成本降低到几乎为零。你说有没有生命力? 我们再追问:为什么这个体制就能自证清白而原来机制就不能自证清白?...金融必将是区块颠覆第一个行业,而且现有的金融中心机构已经感受到了区块威胁,而且是降维打击。 公益:人们对公益最大怀疑就是钱用在哪儿了。...平台运转每笔善款都是一个包裹,投递过程,经过每个邮寄节点都会被盖上邮戳,每个邮戳都可以被公开查询。...比如你淘宝购物,你阿里就有数据,你用微信消费,腾讯有就你有信用数据,但这两个数据就是孤立共享,还有国家征信中心数据,都不共享数据。

58120

JavaScript 鼠标悬停图片,显示隐藏文本

图片 当我们浏览网页时候,描述性文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样好处是,以突显图片为主,并节省布局空间 HTML 结构如下 <div id="content...{width:280px;float:right;color:#993300;font-size:12px;} #footer div.footer-<em>nav</em> ul li{list-style:none;...float:left;margin-top:10px;} 引入 jQuery 库,通过$(this)获取到鼠标所悬停<em>的</em>li元素, 第一个function实现了<em>鼠标悬停</em>在上面的效果,第二个function...).hover(function(){//<em>鼠标悬停</em>在上面实现什么效果 $(this).find("div").stop().animate({ "bottom":...,源码已经发到了 GitHub Source_code 上了,有需要同学可自行下载,预览效果可点击 effect

4K40

CSS第二天

CSS第二天 ---- 选择器进阶: 选择器 作用 格式 示例 ⭕后代选择器 找后代 选择器之间通过 空格 分隔 .nav .mark { css } 子代选择器 找儿子 选择器之间通过 > 分隔 .nav...} ⭕hover伪类选择器 选中鼠标悬停在元素上状态 :hover a:hover { css } 选择器注意点: 后代选择器:选择器与选择器之前通过 空格 隔开 子代只包括:儿子 并集选择器:...每组选择器可以是基础选择器或复合选择器,每组选择器通常一行写一个,提高代码可读性 交集选择器:如果有标签选择器,标签选择器必须写在最前面 hover伪类:鼠标悬停在元素上状态,设置样式 ---- Emmet...、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…… ②行内元素:display:inline 一行显示多个 默认宽度/高度是内容高度和宽度 不能设置高度和宽度...important写在属性值后面,分号前面!!important不能提升继承优先级,只要是继承优先级最低!实际开发建议使用 !important 。

1.3K10

为什么样式不起作用?

问题描述:一个react父子组件demo,实际效果与书写样式不太一样。 问题复现 直接上代码描述问题: 1....传统 web 开发,最为头痛莫过于处理 CSS 问题。因为全局性,明明定义了样式,但就是生效,原因可能是被其他样式定义所强制覆盖。...css浏览器解析原则 看一个例子: .nav h3 span {font-size: 16px;} 我们不知道规则情况下,我们是这样猜测,按照常人思维从左到右。...先是找到.nav,然后向下匹配所有的h3和span标签。如果在向下匹配过程,没有匹配上则回溯到上一级继续匹配其他子叶结点。...最后 文章首发于:为什么样式不起作用? 参考:浏览器渲染原理与过程 参考:CSS选择器从右向左匹配规则 DEMO地址

4.2K20

博客园美化

博客园允许用户设置多样化主题。通过选择皮肤,然后开启JS脚本权限,设置里面植入跟皮肤配套CSS、JS,并且禁用默认CSS,即可实现个性化界面风格和交互行为。...页面定制CSS代码 这里选择是 Cnblogs-Theme-SimpleMemory V2.1.0 版本 @import url(https://cdn.jsdelivr.net/gh/BNDong.../Cnblogs-Theme-SimpleMemory@2.1.0/dist/simpleMemory.css); 注意: 页面定制CSS代码使用是外导入形式(免费jsdelivr cdn...(个人,可以自己建一个iconfont项目维护使用) fontIconExtend: "//at.alicdn.com/t/c/font_3603036_keyavmcqbhn.css"...加载 js 脚本,要和 上一步CSS外同一个版本(这里是V2.1.0),否则可能会生效或者出现别的问题 最后 主题相关文件(css\js等)可以自己托管维护,可以自行扩展界面交互 图片等静态资源可以自行寻找免费图床

94630
领券