css
文章平均质量分 73
神影天初
这个作者很懒,什么都没留下…
展开
-
CSS伪类介绍
表示设置了 checked 属性的 checkbox 和 radio 元素,设置了 selected 属性的 option 元素,表单的默认提交按钮(type=submit)。link 是链接的初始状态,visited 是链接访问过(点击)之后的状态,hover 是鼠标悬停的状态,active 是激活状态(鼠标主键按下及松开之间的状态)。因为索引是从 1 开始,所以同级兄弟元素的第一个元素就是奇数 1。css伪类就是元素的一种特殊状态,下面的伪类是相关的,可以尝试其中的示例代码看看实际效果。原创 2022-09-20 17:54:41 · 1134 阅读 · 0 评论 -
伪类与伪元素
文章目录伪类与伪元素比较常见伪类常见伪元素伪类与伪元素比较伪类伪元素使用:使用::,为了兼容也可以使用:代表元素的某个状态信息表示元素的某个部分,通常是实际存在的常见伪类通用:hover:root锚点相关:link:active:visited元素相关:empty:only-child:only-of-type:not():first-child:first-of-type:last-child:last-of-type:n原创 2022-03-27 18:39:03 · 648 阅读 · 0 评论 -
原生js处理多行文本溢出
文章目录介绍示例介绍目前文本溢出的处理可以使用css实现单行及多行溢出显示省略号,但是兼容性可能不太好。最近我发现一个兼容性比较广的方法,那就是getClientRects,大家可以点击链接查看完整的介绍。这里简单介绍一下,对于块元素没什么好说的,主要是对于行内元素(比如a,span)会将每一行文本的位置信息作为ClientRect对象返回,主要包含left,top,right,bottom,width,height等属性。示例<div class="box"> <原创 2022-01-20 12:31:48 · 1520 阅读 · 0 评论 -
计算元素的位置
元素位置的计算主要是一个相对的概念, 相对于父级元素, 相对于父级定位元素, 相对于body等.所以元素分为了定位元素(position: 不是static)和普通元素(postion: static)滚动元素是普通元素的一种, 由于父级元素框架限制, 而内容溢出导致的首先说一下屏幕, window.screen返回的对象就是你的屏幕信息参数{ availHeight: 834, availLeft: 0, availTop: 0, availWidth:原创 2020-09-06 09:36:55 · 751 阅读 · 0 评论 -
原生实现滑动条效果
实现效果类似如上:html:<input type="range" min="0" max="1" value="0.1" step="0.01" id="range"><span class="val" style="width: 20px;height: 20px;display: block;margin: 20px;"></span>...原创 2020-03-31 09:23:26 · 291 阅读 · 0 评论 -
实现简单的进度条效果
封装一个简单的jquery插件,实现简单的可滚动进度条。可能一些情况没有考虑到,仅供参考。(function ($) { $.fn.sliderProgress = function (options, actions) { var defaults = { width: 200, // 这是宽度 height: 10,...原创 2020-03-24 15:14:40 · 226 阅读 · 0 评论 -
jquery简单实现无缝可滑动轮播图
话不多说,直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...原创 2020-03-20 09:34:13 · 376 阅读 · 0 评论 -
css实现多级导航
看了bootstrap的以及导航条,发现只能点击到二级导航,最近需要三级甚至n级的,就自己研究了一下.bootstrap的导航条https://v3.bootcss.com/components/#navbar.我自己完成的效果html:<!DOCTYPE html><html lang="en"><head> <meta...原创 2019-09-04 10:35:18 · 1392 阅读 · 0 评论 -
iOS页面不滚动
可以参考:https://www.cnblogs.com/xiahj/p/8036419.html我因为设置了底部固定定位导致页面不滚动,页面可以上拉但是又会回弹,不能在底部停下。我的解决方法(尽量用在可以滚动的页面):底部固定定位不变,上面部分不设置其它定位,然后因为上面的部分需要滚动,所以最外层设置.outer { height: 100%; padding-...转载 2019-04-16 17:31:09 · 652 阅读 · 0 评论 -
抽屉效果的轮播图
效果如上使用css,通过计算,实现上面的动画效果。代码:<style> * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } ul { list-style: none; ...原创 2019-02-28 15:36:18 · 564 阅读 · 0 评论 -
margin设置百分比
margin设置百分比是基于父容器的宽度,所以无论是margin-top还是margin-bottom都是基于父容器的宽度。看如下示例:<style> .fu { width: 400px; height: 300px; background: blue; overflow: hidden; }...原创 2019-01-23 13:32:07 · 3942 阅读 · 0 评论 -
css垂直水平居中
已知子元素宽高为100pxhtml代码1:<div class="fu"> <div class="zi"></div></div>css代码1:.fu { position: relative; width: 600px; height: 400px; background: blue;...原创 2019-01-24 10:52:20 · 141 阅读 · 0 评论 -
溢出文本显示省略号
单行文本溢出显示省略号需要文本定宽,overflow设置溢出文本不显示,white-space处理元素内的空白,这里是设置不换行,text-overflow设置文本溢出时的处理,这里是显示省略号。p { width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;...原创 2018-12-26 14:24:51 · 200 阅读 · 0 评论