css选择器选择奇数行或偶数行实现方式有两种方式一:nth-child/* 奇数行*/
div:nth-child(odd){
}
/* 偶数行 */
div:nth-child(even){
}
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。方式二:nth-of-type/* 奇数行*/
......
216
0
0
2023-01-07
本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前1-12个CSS重难点整理出来，具体内容如下：CSS选择器与优先级CSS中可继承与不可继承属性有哪些display的block 、i
......
318
0
0
2023-01-05
写了这么一些时间的CSS，有时候觉得有些混乱，尤其是做样式修改的时候。后来觉得遵循一些书写规范和顺序来的话，一来会让自己的思路很清晰，二来修改的时候很明确，不容易被冗余的样式影响。还有很重要的一点就是，遵循浏览器渲染顺序，减少浏览器reflow（回流），提升浏览器渲染dom的性能。定位属性的修改会导致reflow，改变文字颜色、背景等会使得浏览器repain
......
274
0
0
2023-01-04
一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布
......
315
0
0
2023-01-01
一、什么是防御式编程防御性编程是一种细致、谨慎的编程方法（习惯）。我们在写代码时常会有“以防万一”的心态，把以防万一有可能出现的情况提前考虑进去，规避以免以防万一出现带来的问题。应用防御性编程技术，你可以侦测到可能被忽略的错误，防止可能会导致灾难性后果的“小毛病”的出现，在时间的运行过程中为你节约大量的调试时间。比如我们在写下面这个效果时，如果只是按设计师设
......
229
0
0
2022-12-31
本人实现了其棒棒糖果按钮，如下图所示：在线演示地址见here。使用完全使用CSS实现，无需JS。源码如下：<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{ margin: 0px; padding: 0px
......
263
0
0
2022-12-26
响应式布局：只需要开发一套代码，只需要一套代码使页面适应不同的屏幕。响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；响应式布局的 5 种实现方案百分比布局媒体查询布局rem 响应式布局vw 响应式布局flex 弹性布局一、百分比布局比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着
......
393
0
0
2022-12-20
在手机上阅读大量的拷贝文章和长篇论文的用户体验是否让你阅读困难？我非常能理解您的处境，因此，直奔主题，我们在一个地方编辑了最基本的移动手机阅读体验的新规范，只要收藏这篇文章，每次你开始设计一个新的app或者网页的时候，可以拿出它来读一读并参考使用，来！一起看看有哪些新规范可以帮助初入茅庐的新手制作一流的用户体验设计。规则1：端与端之间的研究即使你为一个特定的
......
264
0
0
2022-12-11
据静电说：在Figma中有很多功能，不少同学用了好久都还不知道，但是这些功能又是我们必须要用到的，否则在做设计的时候可能会产生障碍哦~一起来看看吧！001.使用缩放工具Scale来缩放内容不会吧！如果你还不知道要用缩放工具来缩放内容，那如果用直接拖拉外框的方式会造成内容变形，特别是文本等等的折行。如果你需要等比例缩放，那么使用缩放工具Scale来缩放就是更好
......
1177
0
0
2022-12-11
按钮可能是现代图形用户界面中最常见的功能元素。尽管它很受欢迎并且很简单，但这个 UI 对象可能很难设计。本文将为大家介绍 4 种不同类型按钮的美学以及使用它们的上下文。请注意，我们将仅讨论规范类型的按钮（也称为简单按钮），不会涵盖切换按钮或单选按钮。实心按钮实心按钮是具有实心填充的按钮。大多数时候，设计师使用对比色，这样实心按钮自然会吸引很多注意力。它使此按
......
355
0
0
2022-12-11
通知是许多产品不可或缺的一部分。我们今天设计的几乎所有产品都需要一些系统来与我们的用户共享更新。本文将讨论五种类型的 UI 通知，以及何时以及如何使用它们的基本规则。什么是通知？通知是我们希望与用户共享的任何系统更新。通知提供有关某些事件的相关且及时的信息。通知可能因以下情况而异：重要程度。通知范围从用户必须查看的重要更新到用户可能容易忽略的低优先级更新。渠
......
308
0
0
2022-12-11
据静电说：这是一篇Mary Moore的文章，为我们分析了2023年的UI设计趋势。很多新鲜的事物逐渐进入我们的视野，设计师要多去接触新鲜事物和概念，会让自己的设计更顺畅。我们已经使用移动应用程序很长时间了。1997 年，诺基亚创建了 Snake 游戏的内置版本，被认为是第一个移动应用程序。今天，每当我们订票、订餐、打车、看视频和许多其他事情时，我们都会使用
......
282
0
0
2022-12-11
说明因为我的底子特别的差(大佬勿喷)，今天想让文字在图片上方显示，并且给图片模糊，结果当图片模糊之后也就是实现毛玻璃效果后，发现图片上的文字也模糊掉了，这个问题当然可以用伪元素的方式解决，但是由于某些原因，这里不能使用伪元素。然后我找到了 filter（滤镜)属性，他主要是运用在图片上，以实现一些特效。然后用滤镜属性进行模糊后，发现他的效果是下图这样的：此时
......
308
0
0
2022-12-03
利用空间转换属性使用立体呈现技巧实现3D导航效果标签整理依据由外到内，由大到小的原则：首先观察整体是一个导航，有三个导航按钮，所以需要3个 li标签。然后考虑单个按钮里面有俩个面为前面和上面，所以此时需要俩个子元素。因为俩个元素的功能是导航按钮，都是超链接，所以需要俩个 a标签在一个 li标签内。最后得出整体需要的标签html部分 <div cl
......
287
0
0
2022-12-02
前端开发中经常用到的就是元素居中，有时候不同的元素居中方式不同就忘记了，明明已经设置了居中，但却没有效果，搞得人很懵逼，还得去搜索一下，所以今天总结了一下，方便以后查用。水平居中水平居中算是前端工程师的基本功了，它实现的是让元素在水平方向居中显示。行内元素首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center; 。&
......
272
0
0
2022-12-02