记录一下写法，免得老是忘记
elmentUI
<el-form-item>
<el-input placeholder="Account" prefix-icon="el-icon-user-solid">
el-input>
el-form-item>
<el-form-item>
<el-input placeholder="Password" type="password" prefix-icon="el-icon-lock">el-input>
el-form-item>
<el-form-item>
<el-input placeholder="CheckCode" prefix-icon="el-icon-picture-outline-round">el-input>
el-form-item>
显示效果
elementPlus
11月29日更新
在使用vue3时，对应的element框架变成了了elementPlus，与elementUI的使用存在较大的差距，折腾了老半天，算搞明白是怎么回事了，分两步走
main.js中全局注册所有图标
代码如下：
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import router from './router/index'
import * as ElementPlusIcons from '@element-plus/icons'
const app = createApp(App)
for(let iconName in ElementPlusIcons){
app.component(iconName, ElementPlusIcons[iconName])
}
app.use(router)
app.mount('#app')
关键代码：
import * as ElementPlusIcons from '@element-plus/icons'
for(let iconName in ElementPlusIcons){
app.component(iconName, ElementPlusIcons[iconName])
}
elementplus官网页面上给的写法试了很久效果出不来，于是改了一种写法，反正是生效了的。
运行的时候可能会报错，提示element-plus/icons未安装，安装一下就行了
2. 在页面（组件）上使用图标
看代码，同样是登录页面
<template>
<div class="login">
<el-form class="login-form" :model="loginForm" ref="loginForm" :rules="rules">
<h3 class="title">权限管理系统h3>
<el-form-item prop="username">
<el-input placeholder="Account" type="text" prefix-icon="UserFilled" v-model="loginForm.username">
el-input>
el-form-item>
<el-form-item prop="password">
<el-input placeholder="Password" type="password" prefix-icon="Lock" v-model="loginForm.password">
el-input>
el-form-item>
<el-form-item prop="checkCode">
<el-input placeholder="CheckCode" prefix-icon="PictureRounded" v-model="loginForm.checkCode"
style="width: 63%">
el-input>
<div class="login-code">
<div @click="getCode" v-html="code" style="vertical-align:middle">div>
div>
el-form-item>
<el-checkbox v-model="loginForm.rememberme" style="margin: 0 0 15px 0;">Remenber Meel-checkbox>
<el-form-item>
<el-button style="width: 100%" @click="submit('loginForm')" type="primary">Loginel-button>
el-form-item>
el-form>
<div class="el-login-footer">
<span>Copyright © 2018-2022 huanggang All Rights Reserved.span>
div>
div>
template>
注意写法，前面的el-icon不需要写了，用什么图标直接取用就行了
效果如下
如何设置CSS的边框样式？
CSS如何工作？
CSS（层叠样式表）是一种用于控制网页外观和布局的语言。它工作的原理如下：
解析
浏览器首先解析 HTML 文档，将其转换为文档对象模型（DOM）树。
解析 CSS
浏览器再解析 CSS 文件，将其转换为样式表对象模型（CSSOM）树。
匹配
浏览器将 DOM 树和 CSSOM 树匹配，确定每个元素应用哪些样式。
渲染
浏览器根据匹配结果渲染网页，生成最终的视觉效果。
CSS 的工作流程是基于层叠和继承的。层叠指的是当多个样式规则应用于同一元素时，它们的优先级和顺序会影响最终的样式。继承指的是某些样式规则会被子元素继承，从而减少了代码量和重复性。总的来说，CSS 的工作原理是将样式表应用于 HTML 文档，从而控制网页的外观和布局。
如何设置CSS的边框样式？
在 CSS 中，可以使用 border 属性来设置元素的边框样式。border 属性可以设置边框的宽度、样式和颜色。
下面是 border 属性的语法：
代码语言：javascript
复制
border: [border-width] [border-style] [border-color];其中，border-width 指定边框的宽度，可以设置为像素、百分比或预定义的值（thin、medium、thick）。默认值为 medium。
border-style 指定边框的样式，可以设置为 solid、dashed、dotted、double 等。默认值为 none。
border-color 指定边框的颜色，可以设置为颜色名、十六进制值、RGB 值等。默认值为黑色。
例如，以下 CSS 代码设置了一个红色、宽度为 2 像素、样式为实线的边框：
代码语言：javascript
复制
border {
border: 2px solid red;
}除了 border 属性之外，还可以使用 border-width、border-style、border-color 分别设置边框的宽度、样式和颜色，例如：
代码语言：javascript
复制
border {
border-width: 2px;
border-style: solid;
border-color: red;
}还可以使用 border-top、border-right、border-bottom、border-left 分别设置上、右、下、左四个方向的边框样式，例如：
代码语言：javascript
复制
border {
border-top: 2px solid red;
border-right: 1px dotted blue;
border-bottom: 3px dashed green;
border-left: 1px solid black;
}如何设置CSS样式？
要设置CSS样式，可以按照以下步骤进行：
代码语言：javascript
复制
p {
color: red;
font-size: 16px;
}
.myclass {
background-color: yellow;
font-weight: bold;
}上述代码将所有段落元素的文本颜色设置为红色，字体大小为16像素，同时将所有类别为myclass的元素的背景颜色设置为黄色，字体加粗。
最后，需要注意浏览器的兼容性问题，不同浏览器对CSS属性的支持可能存在差异。
如何使用CSS预处理器？安装CSS预处理器
选择一种CSS预处理器，如Sass、Less或Stylus，并根据官方文档进行安装。
创建预处理器文件
在项目中创建一个以预处理器文件扩展名结尾的文件（如.scss、.less或.styl），并将其与HTML文件连接。
编写预处理器代码
使用预处理器的语法编写CSS代码，并将其保存到预处理器文件中。
编译预处理器文件
使用预处理器将预处理器文件编译为CSS文件。这可以通过命令行或使用自动化工具（如Gulp或Grunt）完成。
在HTML中使用CSS
将编译后的CSS文件链接到HTML文件中，以在网站中应用样式。
使用预处理器的其他功能
预处理器还提供了其他功能，如变量、嵌套规则、混合和继承等，可以通过学习文档来了解和使用。
如何调试CSS代码？如何设置CSS的响应式布局？使用媒体查询（Media Queries）
媒体查询是CSS中用于根据设备屏幕尺寸和特性应用不同样式的技术。通过在CSS中添加媒体查询，您可以根据屏幕宽度、高度、方向等条件来应用不同的样式。
例如，以下是一个简单的媒体查询示例，将在屏幕宽度小于600像素时应用特定的样式：
代码语言：javascript
复制
@media screen and (max-width: 600px) {
/* 在屏幕宽度小于600像素时应用的样式 */
/* 可以在这里设置元素的宽度、高度、布局等属性 */
}使用相对单位
使用相对单位（如百分比、em、rem）而不是固定像素值可以使元素根据屏幕尺寸进行自适应调整。相对单位可以根据父元素或根元素的大小进行相对计算，从而实现响应式布局。
弹性布局（Flexbox）和网格布局（Grid）
Flexbox和Grid是CSS中的两种强大的布局模型，可以帮助您创建灵活的响应式布局。它们提供了更直观和简洁的方式来定义元素的排列方式和对齐方式。
图片和媒体的自适应
使用CSS属性（如max-width: 100%）来确保图片和媒体元素在不同屏幕尺寸下自适应调整大小。
如何在HTML文档中使用CSS？创建CSS文件
首先，您需要创建一个CSS文件，可以使用任何文本编辑器（如Notepad++、Sublime Text、Visual Studio Code等）来创建一个新的文本文件，并将其保存为以.css为扩展名的文件。
链接CSS文件
在HTML文档的标签中，使用元素将CSS文件链接到HTML文档中。在元素的href属性中指定CSS文件的路径，并使用rel属性指定关系为stylesheet。
代码语言：javascript
复制
内联CSS样式
如果您只需要在特定的HTML元素上应用样式，可以使用内联CSS样式。在HTML元素的style属性中，直接编写CSS样式。
代码语言：javascript
复制
这是一个带有内联样式的段落。
内部CSS样式表
在HTML文档的标签中，使用标签来定义内部CSS样式表。在标签中，编写CSS样式规则。
代码语言：javascript
复制
类选择器和ID选择器
使用类选择器和ID选择器可以更精确地选择和应用样式。在HTML元素的class属性中定义类名，在CSS中使用类选择器（以.开头）来选择该类名。在HTML元素的id属性中定义ID，在CSS中使用ID选择器（以#开头）来选择该ID。
代码语言：javascript
复制
这是一个带有类和ID选择器的标题。
