CSS - JavaScript.net.cn 「线球实验室」

CSS JavaScript

很多视口我们要对横屏和竖屏显示不同的布局，所以我们需要检测在不同的场景下给定不同的样式：1 JavaScript检测横屏window.orientation:获取屏幕旋转方向window.addEventListener("resize", ()= { if (window.orientation === 180 || window.orientation === 0) { // 正常方向或屏幕旋转180度 console.log('竖屏'); }; if (window.orientation === 90 || window.orientation === -9

admin  2023-07-21  164

CSS

CSS 滚动条样式修改

&::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } &::-webkit-scrollbar-thumb { background: #000; } 主要文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

admin  2022-11-04  707

CSS 前端

使用 svg 作为背景图片

1 用utf8格式，需要双引号“”替换为单引号，而且采用url encode编码，例如# 替换为 %23，background-image: url('data:image/svg+xml;utf8, svg t="1656040038219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3009" width="200" height="200" path d="M512 234.666667c131.946667 ...67 77.482667

admin  2022-06-24  654

CSS 前端

CSS3 实现 Switch 开关

网上看过很多 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

admin  2022-03-08  605

CSS

如何调整 iconfont 图标的位置和基线

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

admin  2022-03-01  iconfont  894

CSS

CSS 媒体特性 prefers-color-scheme

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

admin  2022-02-22  684

CSS JavaScript

JavaScript 获取和修改 CSS 变量

Window.getComputedStyle()Window.getComputedStyle()方法返回一个对象，该对象包含元素的所有 CSS 属性的值。获取元素属性 style #elem-container{ position: absolute; left: 100px; top: 200px; height: 100px; } /style div id="elem-container" dummy /div div id="output" /div script function getTheStyle

admin  2021-12-27  398

CSS

SVG 图标制作指南

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

admin  2021-12-24  470

CSS

iconfont 字体生成原理

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

admin  2021-12-24  iconfont  513

CSS

CSS 实现图标详解 image sprite、Icon Font、svg 和 CSS 绘制

蛮荒时期 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

admin  2021-12-21  391

CSS

node-sass 和 dart-sass 的区别

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

admin  2021-12-17  Sass,npm  502

CSS

CSS实现按钮的特效：流光按钮，冷光按钮

一，流光按钮 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

admin  2021-09-22  857

CSS

CSS 实现夜间模式和CSS自定义属性（变量）

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

admin  2021-07-16  1050

CSS

如何实现瀑布流

实现瀑布流有两种方法。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"

admin  2021-06-01  604

CSS

display:inline-block元素之间空隙的产生原因和解决办法

display:inline-block是一种布局方法，它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。 !DOCTYPE html html head title

admin  2021-01-23  683

CSS

怪异模式（Quirks Mode）导致 button 和 input 的大小不统一原因

怪异模式（quirks mode）是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术。怪异模式特点：1.采用的是IE盒模型，即将border和padding包含在了height和width中。在 IE 盒模型中，box width = content width + padding left + padding right + border left + border right， box height = content height + padding top + padding bottom + border top + border bottom

admin  2021-01-23  819

CSS

详解移动端网页适配开发

一，响应式网页设计响应式网页设计( RWD，Responsive Web Design) 这个术语，由伊桑・马科特( Ethan Marcotte )提出。他在AList Apart发表了一篇开创性的文章，将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来，并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。上面仅列举了其中一部分！不过，正如马科特等人所说，真正的响应式设计方法不仅仅只是根据视口大小改变网页布局。相反，它是要从整体上颠覆我们当前设计网页的方法。以往我们先是针对桌面电

admin  2021-01-20  799

CSS

CSS 伪类实现弧形

.head-section{ width: 100%; height: 360px; position: relative; z-index: -1; overflow: hidden; } .head-section::after{ content: ''; display: block; width: 160%; height: 200%; border-radius: 50%; position: absolute; left: 50%; top: -10

admin  2020-12-23  678

CSS

CSS3 box-sizing 属性

这个属性可以取消 pading 和 border 宽度对盒装模型的影响。语法box-sizing: content-box|border-box|inherit;content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit规定应从父元素继承 box-sizing 属性的值。

admin  2020-10-31  649

CSS

CSS3 实现瀑布流布局

瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过CSS3的多列（Multi-column）属性，可以简单的实现类似效果。具体步骤：1.设置外部容器多列列数（column-count）和列间距（column-gap）2.设置内容条目的break-inside属性为avoid，使条目总体不被打断。 div class="container" //最外层容器 div class="item" //条目 div class="item__content" //条目内容 img src='' /div /div

admin  2020-08-11  652