- 从小元素开始组建
- ![[Pasted image 20240530175253.png]]
- 组建成一个组件
- ![[Pasted image 20240530175328.png]]
- 把组件组成布局
- 把布局结合成网站
常见元素
- 文本（text）
- 标题，副标题，文本
- 按钮（button）
- 图像（image）
- 输入元素（input elements）
- 标签（tags）
常用组件
![[Pasted image 20240530175854.png]]
1.导航页![[Pasted image 20240530180428.png]]
2.分页符
![[Pasted image 20240530180505.png]]
3.状态栏
![[Pasted image 20240530180539.png]]
4.画廊
![[Pasted image 20240530180756.png]]
5.功能盒
![[Pasted image 20240530180908.png]]
6.资料卡
![[Pasted image 20240530181153.png]]
7.预览栏
![[Pasted image 20240530181323.png]]
8.折叠标签
![[Pasted image 20240530181418.png]]
9.选项卡
![[Pasted image 20240530181458.png]]
10.轮播图（滑块）
![[Pasted image 20240530181644.png]]
11.客户推荐
![[Pasted image 20240530181739.png]]
12.客户logo
![[Pasted image 20240530181932.png]]
13.来源证明
![[Pasted image 20240530182041.png]]
14.步骤组件
![[Pasted image 20240530182110.png]]
15.表单![[Pasted image 20240530182215.png]]
![[Pasted image 20240530182251.png]]
16.表格
![[Pasted image 20240530182342.png]]
17.定价表
![[Pasted image 20240530182434.png]]
18.功能窗口
![[Pasted image 20240530182534.png]]
![[Pasted image 20240530182543.png]]