网站设计常用组件 第1篇
border-radius 属性可以设置元素的圆角大小。它接受一个或多个值来指定每个角的圆角半径，值可以是像素、百分比或 em 单位。
示例图
配合使用 object-fit: cover，对这些img、video进行保留原始比例的剪切、缩放或者直接进行拉伸等 .video { border-radius: 10px; object-fit: cover; }
使用box-show实现阴影效果，常用于图片、盒子阴影效果
示例图
box-shadow 属性还支持以下参数：
使用 display:flex 实现子div相对父div水平分布
flex-wrap: wrap;为自动换行，nowrap则为不自动换行
通过 left: 50%; transform: translateX(-50%); 实现水平居中
通过赋予父元素text-align: center;及子元素display: inline-block;实现多个子元素居中排布
通过赋予父元素display:flex;及align-items: center;以实现多个子元素垂直居中排布
使用overflow-x: scroll;控制div水平溢出
overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。
包含的值：
visible 内容不能被裁减并且可能渲染到边距盒（padding）的外部。
hidden 如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。
clip 类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。
scroll 如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。
auto 取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。
overlay 已弃用 行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。
常用的内容溢出自动添加滚动条：overflow:auto
Transform 是 CSS3 中的一个属性，可以用来对元素进行 2D 或 3D 转换。Transform 可以通过设置一系列函数来实现不同的变换效果，Transform 属性不会改变元素的文档流位置，仅仅是在视觉上对元素进行了变换，常用的函数有：
移动+阴影
rotate()：旋转，可用来实现元素的旋转效果。使用 rotate() 函数可以将元素旋转指定的角度，角度可以用 deg、grad 或 rad 来表示。例如，可以使用 rotate(45deg) 来将元素顺时针旋转 45 度。
scale()：缩放，可用来调整元素的大小。使用 scale() 函数可以将元素的大小按指定的比例进行缩放。例如，可以使用 scale(2, 2) 来将元素在水平和垂直方向上都放大为原来的两倍。
变大+阴影
skew()：倾斜，可用来实现元素的倾斜效果。使用 skew() 函数可以将元素沿着水平或垂直方向进行倾斜。例如，可以使用 skew(30deg, 0) 来将元素在水平方向上倾斜 30 度。
matrix()：矩阵变换，可用来实现复杂的变换效果。使用 matrix() 函数可以通过一个 6x1 的矩阵来对元素进行变换。matrix() 函数可以实现 translate()、rotate()、scale() 和 skew() 函数的所有功能，也可以实现更加复杂的变换效果。
实现文本两端对齐（text justify）可以使用 text-align 属性，它有一个属性值为 justify，表示文本两端对齐。
上述代码中，text-justify 属性设置为 inter-ideograph 表示中文文本两端对齐。通过调整 word-spacing 和 letter-spacing 属性的值，可以进一步调整单词和字母之间的间距，以达到更好的排版效果。
text-underline-offset 属性设置文本装饰下划线（使用 text-decoration 应用）与其原始位置的偏移距离。
媒体查询（Media Queries）是 CSS3 中的一个特性，用于根据不同的媒体类型、设备特性等条件来应用不同的 CSS 样式。通过媒体查询，可以使得网页在不同的设备上以不同的方式展现，从而实现响应式设计。
媒体查询通过在 CSS 中使用 @media 关键字来定义一个查询，其基本语法如下：
其中，mediatype 可以是 all（所有设备）、print（打印设备）、screen（屏幕设备）、speech（语音阅读器等）等。而条件则是指一些媒体特性，如屏幕宽度、高度、方向、分辨率等。
下面是一个示例，它会在屏幕宽度小于等于 600 像素时，应用特定的样式：
上述代码中，@media screen and 表示只应用于屏幕设备，(max-width: 600px) 表示屏幕宽度小于等于 600 像素时，应用样式。这样，当浏览器窗口的宽度小于等于 600 像素时，背景颜色会变成黄色。
流体布局（Fluid Layout）是响应式 Web 设计中常用的一种布局方式，它的特点是页面布局随着浏览器窗口大小的改变而自动调整，以适应不同屏幕和设备的显示。
下面是一个示例，它的宽度和高度将会随父div的大小二变化
在流体布局中，页面元素的宽度不是固定的，而是使用百分比、em、rem 等相对单位来设置，使得页面元素可以根据浏览器窗口大小进行自适应。具体来说，流体布局常用的技术包括以下几种：
使用百分比：将页面元素的宽度设置为百分比，以相对于其父元素的宽度计算。例如，将一个容器的宽度设置为 80%，则该容器的宽度将会随着其父元素的宽度改变而自适应。
使用 em 和 rem：将页面元素的宽度设置为 em 或 rem，以相对于其父元素或根元素的字体大小计算。例如，将一个容器的宽度设置为 20em，则该容器的宽度将会随着其父元素的字体大小改变而自适应。
使用 max-width 和 min-width：使用 max-width 和 min-width 属性来限制页面元素的最大和最小宽度，以避免在屏幕过大或过小时出现不必要的空白或重叠现象。
通过使用流体布局，可以使得页面在不同设备和屏幕大小下都能呈现出最佳的布局效果，提升用户的浏览体验。不过，流体布局也有其局限性，例如在设计某些特定功能或交互时可能需要使用绝对布局或固定宽度的元素，这时需要在设计时进行权衡和取舍。
是一个 JavaScript 属性，返回当前窗口（浏览器）的宽度，即可视区域宽度，以像素为单位。它不包括滚动条的宽度，如果需要包含滚动条的宽度，可以使用 属性。
以函数通过当前窗口（浏览器）的宽度并作出相应的措施
该函数须在created等钩子函数调用才能生效
text-decoration 属性是用来设置 a 标签的划线属性的。 其属性值有：
网站设计常用组件 第2篇
依赖如下
使用 @“调用的函数” 回车调用函数
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。
通过 el-input 的 show-password 属性实现密码的显示
通过prop获取返回数据，通过slot-scope传递给img标签
示例图
:表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 :单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 :行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
arrow=“never” indicator-position=“none” interval=“0” type=“card”
代码如下
card模式的动画不是将当前轮播项放大而是将其它的缩小到，所以如果想修改轮播动画需要将当前轮播想也进行缩小并添加想要的动画
indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为outside则会显示在外部；设置为none则不会显示指示器。
当el-carousel的高度固定的时候，indicator-position设置为outside可能会出现内容高度大于走马灯的高度以至于出现下拉框的情况，解决方法是设置indicator-position属性为默认即可
代码如下
el-menu 是 Element UI 框架中的一个组件，用于创建菜单导航。它提供了多种功能和样式选项，可以轻松创建水平或垂直的菜单，并支持嵌套子菜单。el-menu 组件通常与 el-menu-item 和 el-submenu 组件一起使用。
mode 是 el-menu 组件的一个属性，用于设置菜单的显示模式。它决定了菜单是以水平布局还是垂直布局显示。
mode 属性有两个可选值：
“horizontal”：水平布局模式。菜单项水平排列，通常用于顶部导航栏或水平工具栏的菜单。在水平模式下，菜单项从左到右水平排列，适合于较宽的容器。
“vertical”：垂直布局模式。菜单项垂直排列，通常用于侧边栏或垂直导航栏的菜单。在垂直模式下，菜单项从上到下垂直排列，适合于较窄的容器。
collapse 是 el-menu 组件的一个属性，用于设置菜单是否可折叠（展开和收起）。
网站设计常用组件 第3篇
该组件为简单基础的一个登录模块，使用v-if实现登录和注册之间的切换，并使用transition以实现切换动画
代码如下
此轮播图模块较为复杂，它实现了电脑屏幕和手机屏幕两套不同的图片轮播，且手机屏幕下可以通过滑动切换图片
检测div的位置以实现当其进入或离开视窗的时候触发动画