整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML+CSS之仿唯品会注册页面(前段小白)

家好,今天我们分享的是仿唯品会注册页面的简单实现方法(单纯的结构和样式),首先我们看下效果图

下面是HTML结构

下面是CSS样式

最后再给大家分享一个知识点:——clear 清除浮动,解决“塌陷”的方法——

  1. 创建一个用来清除浮动的CSS样式类(.clearfix);
    .clearfix { zoom:1;}

    .clearfix:after {content:".";display:block;visibility:hidden;height:0;clear:both;}

  2. 针对包裹的全是浮动元素的父级容器使用(.clearfix)

PS:详情可参考文中部分,向我一样的小白前期不用理解这两行代码意思,当作工具使用即可!

#34;夏哉ke":quangneng.com/2557/

React 18 + TypeScript 高仿 AntD:从零到一打造组件库

在现代 Web 开发中,组件库已经成为提高开发效率和保证项目一致性的重要工具。React 作为当前最流行的前端框架之一,其生态中的组件库如 Ant Design(简称 AntD)广受欢迎。本文将指导你如何使用 React 18 和 TypeScript 从零开始打造一个类似 AntD 的组件库。

## 一、准备工作

在开始之前,确保你已经安装了最新版本的 Node.js 和 npm。然后,通过以下命令创建一个新的 React 项目:

```bash

npx create-react-app my-component-library --template typescript

```

这将创建一个名为 `my-component-library` 的 React + TypeScript 项目。接下来,进入项目目录并初始化一个 Git 仓库:

```bash

cd my-component-library

git init

```

## 二、项目结构

为了更好地组织代码,我们可以按照以下结构来规划项目:

```

my-component-library

├── public

├── src

│ ├── components

│ │ ├── Button

│ │ │ ├── index.tsx

│ │ │ └── style.ts

│ │ └── index.ts

│ ├── hooks

│ ├── themes

│ │ ├── default

│ │ └── index.ts

│ ├── types

│ ├── utils

│ ├── index.ts

│ └── App.tsx

├── .gitignore

├── package.json

├── README.md

└── tsconfig.json

```

## 三、第一个组件:Button

我们将从创建一个基本的 `Button` 组件开始。在 `src/components/Button/index.tsx` 中,创建一个简单的按钮组件:

```tsx

import React from 'react';

import './style.css';

interface ButtonProps {

children: React.ReactNode;

onClick?: () => void;

}

const Button: React.FC<ButtonProps> = ({ children, onClick }) => {

return (

<button className="my-button" onClick={onClick}>

{children}

</button>

);

};

export default Button;

```

在 `src/components/Button/style.ts` 中,添加一些基本的样式:

```ts

import './style.css';

```

在 `src/components/index.ts` 中,导出 `Button` 组件:

```ts

export { default as Button } from './Button';

```

## 四、样式和主题

为了使组件库具有更好的可定制性和一致性,我们可以使用 CSS-in-JS 库(如 `styled-components` 或 `emotion`)来编写样式。这里我们以 `styled-components` 为例。

首先,安装 `styled-components`:

```bash

npm install styled-components

```

然后,在 `src/themes/default` 目录下创建一个主题文件 `index.ts`:

```ts

export const defaultTheme = {

primaryColor: '#1890ff',

secondaryColor: '#ff4d4f',

// ... 其他主题变量

};

```

接下来,使用 `styled-components` 重写 `Button` 组件的样式:

```tsx

import React from 'react';

import styled from 'styled-components';

import { defaultTheme } from '../../themes';

interface ButtonProps {

children: React.ReactNode;

onClick?: () => void;

}

const StyledButton = styled.button`

background-color: ${defaultTheme.primaryColor};

color: white;

border: none;

border-radius: 4px;

padding: 8px 16px;

cursor: pointer;

&:hover {

background-color: ${defaultTheme.secondaryColor};

}

`;

const Button: React.FC<ButtonProps> = ({ children, onClick }) => {

return (

<StyledButton onClick={onClick}>

{children}

</StyledButton>

);

};

export default Button;

```

## 五、类型和工具函数

为了提高代码的健壮性和可维护性,我们可以在 `src/types` 目录下定义一些常用的类型和接口,在 `src/utils` 目录下封装一些工具函数。

## 六、文档和示例

为了方便其他开发者使用你的组件库,你需要提供清晰的文档和示例。可以使用 `storybook` 来搭建一个组件展示平台。

首先,安装 `storybook`:

```bash

npx sb init

```

然后,根据提示完成配置。在 `src/stories` 目录下编写组件的故事(Stories)。

## 七、打包和发布

当组件库开发完成后,需要将其打包成可在其他项目中使用的格式。使用 `create-react-app` 创建的项目已经内置了打包工具,你可以直接运行:

```bash

npm run build

```

这将在 `build` 目录下生成打包后的文件。然后,你可以将这些文件发布到 npm 上:

```bash

npm publish

```

确保你已经注册了 npm 账号并登录。

## 八、总结

后续工作

  1. 组件丰富:继续开发更多的组件,如 Input、Select、Modal 等,以完善组件库的功能。
  2. 主题定制:提供更多的主题选项,允许用户根据需求自定义组件库的主题。
  3. 文档完善:编写更详细的组件使用文档和示例,包括安装指南、API 说明和最佳实践。
  4. 单元测试:为组件编写单元测试,确保组件的稳定性和可靠性。
  5. 持续集成:设置 CI/CD 流程,自动化测试和部署流程。
  6. 社区参与:开源组件库,吸引社区开发者参与贡献和改进。
  7. 版本控制:遵循语义化版本控制(SemVer),确保组件库的版本更新对用户透明。

注意事项

  • 一致性:确保所有组件的一致性,包括样式、API 设计和交互行为。
  • 可访问性:关注组件的可访问性(Accessibility),确保组件对残障用户友好。
  • 性能优化:对组件进行性能优化,减少渲染次数和提高加载速度。
  • 反馈机制:建立用户反馈机制,及时收集用户的意见和建议。

结束语

创建一个组件库是一个复杂但非常有价值的过程。它不仅能够提高开发效率,还能够帮助维护项目的一致性和可维护性。通过不断迭代和改进,你的组件库可以成为 React 生态中的一个宝贵资源。记住,一个好的组件库不仅仅是代码的集合,更是社区、文档和持续努力的结晶。

鸟学习记:第四十三天

这两天状态不是很好 思路不行

加上有一些琐碎的事情

没事学学css 感觉还是挺有趣的 哈哈

前言

Hello!小伙伴!

非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~

自我介绍 「ଘ(੭ˊᵕˋ)੭」

昵称:海轰

标签:程序猿|C++选手|学生

简介:因C语言结识编程,随后转入计算机专业,有幸拿过一些国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)

学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!

效果展示

1、原效果图

在这里插入图片描述

2、复现效果图

在这里插入图片描述

Demo代码 js

在这里插入图片描述

wxml

在这里插入图片描述

wxss

结语

文章仅作为学习笔记,记录从0到1的一个过程

希望对您有所帮助,如有错误欢迎小伙伴指正~