超级管理员

网上看过很多 Switch 的例子,很多还需要额外的 label 或者 i 标签配合来实现,看到有个完全使用 CSS3 来实现的例子。只使用 CSS3 的伪类就可以实现。HTML: input type="checkbox" class="switch" input type="checkbox" class="switch" checked input type="checkbox" class="switch" disabled input type="checkbox" class="switch" checked disabled CSS.switch { box-s

2022-03-08    CSS    前端    338
超级管理员

一,放大图标方法一:直接修改图标的 font-size。方法二:使用 transform:scale(1.5) 放大图标,需要注意有时在 iconfont 上是无效的,因为 transform 只能使用在块状元素上。比如:display:block 或者 display:inline-block。二,图标位置图标和文字往往不在一条基线上,常常需要调整 iconfont 图标的位置,最简单的方法是:.some-div .iconfont{ position: relative; top:0.1rem; } 另一种方法是使用 vertical-align 属性设置元素的垂直对齐方式。该属性

2022-03-01    CSS    293
超级管理员

媒体查询(Media queries)非常实用,尤其是当你想要根据设备的大致类型(如打印设备与带屏幕的设备)或者特定的特征和设备参数(例如屏幕分辨率和浏览器视窗宽度)来修改网站或应用程序时。使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。媒体特性(Media features)描述了 user agent、输出设备,或是浏览环境的具体特征。媒体特性表达式是完全可选的,它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。最常用的媒体特性肯定就是“width"了。今天介绍的这个 CSS

2022-02-22    CSS    331
超级管理员

SVG 的知识基础你可能学习过关于 SVG 的基础知识,并且能读懂 SVG 的结构。至少你知道:SVG 元素: svg , symbol , g , path SVG 属性: d, fill, stroke, stroke-width注意:从绘图工具中导出的 SVG 经常带着一些不必要的内容和标签等(其中 d 下面包含了清晰的路径数据),可以使用工具比如 SVGOMG ,然后比较一下处理前后哪些东西是移除或简化过的。移除颜色数据通常单色图标的源文件中, path 的颜色都是黑色 #000000。并且没有 fill 属性。如果我们在 SVG 文件中设置了 fill 属性,就不能通过 CSS

2021-12-24    CSS    208
超级管理员

iconfont.cn 官方给我们讲解 iconfont 的实现原理。字体内部我们来看下一个字体的样子。我们可以通过一些软件打开字体,比如fontforge,fontlab。比如下面的方正大草字体:我们打开看下:可以看到“我”这个字对应的的图形就是我们在网页上看到的样子。另外注意左上角的unicode。是6211,也就是我们的另一种表现形式。再双击可以看到我这个图形的样子:其实就是一些路径。而这个路径可以用ai,ps,sketch等等来画,画完粘贴到这里。iconfont1.0所以我们就可以做一些事情了,我们可以去改造字体,把一个字对应的图形换成我们设计师设计的样子,处理好兼容性就成了我们ic

2021-12-24    CSS    220
超级管理员

蛮荒时期 CSS Sprites在很久很久以前,使用图标一般是直接使用图片,或者使用雪碧图。缺点是颜色单一,难以维护。//CSS [class^="icon-"],[class*=" icon-"] { display: inline-block; width: 14px; height: 14px; margin-top: 1px; *margin-right: .3em; line-height: 14px; vertical-align: text-top; background-image: url(bootstrap/img/glyphicons-h

2021-12-21    CSS    207
超级管理员

node-sass 的问题之前一直用的是 node-sass,他包含两部分,一个是使用 Node.js 编写的包裹器 Wrapper,一个是使用C++编写的 Sass 编译器 libsass,最开始是不同平台编译这个编译器麻烦,后来node-sass就直接发布各个平台编译好的编译器了。在国外就解决了编译的问题。在国内因为下载源被墙,所以常出现各种安装失败。http://127.0.0.1:3001/articles/657http://127.0.0.1:3001/articles/631sass 官方主推 dart-sassdart-sass是Sass的主要实现,它快速,易于安装,并且可以编

2021-12-17    CSS    244
超级管理员

一,流光按钮 CSS 样式.btn{ width: 100px; height: 50px; border-radius: 50px; text-align: center; background-color:aqua; line-height: 50px; background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE); background-size: 400%; } @keyf

2021-09-22    CSS    534
超级管理员

方法一,基本方法为每一份主题写一份 CSS 文件,批量替换颜色,例如 style.css、style.dark.css。如果需要切换模式的花,只需要 改变 link 指向的 CSS 文件路径。方法二,使用 SCSS 等工具引入颜色变量在方法一的基础上,生成多个 CSS 文件路径。方法三,使用CSS自定义属性(变量)CSS 原生变量支持,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。属性名需要以两个减号(--)开始,大小写敏感,属性值可以是任何有效的CSS值。和其他属性一样,

2021-07-16    CSS    685
超级管理员

实现瀑布流有两种方法。HTML: div class="media-list waterfall" style="height: 100px;" div class="media-image" img src="images/img-1.jpg" /div div class="media-image" img src="images/img-2.jpg" /div div class="media-image" img src="images/img-3.jpg" /div div class="media-image"

2021-06-01    CSS    426
随机推荐
在PDO中使用事务
jQuery Mobile弹出对话框后不刷新原页面,保持原页面内容不变
NodeJs通过async/await处理异步
使用N-API 写 Node.js 的 C语言扩展
mobiscroll时间选择器
thinkphp5 r4控制器中无法使用header进行跳转
php 将字符串按大写字母分隔成字符串数组
Apache Rewrite实现URL的跳转和域名跳转
“关于”中故事删减之前
Sequelize 事务的使用与Transaction类
QQ号

微信联系我

夜间模式切换
回到顶部