目录使用渐变实现网格利用渐变实现交叉虚线十字借助伪元素及 box-shadow 实现剩余符合最后最近，有网友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局：他用了 60 多个标签，而他的同学，只用了 6 个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑 DOM 的消耗
......
322
0
0
2023-02-28
我分别美化了几个不同版本的Next主题，这里把美化代码公布出来，第一种Next版本小于7.3可使用直接修改 \themes\next\source\css\_custom 将以下美化过程复制到custom.styl目录即可。// *****************************************************************
......
283
0
0
2023-02-12
CSS 层叠样式CSS引用:直接引用 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.<body>
<p style="color: red"> hello lyshark </p>
<div style="color: yellow ; background: red"> h
......
275
0
0
2023-02-09
作为一个前端，我经常遇到list展示的需求。如果是设置一个list孩子节点的样式，我可能会这样写.list{
}
// 一般我list的child是div
.list > div {
}
但是遇到排名次的需求，前三名要用框框框柱,经常要写这样的代码 {new Array(6).fill(1).map((v, index) =
......
315
0
0
2023-01-26
1.自动换行p {
word-wrap:break-word;
word-break:normal;
}
2.强制不换行div{
white-space:nowrap;
}
3. 强制英文单词换行div{
word-break:break-all;
}
4.单行文本不换行多余文本显示省略号 行内元素最好转为inli
......
260
0
0
2023-01-24
哈喽，大家好，我是指北君。今天给大家介绍个好东西————TailwindCSS ！一. 引言css对于页面的美化作用不言而喻，但是在进行前端布局页面的时候，往往对页面样式的命名不胜其烦。很多的项目 ，都是对class语义化命名，简单的页面还可以接受，但是随着项目开发的深入，会出现很多类似的语义化场景，导致命名愈发困难。一边要小心不要命名重复，造成样式冲突，另
......
342
0
0
2023-01-24
CSS 滤镜属性允许我们使用css对元素后面的内容应用过滤效果，就和ps里面的功能一样(名字都是一样的！)快来看看吧！！！在日常开发中，偶尔会用到需要处理图片。如果让ui切不同颜色的图片，也会比较棘手，而且多张图片也会占用较多内存，提高http的请求，看一下css的滤镜可能会帮忙解决许多的问题哦！！！CSS 滤镜 : backdrop-filterbackd
......
365
0
0
2023-01-19
假设，我们有这样一张 Gif 图：利用 CSS，我们尝试来搞一些事情。图片的 Glitch Art 风在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。像是这样：假设，我们有这样一张图：只需要一个标签即可<div class="mix"></div>
给两张同样的图片，
......
305
0
0
2023-01-18
❝欲望越大，我们需要的奔跑速度就越快；而筋疲力尽之时，便是我们幸福感滑坡之时 ❞大家好，我是「柒八九」。今天，我们又开辟了一个新的篇幅 --「前端面试」。即是把一些平时常用的概念和工具方法整理和罗列，也算是一种变向的「未雨绸缪」。该系列的文章，大部分都是前面文章的知识点汇总，但是也不乏参考其他优秀文章。不过，大家可以放心，里面的代码和知识点，都有迹可循。好了
......
262
0
0
2023-01-17
css图片居中(水平居中和垂直居中)css图片居中分css图片水平居中和垂直居中两种情况，有时候还需要图片同时水平垂直居中，下面分几种居中情况分别介绍。css图片水平居中利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下：<div style="tex
......
280
0
0
2023-01-16
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：1.word-break:break-all例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congrat
......
312
0
0
2023-01-16
在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样：<div class="img"></div>
div {
width: 300px;
height: 300px;
background: url(image.jpg);
transition: .4s;
......
230
0
0
2023-01-15
今天我们来分享web前端CSS定位中的position：absolute绝对定位的应用场景案例的相关场景！绝对定位是CSS中非常中啊哟的知识点，接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解！绝对定位元素的特性使元素完全脱离文档流,将释放自己的位置元素的层级提升，会覆盖在其它元素上离自己最近的定位父元素进行位置调整，如果没有定位的父元素，则相对
......
280
0
0
2023-01-12
实现网站全页面快速置灰，可以使用一个 css 属性，加到 html 标签上，即可快速实现filter: grayscale(100%);
-webkit-filter: grayscale(100%); //兼容chrome和safari
-moz-filter: grayscale(100%); //兼容Firefox
-ms-
......
275
0
0
2023-01-08
54个CSS重难点，1-12分享本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前13-24个CSS重难点整理出来，具体内容如下：13、如何判断元素是否到达可视区域（图片懒加载原理）
......
251
0
0
2023-01-08