应用场景：在点击input输入框的时候展示菜单，点击其他部分则关闭菜单。那么在点击菜单部分的时候也算在input框外部，但是此时不能关闭菜单所以要防止关闭菜单。...节点操作（5）beforeUpdate()在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。在工作中，这个钩子函数我没怎么运用过。...布局样式 -父相对子绝对在flex布局的时候，不能越级进行定位例如 定位了，可以父亲相对定位。儿子相对定位，但是通过margin等来调整样式。在孙子标签内绝对定位。...类所在的标签下，如果鼠标悬停，那么类hover-image对应的标签的样式.image-container:hover .image:not(.hover-image)表示：在image-contianer
实现思路： 垂直列表下拉导航采用无序列表嵌套定义的方式实现，嵌套ul作为二级子菜单；一级菜单中定义li为浮动元素且向左浮动，并保证在一条水平线上。...:#000000; } 当鼠标悬停于一级菜单时，使用display：block；显示嵌套的无序列表。...1.5个字宽*/ } 定义嵌套ul 的样式规则时，需要设置ul为绝对定位，并脱离标准文档流，否则一级菜单宽度将被改变 本章总结 在这一章里制作2个垂直方向的导航菜单。...（3） 通过粗边框的颜色设置可以产生出斜角效果，如果充分利用可以产生有趣的效果。 （4） 为了防止鼠标指针经过时造成边框的跳动，可以在通常状态添加与背景色相同的边框。...为了使某个盒子绝对定位，它的上一级元素可以设为相对定位，从而变成“包含块”。
，每个超链接文本前后添加绝对定位的 span标签，以设置左右箭头span标签在链接状态下隐藏、悬停状态下显示。...实现思路： 垂直列表下拉导航采用无序列表嵌套定义的方式实现，嵌套ul作为二级子菜单；一级菜单中定义li为浮动元素且向左浮动，并保证在一条水平线上。...:left;}.menu li ul a:hover{background:#949494;color:#000000;}当鼠标悬停于一级菜单时，使用display：block；显示嵌套的无序列表。...:left;border-left:1pxsolid white;line-height:1.5em;/*设置高度为1.5个字宽*/} 定义嵌套ul 的样式规则时，需要设置ul为绝对定位，并脱离标准文档流...（3） 通过粗边框的颜色设置可以产生出斜角效果，如果充分利用可以产生有趣的效果。 （4） 为了防止鼠标指针经过时造成边框的跳动，可以在通常状态添加与背景色相同的边框。
在文章开始之前，推荐一些很值得阅读的好文章！感兴趣的也可以去看一下哦！...右键菜单与弹窗：交互体验的强化在多功能图片库中，右键菜单的存在是不可或缺的交互功能之一。当用户点击右键，菜单以绝对定位的方式精确地出现在鼠标所在位置，提供删除、编辑等快捷操作。...'px', left: contextMenuPos.x + 'px' }"> ul> 删除图片 ul>定位的背景，配合透明的暗色遮罩，既能凸显图片主体，又避免了背景内容分散用户注意力。....showPreview 为 false，实现关闭效果，同时避免用户误操作带来的体验下降。
*/ div ul{ position:absolute; /* 菜单ul绝对定位 */ top:0; left:0;...*/ div ul{ position:absolute; /* 菜单ul绝对定位 */ top:0; left:0;...每个页面至少需要一次回流，就是在页面第一次加载的时候。 重绘 当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。...透明度（opacity）不会触发重绘 实际上透明度改变后，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。...不过这个前提是这个被修改 opacity 本身必须是一个图层，如果图层下还有其他节点，GPU也会将他们透明化 总结 最开始的问题，一般是会出现在做一些鼠标悬停特效的时候，鼠标悬停，出现一个div，或者
-- 行内样式：在标签元素内，编写一个style属性，编写样式 优先级 行内>内部>外部 （错误！） 就近原则，谁离得近就是谁，外部导入的位置 or 覆盖原则？...[class]~p{ background: yellow; } 结构伪类选择器 /*选择ul的第一个子元素*/ ul li:first-child...{ background: green; } /*选择ul的最后一个子元素*/ ul li:last-child{...绝对定位 仍然基于xx定位 position: absolution 没有父级元素定位的前提下，相对浏览器定位 父级元素存在定位，会相对于父级元素进行偏移 在父级元素范围内移动（好像可以出去？）...绝对的，不保留原来位置。 固定定位 position: fixed; 固定定位是固定在某个地方，浏览器向下移动页面也不动； 绝对定位是会动的。
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率...外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 css 层叠样式表 如一个div元素可以添加多个样式，一个样式可以重复添加在一个元素上，以优先级最高|最近的为主 css 的使用方式；...{样式} 同时选中以上不同选择器作用到的元素设置样式 后代选择器： 父集元素 空格 子集元素{样式} 伪类选择器： :hover 当鼠标悬停在内容上时，显示出不同的样式 :nth-child...：position absolute 绝对定位 子父集定位：如果父级身上有设置position:relative,那就相对于父集定位 相对窗体定位：如果父集身上没有position:relative，...那相对于窗体绝对定位 fixed 固定定位 相对于窗体定位一个位置，永远不改变 如： #box{ width:800px; height
盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上。 line-height: 40px; 文字，是在自己的行里面居中的。比如说，现在的文字字号为14px，行高为24px。...为了防止用户电脑里面，没有微软雅黑这个字体。...2、:visited表示，用户访问过这个链接的样式，是英文“访问过的”意思。 3、:hover表示，用户鼠标悬停的时候链接的样式，是英文“悬停”的意思。...4.2 不脱标，老家留坑，形影分离 相对定位不脱离标准流，其真实的位置还是在老家里，只不过影子出去了，可以到处飘。 4.3 相对定位用途 相对定位有坑，所以一般不用于做“压盖”效果。...5 绝对定位 绝对定位要比相对定位更灵活。 5.1 绝对定位脱标 绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不准守。
由于 HTML 元素包含打开和关闭标签，以及介于两个标签之间的内容，一个子元素的关闭必须结束于父元素之前。 上述代码是不合法的，因为 标签打开在 标签之后（因此 被认为是 的子元素），所以 必须在 元素关闭之前关闭...CSS 不仅仅可以用于修改文本的颜色、大小、字体等，还可以用来定义高度、宽度、内部和外部的边距、位置等。 我在哪里写 CSS？...这样可以防止所有其他链接（不在标题中）受到影响。 伪类选择器 HTML 元素可以具有不同的状态。最常见的情况是当您将鼠标悬停在链接上时。当此类事件发生时，CSS 中可能会应用不同的样式。...*/ position:absolute;/*绝对定位*/ position:fixed;/*固定定位*/ z-index:1;/*设置层叠元素的上下位置*/ background-color
在我们日常浏览网站过程中，会发现每一个网站都会有导航栏，导航栏是做什么的？在一个网站中具有怎么样的意义呢？我们先来了解一下这个问题。...实现原理 一级导航的实现是非常简单的，我们直接通过经典的ul、li模式去实现即可，这里面不做太多的说明了。 二级导航主要是基于一级导航进行父子层级操作。对顶级的ul进行绝对定位操作。...对子集进行相对定位操作。具体的实现方式可通过代码查看，不做过多的文字描述。 对链接的动画效果使用了一个鼠标指针浮动在元素上时，将背景色和文字颜色调换操作。也是比较简单的效果。 代码部分 定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。...3、CSS锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
method提交方法get和post 5.0之前没有placeholder新增功能，之前是value（提示的文字需要用户删除，而且字的颜色也没有变暗）实现的 -- type属性取值不同则功能不同...在写标签的时候，提前写好，否则在加选择器的时候，推广改掉之后，你的属性都会变，省去麻烦。...固定定位和绝对定位最大的区别就是，设置了固定定位的元素不变化，但是网页其他内容会动。就好像网站里面，那些讨人厌的小广告，好像粘在了屏幕上一样，一直不改变位置。...2、****父级绝对导致居中不生效 -- 绝对定位标签水平垂直居中 3、定位的标签z-index改变显示顺序 4、opacity测试内容和背景透明...-- 工作中：相对和绝对配合使用： 子级绝对，父级相对 --> 定位默认后来者居上 z-index，取值是整数，取值越大显示顺序越靠上 --> <!
，它的height默认值为auto，此时，它的高度不会计算不考虑浮动元素；由于ul里面只有li元素，所以会导致一个悲剧，ul元素的height为0 高度坍塌解决办法： （在html中，我给ul元素一个类选择器...= 内容区 + 填充区 边框盒 border-box = 内容区 + 填充区 + 边框 所以效果上来看就是：一级菜单中的5个元素，在水平方向上各占20% 我给一级菜单的li元素还设置了一个属性：相对定位...它是用来把一级菜单的li元素的内容盒给二级菜单作为包含块的： 包含块：决定了盒子的排列规则 将二级菜单的元素设置为绝对定位position: absolute; 绝对定位元素的包含块：找祖先元素中第一个定位元素...一般，页面上只显示一级菜单，需要点击一级菜单，才会出现相应的二级菜单 需要用到伪类:hover 鼠标悬停在元素上时的样式 （在html中，我给一级菜单的第四个li元素设置了一个选择器.submenu...中书写选择器时，比如： nav .topnav>li:hover 选中nav元素下的.topnav元素的子元素li，并且有鼠标悬停在上面 空格，选后代元素 >，选子元素 自此，本文结束，虽然比较简陋，但是二级菜单的基本结构是搭建起来了
声明块里的最后一个声明结束的地方，不需要加分号，但是最后加分号是个好习惯，因为可以防止在后续增加声明时忘记加分号。 ? 注意： 块有时候是可以嵌套的。...这种情况下，每一对括号必须逻辑上嵌套，跟嵌套 HTML 元素的标签嵌套方式相同。...规则的嵌套块，只有在特定条件匹配时才会应用到文档上。...伪元素（Pseudo-elements）： 匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。... 属性里 1 0 0 0 1000 在我们继续之前，让我们看看一个行动中的例子。
伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...ul> 公式： 还有4的倍数：4n 属性选择器： E[attr] E[attr="val"] 定位： 网页的三种布局方式：标准流、...二、相对定位 占有原来的位置 仍然具有具体标签原有的显示模式特点 改变的位置是参照自己原来的位置 三、绝对定位...绝对定位如何实现居中？...不同定位的层级关系： 相对，绝对，固定默认层级相同 默认情况下，定位的盒子，后来者居上 z-index属性：取值越大
{ /* 第二排搜索栏样式 */ /* 该样式在滑动时 , 始终在最上方显示 */ position: fixed; /* 防止外边距塌陷进行的设置 */ overflow...li:nth-child(1) { /* 关闭按钮 宽度占布局宽度 / 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img {.../* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */ width: 10px; } .app ul li:nth-child(2) { /* 设置 Logo 宽度...10% */ width: 10%; } .app ul li:nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片的宽度是 30 像素...{ /* 插入竖线 */ content: ""; /* 竖线盒子模型 使用绝对定位 */ position: absolute; /* 竖线盒子模型 在 JD
在jQuery中创建二级菜单的显示和隐藏可以通过使用事件处理函数和CSS样式来实现。HTML 结构 首先，需要创建适当的HTML结构来表示二级菜单。一种常见的方法是使用嵌套的ul>和元素。...每个菜单项都包含一个链接，以及一个嵌套的无序列表ul>来表示二级菜单。CSS 样式 接下来，需要使用CSS样式来控制二级菜单的显示和隐藏。可以通过设置样式的display属性来实现。...示例代码如下：nav ul ul { display: none; /* 默认隐藏二级菜单 */}nav ul li:hover > ul { display: block; /* 鼠标悬停时显示二级菜单...然后，通过为父级菜单项设置:hover伪类选择器，当鼠标悬停在菜单项上时，显示相应的二级菜单。...} );});上述示例中，我们使用hover()方法来绑定鼠标悬停事件。
外部父级必须有固定的宽高。 浏览器支持情况 100% 查看本条 caniuse 5....绝对定位元素，使其不占用DOM中的空间 * 浏览器支持程度 100% 需要使用前缀 caniuse(虽然cilp已被废弃，但较新的clip-path 目前对浏览器的支持非常有限。)...使用counters（）函数，可以在不同级别的嵌套计数器之间插入分隔文本。...caninuse - css-variables caninuse - css-transitions 38.悬停阴影动画 在文本上悬停时，在文本周围创建一个阴影框动画效果。 ?...弹出菜单 在悬停和焦点上弹出交互式菜单。 ?
HTML文档类型 目前常用的两种文档类型是xhtml 1.0和html5 xhtml 1.0 xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。...-- 这是一段注释 --> html标签特点： html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的... 绝对路径和相对路径 像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript...绝对地址：相对于磁盘的位置去定位文件的地址 相对地址：相对于引用文件本身去定位被引用的文件地址 绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。... ul> 在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同
水平分割线hr 加粗 b 斜体 i 小字 small 删除线 s 下划线 u 换行 br 在html页面中回车不是换行 只能识别成一个空格 ###列表标签 无序列表 ul:type(控制图标) li...有序列表 ol:type(序号类型) start(起始值) reversed(降序) li 列表嵌套: 有序列表和无序列表可以任意无限嵌套 ###图片标签img src:路径 相对路径:访问站内资源时使用...页面和文件同级目录:直接写图片名 文件在页面的上一级:…/图片名 文件在页面的下一级:文件夹名/图片名 绝对路径:访问站外资源时使用 图片盗链,节省本站资源,但有可能找不到图片(原网站的图片路径发生改变则找不到该图片...) alt: 图片不能正常显示时显示的文本 title: 鼠标在图片上悬停时显示的文本 width/height: 两种赋值方式:1....-- title：鼠标悬停时显示的文本 --> <img width="100
} ul li ul li a{ border-top:1px dashed silver; } /*在鼠标移到li上的时候它下面的ul会显示*/ ul li...布局思路：通过 ul li ul li的嵌套以及使用div 、css 、a三种标签来一起实现二级菜单。 具体步骤如下： 1....首先在body部分用div标签做一个盒子，在盒子内部（div内部） 用“ul>一级菜单ul>”生成一级菜单然， 但是此时所有一级菜单带式竖向排列的，每个一级菜单还需要在...像素大小、背景色文字在框里的位置都得设置好。...3.接着在一级菜单里嵌入二级菜单即ul>一级菜单ul>二级菜单ul>ul> 4.嵌入后接下来控制二级菜单的样式，通过绝对定位使二级菜单出现在一级菜单下然后隐藏即
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
