https://index.zshipu.com/geek/tags/nexp/ Recent content in Nexp on 知识铺的博客 Hugo -- gohugo.io zh-CN Thu, 02 Jun 2022 10:08:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-007-CSS%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6-%E9%80%8F%E6%98%8E%E5%BA%A6/ Thu, 02 Jun 2022 10:08:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-007-CSS%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6-%E9%80%8F%E6%98%8E%E5%BA%A6/ 该opacity属性指定元素的不透明度/透明度。 透明图像 该opacity属性的取值范围为 0.0 - 1.0。值越低，越透明： 不透明度 0.2 不透明度 0.5 不透明度 1 例子 1 2 3 img { opacity: 0.5; } 透明悬停效果 该opacity属性通常与:hover 选择器一起使用以更改鼠标悬停时的不透明度： 鼠标经过 例子 1 2 3 4 5 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-006-CSS-%E4%B8%ADpxemremvwvh%E5%8D%95%E4%BD%8D%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%E8%AF%A6%E8%A7%A3/ Thu, 02 Jun 2022 10:07:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-006-CSS-%E4%B8%ADpxemremvwvh%E5%8D%95%E4%BD%8D%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%E8%AF%A6%E8%A7%A3/ 1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-005-CSS%E9%80%89%E6%8B%A9%E5%99%A8/ Wed, 01 Jun 2022 10:07:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-005-CSS%E9%80%89%E6%8B%A9%E5%99%A8/ CSS中，选择器用来指定网页上我们想要样式化的HTML元素。有CSS选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。 学习前提： 计算机的基本知识， 安装了基础软件，处理文件 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-004-CSS%E9%A2%9C%E8%89%B2%E4%BD%93%E7%B3%BB-HSL/ Wed, 01 Jun 2022 10:06:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-004-CSS%E9%A2%9C%E8%89%B2%E4%BD%93%E7%B3%BB-HSL/ 必看颜色 工具：调色板 HSL hue 色相 0° Red 60° Yellow 120° Green 180° Cyan 240° Blue 300° Magenta saturation 饱和度 饱和度（Saturation）是指色彩的纯度，饱和度越高色彩越纯越浓，饱和度越低则色彩变灰变淡。 lightness 亮度 亮度（Lightness）指的是色彩的明暗程度，亮度值越高，色彩越白，亮度越低，色彩越黑 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-003-CSS%E9%A2%9C%E8%89%B2%E4%BD%93%E7%B3%BB/ Wed, 01 Jun 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-003-CSS%E9%A2%9C%E8%89%B2%E4%BD%93%E7%B3%BB/ <颜色> CSS 数据类型表示一种颜色。A 还可以包括 Alpha 通道透明度值，指示颜色应如何与其背景复合。<color> 可以通过以下任一方式定义 A：<color> 使用关键字（如 或 ）。所有现有关键字都指定 sRGB 色彩空间中的颜色blue``transparent 使用 RGB 三 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-002-CSS%E5%9F%BA%E7%A1%80/ Tue, 31 May 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-002-CSS%E5%9F%BA%E7%A1%80/ 一、 CSS组成部分 <p>Lorem ipsum dolor sit amet.</p> <style> p{ color: red; } </style> p : selector 选择器 {}: 放在在大括号内 color: property 属性 red: value 值 ；：每行结尾分号 二、三种方式添加CSS 外部样式表 保持.css link 引入到html 最常用 内部样式表 html文件内 style 包裹 偶热使用 内联样式 仅影响一个元素 html元素的style属性中添加 不推荐使用 三、选择器 1 https://index.zshipu.com/geek/post/nexp/level002/nexp-level-002-01-Next.js-+-NextUI-%E5%AE%8C%E7%BE%8E%E7%BB%84%E5%90%88%E5%BC%95%E5%85%A5CSS%E7%BB%84%E4%BB%B6%E5%BA%93/ Mon, 30 May 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/level002/nexp-level-002-01-Next.js-+-NextUI-%E5%AE%8C%E7%BE%8E%E7%BB%84%E5%90%88%E5%BC%95%E5%85%A5CSS%E7%BB%84%E4%BB%B6%E5%BA%93/ React + NextUI 安装 安装 在 React 项目目录中，通过运行以下任一命令安装 NextUI： yarn add @nextui-org/react # or npm i @nextui-org/react 设置 为了让 NextUI 正常工作，您需要NextUIProvider在应用程序的根目录下设置。 React 转到应用程序的根目录并执行以下操作： import * as React from 'react'; // 1. import `NextUIProvider` component import { NextUIProvider } from '@nextui-org/react'; function App({ Component }) { // 2. Use at the root of your app return ( <NextUIProvider> <Component /> </NextUIProvider> ); https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-001-%E5%AD%A6%E4%B9%A0-TailwindCSS%E5%88%B6%E4%BD%9C%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99%E5%8D%A1/ Mon, 23 May 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/css-level-01/css-level-001-%E5%AD%A6%E4%B9%A0-TailwindCSS%E5%88%B6%E4%BD%9C%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99%E5%8D%A1/ Tailwind 是一个 CSS 框架 Tailwind 是一个 CSS 框架，可让您轻松构建出色的响应式 UI。 如果您正在学习 TailwindCSS，此博客可以帮助您通过在 5 分钟内创建一个带有按钮的迷你配置文件卡来构建更强大的概念。 首先，您需要在项目中安装 Tailwind。现在有以下3种方法。访问您喜欢的那个。由于这是一张简单的 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-06-%E6%B7%BB%E5%8A%A0%E7%BB%84%E4%BB%B6%E7%BA%A7-CSS/ Sat, 21 May 2022 10:05:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-06-%E6%B7%BB%E5%8A%A0%E7%BB%84%E4%BB%B6%E7%BA%A7-CSS/ Next.js 通过 [name].module.css 文件命名约定来支持 CSS 模块 。 CSS 模块通过自动创建唯一的类名从而将 CSS 限定在局部范围内。 这使您可以在不同文件中使用相同的 CSS 类名，而不必担心冲突。 此行为使 CSS 模块成为包含组件级 CSS 的理想方法。 CSS 模块文件 可以导入（import）到应用程序中的任何位置。 例如，假设 components/ 目录下有一个可重用 Button 组件 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-05-%E5%AD%A6%E4%B9%A0-Next.js-%E4%BD%BF%E7%94%A8%E5%85%B1%E4%BA%AB%E7%BB%84%E4%BB%B6/ Sat, 21 May 2022 10:04:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-05-%E5%AD%A6%E4%B9%A0-Next.js-%E4%BD%BF%E7%94%A8%E5%85%B1%E4%BA%AB%E7%BB%84%E4%BB%B6/ 使用共享组件 我们知道 Next.js 是和页面相关的. 通过导出一个 React组件创建一个页面, 然后把它放到 pages 目录中, 基于这个文件名, Next.js存在一个固定的URL. 因为导出的页面是Javascript模块, 我们当然也能够导入其他组件进来. 在这节课中, 我们会创建一个共享的页头组件, 并在多个页面 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-04-Next-%E7%9A%84%E6%9C%80%E4%BD%B3%E6%A0%B7%E5%BC%8F%E9%80%89%E9%A1%B9/ Sat, 21 May 2022 10:03:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-04-Next-%E7%9A%84%E6%9C%80%E4%BD%B3%E6%A0%B7%E5%BC%8F%E9%80%89%E9%A1%B9/ 鲜为人知的是，Next.js提供了许多在应用程序中支持CSS的方法。无论你喜欢实用程序CSS及其类还是更喜欢CSS-in-JS，Next.js都能满足您的需求。在本教程中，您将发现在 Next.js 应用程序中实现样式设置的几种方法。让我们实现一个样式文本，当用户将其悬停在一起时，该文本将变为红 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-03-%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93%E4%B8%8E%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%B8%B2%E6%9F%93/ Sat, 21 May 2022 10:02:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-03-%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93%E4%B8%8E%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%B8%B2%E6%9F%93/ 最近在准备技术面试时，我偶然发现了服务器端渲染 (SSR) 和客户端渲染 (CSR) 的概念，我并不清楚它的含义，也不知道它们之间的区别是什么两种方法。 在我的研究中，我意识到在选择在您的网站上实施哪种方法时，这不是一个简单的决定。出于所有这些原因，我决定写一篇关于什么是 SSR 和 SCR 以及它们的优缺点的博文。 长期 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-02-Next.js-%E4%B8%8E-React%E5%B7%AE%E5%BC%82%E5%92%8C%E6%9C%80%E4%BD%B3%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/ Sat, 21 May 2022 10:01:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-02-Next.js-%E4%B8%8E-React%E5%B7%AE%E5%BC%82%E5%92%8C%E6%9C%80%E4%BD%B3%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/ 随着每年都有新的 JavaScript 框架和库出现，很难跟上不断变化的 JS 生态系统的步伐。 但即使在JavaScript 框架和库的汪洋大海中，React 和 Next.js 也能脱颖而出。React 是最受前端开发人员欢迎的 JavaScript 库。Next.js 虽然比 React 小，但多年来一直在稳步增长，并有望成为最常用的 JavaScript 框架。 React 的 UI 库非常健壮， https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-01-Next.js-%E5%8A%9F%E8%83%BD%E5%8F%8A%E4%BB%8B%E7%BB%8D/ Sat, 21 May 2022 10:00:00 +0800 https://index.zshipu.com/geek/post/nexp/level001/nexp-level-001-01-Next.js-%E5%8A%9F%E8%83%BD%E5%8F%8A%E4%BB%8B%E7%BB%8D/ 介绍 在设定一个 React 项目时候，通常会使用 create-React-app 这个套件来快速产出开发样板环境，而另外一个选择 Next.js 则包好了许多功能，例如Server Side Render （SSR），Webpack，Router…. 不需要额外再多花时间在设定方面，但同时又有弹性可以扩充，非常的快速可以马上开发项目，在使用next