为您找到搜索结果：1786个
哀悼疫情，全站灰色如何实现，CSS滤镜一行代码实现
/向抗疫英雄致敬！ 今日打开各样的app，各大电商，爱奇艺都是灰色的这里我也一直很好奇该功能，前端如何实现，了解过后发现这个CSS滤镜，点击了解更多 写下随笔记录一波 如果去实现，作为程序员，copy能力，搜索能力肯定不能弱(~~此处调侃而已)，一定要有洞察力，对不?直接F12，瞧瞧看，到底肿么费事。能控制整站，肯定是根元素，直接从body找，我们发现一个filter(滤镜)属性，去掉后发现网站恢复了 好起来了，是不，显而易见！这里说一下filter:grayscale(100%);和filter:grayscale(1);效果是一样的，百分比的话就可以根据百分比去调节了filter:grayscale(100%);filter:grayscale(90%);filter:grayscale(80%);filter:grayscale(70%);filter:grayscale(60%);filter:grayscale(50%); 写个脚本遍历所有的属性，并都看看效果：consturl="http://www.51dev....
6种css3 transform图片悬停动态效果
html骨架代码<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><!--<metaname="viewport"content="width=device-width,initial-scale=1.0">--><title></title><linkrel="stylesheet"href="css/css3.css"/></head><body><figureclass="one"><imgsrc="img/img01.jpg"/><figcaption><h2>移动效果标题</h2><p>移动效果一</p><p>移动效果二</p><p>移动效果三</p></figcaption></figure><figurecla...
CSS 实现关闭按钮 X
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><style>.close{background:orange;color:red;border-radius:12px;line-height:20px;text-align:center;height:20px;width:20px;font-size:18px;padding:1px;top:-10px;right:-10px;position:absolute;}/*usecrossasclosebutton*/.close::before{content:"2716";}</style><body><div><spanclass="close"></span></div></body></html> 保存html文件...
css学习之样式层级和权重
第一种情况当选择器相同的情况下，引入方式的前后，决定页面最后的效果---------外部在最后面显示---------内部在最后面显示第二种情况引入方式相同时候，则是按照权重取最大(取权重最大值显示)去确定最后样式(此处以外部样式为例子) 选择器 权重id100类10元素1继承0.5 例子二虽然其他的很精确，但是权重还是id的最大，所以显示为id选择器属性 第三种情况 如果引入方式和选择器相同，则按最后的样式为主 第四种情况就是!important会使用这个样式 浏览器默认的样式<网页制作者样式<用户自己设置的样式<!important ...
CSS3 使用 calc() 计算高度 vh px
1、px 像素，我们在网页布局中一般都是用px。2、百分比 百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。3、Viewport viewport：可视窗口，也就是浏览器。 vwViewport宽度，1vw等于viewport宽度的1% vhViewport高度，1vh等于viewport高的的1%CSS3使用Calccalc()使用通用的数学运算规则，但是也提供更智能的功能： >使用“+”、“-”、“*”和“/”四则运算； >可以使用百分比、px、em、rem等单位； >可以混合使用各种单位进行计算； >表达式中有“+”和“-”时，其前后必须要有空格，如"widht:calc(12%+5em)"这种没有空格的写法是错误的； >表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。 &nbs...
vue中安装sass后页面中引用scss报错“Module build failed: TypeError: this.getResolve is not a function at Object.loader”
解决方法和原因如下当我在vue页面使用scss 使用到scss时候就会报错 运行scss的依赖都安装好了 原因其实很简单sass-loader版本有问题换成7.0.0版本就好 在webpack.json中重新改一下版本，然后重新npmi一下就可以 ————————————来源：https://blog.csdn.net/qq_43504375/article/details/100586410...
css笔记：清除子元素对父元素的浮动效果的三种方法
对于浮动元素，我们知道如果父元素不设置height，而子元素全部设置为浮动，父元素不会被撑开(也就是父元素为一条直线，height为0)，我们看到的就是一条线在所有子元素上面。例如：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>clear_float</title><style>#father{border:1pxsolid#000;background:#ccc;}.child{width:100px;height:100px;background:red;float:left;margin-top:10px;margin-left:10px;}</style></head><body><divid="father"><divclass="child">child1</div><divclass="child">child2</div...
CSS选取第几个标签元素：nth-child、first-child、last-child
1、first-childfirst-child表示选择列表中的第一个标签。代码如下：li:first-child{background:#090}上面的意思是，li列表中的第一个li模块的背景颜色。2、last-childlast-child表示选择列表中的最后一个标签，代码如下：li:last-child{background:#090}3、nth-child(3)表示选择列表中的第3个标签，代码如下：li:nth-child(3){background:#090}上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。4、nth-child(2n) 这个表示选择列表中的偶数标签，即选择第2、第4、第6……标签。5、nth-child(2n-1)这个表示选择列表中的奇数标签，即选择第1、第3、第5、第7……标签。6、nth-child(n+3)这个表示选择列表中的标签从第3个开始到最后。7、nth-child(-n+3)这个表示选择列表中的标签从0到3，即小于3的标签。8、nth-last-child(3)这个表示选择列表中的倒数第3个标签。——————...
CSS3选择非first-child第一个子元素
有时候我们需要用CSS选择非第一个子元素，例如下面这样的HTML，希望让两个span之间间隔一定的距离，但又不希望简单的给每个span设置margin-right（会导致最后一个span也有margin-right，可能影响之后元素的排版）。这时如果能排除第一个元素，并给其他元素设置margin-left属性，就能实现比较好的效果了。可以利用not和first-child，通过下面的CSS实现。div > span :not(:first-child) {margin-left:10px}还可以利用兄弟元素选择器+，像这样：div > span + span {margin-left:10px}如果HTML是这样的，应该怎么做呢？其实也很简单，用通配符就可以了：div > * :not(:first-child) {margin-left:10px} ----------------------链接：http://bl...
css 盒子模型理解
盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^，希望对初学者有用。一、css盒子模型概念CSScss盒子模型又称框模型(BoxModel)，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图： 图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。那么，元素框的总宽度=元素（element）的width+padding的左边距和右边距的值+margin的左边距和右边距的值+border的左右宽度；元素框的总高度=元素（element）的height+padding的上下边距的值+margin的上下边距的值＋border的上下宽度。二、css外边距合并（叠加）两个上下方向相邻的元素框...
css sticky footer布局实现方式
什么是cssstickyfooter我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时，页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Stickyfooter布局。是不是很容易理解。方法一：使用负margin方式实现html代码1<divclass="wrapperclearfix">2<headerclass="header">3头部内容4</header>5<divclass="mian">6<divclass="main-content"></div>7</div>8<footerclass="footer">9底部内容10</footer>11</div> css样式1.wrapper{2position:fixed;3width:100%;4height:100%;5back...
常用css reset
1、EricMeyer’s“ResetCSS”2.01/**2*EricMeyer'sResetCSSv2.0(http://meyerweb.com/eric/tools/css/reset/)3*http://cssreset.com4*/5html,body,div,span,applet,object,iframe,6h1,h2,h3,h4,h5,h6,p,blockquote,pre,7a,abbr,acronym,address,big,cite,code,8del,dfn,em,img,ins,kbd,q,s,samp,9small,strike,strong,sub,sup,tt,var,10b,u,i,center,11dl,dt,dd,ol,ul,li,12fieldset,form,label,legend,13table,caption,tbody,tfoot,thead,tr,th,td,14article,aside,canvas,details,embed,15figure,figcaption,footer,header,hgroup,16menu,na...