被重瓣的太阳花惊艳到了,颜值不输月季

写这篇纯粹是因为我自己的「强迫症」——每次发博客时总要纠结标点符号用对没、中英文数字混在一起时格式乱不乱。作为设计从业者,看不得排版乱七八糟,直接影响内容的阅读体验。于是整理一篇指南,既给自己当规范,也分享给同样被这些细节困扰的小伙伴们。
点号的作用是点断,主要表示停顿和语气。
点号不能出现在一行的开头。
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文句号 | 全宽 | 。 | 中文输入法 | . | 用于中文句子结尾 |
英文句号 | 半宽 | . | 英文输入法 | . | 用于英文句子结尾或小数点 |
中文科技文献中的「句号」多使用「.」替代「。」,以避免同拉丁字母「o」或数字「0」混淆。
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文逗号 | 全宽 | , | 中文输入法 | , | 中文句子内停顿 |
英文逗号 | 半宽 | , | 英文输入法 | , | 英文句子内停顿或分隔列表 |
注意避免「一逗到底」,即整个段落除了结尾,全部停顿都使用逗号,这样的语段理解难度是极高的。
逗号,连接句子,顿号,连接并列词语,主要是短促的词语,分号,用来表示复句的并列关系,一般情况下,分号不会单独存在。
逗号,连接句子。顿号,连接并列词语,主要是短促的词语。分号,用来表示复句的并列关系。一般情况下,分号不会单独存在。
顿号是中文特有标点。
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文顿号 | 全宽 | 、 | 中文输入法 | \ | 用于并列词语间的短停顿 |
英文不使用顿号,通过英文逗号实现中文顿号的功能 |
中文句子内部的并列词,应该用全宽顿号分隔,而不用逗号,即使并列词是英语也是如此。
我最欣赏的科技公司有 Google,Apple,字节跳动和阿里巴巴等。
我最欣赏的科技公司有 Google、Apple、字节跳动和阿里巴巴等。
英文句子中,并列词语之间使用半宽逗号(,)分隔。
Microsoft Office includes Word、Excel、PowerPoint、Outlook and other components.
Microsoft Office includes Word, Excel, PowerPoint, Outlook and other components.
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文冒号 | 全宽 | : | 中文输入法 | Shift + ; | 用于中文语境下引出解释和说明 |
英文冒号 | 半宽 | : | 英文输入法 | Shift + ; | 用于英文句子的解释、说明或时间表示 |
表示时间时,应使用半宽冒号(:)。
早上 8:05
早上 8:05
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文分号 | 全宽 | ; | 中文输入法 | ; | 用于中文复句中并列分句的停顿 |
英文分号 | 半宽 | ; | 英文输入法 | ; | 用于英文中连接相关独立子句或复杂列表项 |
中文句子内夹用英文句子或语段,保留该英文句子或语段内部的英文分号。
推开面试室的门时,他忽然记起祖父那句话:「Try, and you still have a chance; give up, and you shall have nothing.」。
中文句子内夹用英文单词或词组,使用中文分号。
这位老人的真实想法谁也猜不透:表示同意,他用 maybe;表示不同意,他还是用 maybe。
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文叹号 | 全宽 | ! | 中文输入法 | Shift + 1 | 用于标示中文句子的感叹语气 |
英文叹号 | 半宽 | ! | 英文输入法 | Shift + 1 | 用于标示英文句子的感叹语气 |
中文句子中,叹号叠用不应超过三个。
不可思议!!!!!!
不可思议!!!
英文句子中,叹号不可叠用。
This is unbelievable!!!
This is unbelievable!
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文问号 | 全宽 | ? | 中文输入法 | Shift + / | 用于标示中文句子的疑问语气 |
英文问号 | 半宽 | ? | 英文输入法 | Shift + / | 用于标示英文句子的疑问语气 |
问号也有标号的用法,即用于句内,表示存疑或不详。
钟蝶(?—518),川长社人,南朝梁代文学批评家。
Zhong Die (?–518), native of Chuanchangshe, was a Liang dynasty (Southern Dynasties) literary critic.
中文句子中,问号叠用不应超过三个,如「???」;英文句子中,问号不可叠用。
中文句子中,问号和叹号同时使用时,问号在前,叹号在后;英文句子中,问号和叹号不可同时使用。
真的!?
Really?!
真的?!
Really?
标号的作用是标明,主要标示某些成分(主要是词语)的特定性质和作用。
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | |||
---|---|---|---|---|---|---|
中文 | 单直角引号 | 全宽 | 「 」 | 中文输入法 | Shift + [ / ] | 用于标示中文句子中的引用、强调或特殊含义 |
双直角引号 | 『 』 | 在输入法符号面板中查找 | 用于中文引号内的二次引用或特殊强调 | |||
英文 | 双引号 | 半宽 | " " | 英文输入法 | Shift + ' | 用于标示英文句子中的引用、强调或特殊含义 |
单引号 | ' ' | ' | 用于英文引号内的二次引用或特殊强调 |
他批评道:「某些人鼓吹『『躺平』是自由』,这种价值观根本是『『逃避』的借口』。」
The editor noted, "The author argued, 'Critics misread the phrase ‘‘Life’ is a borrowed gift’ as nihilistic.'"
他批评道:「某些人鼓吹『「躺平」是自由』,这种价值观根本是『「逃避」的借口』。」
The editor noted, "The author argued, 'Critics misread the phrase "‘Life’ is a borrowed gift" as nihilistic.'"
在有多个独立成段的引文时,应该只在每段开头使用前引号,并且在最后一段结尾使用后引号。
他说:
「天生我材必有用,千金散尽还复来。」
「仰天大笑出门去,我辈岂是蓬蒿人。」
「抽刀断水水更流,举杯消愁愁更愁。」
他说:
「天生我材必有用,千金散尽还复来。
「仰天大笑出门去,我辈岂是蓬蒿人。
「抽刀断水水更流,举杯消愁愁更愁。」
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | |||
---|---|---|---|---|---|---|
中文 | 圆括号 | 全宽 | ( ) | 中文输入法 | Shift + 9 / 0 | 补充说明、注释、解释 |
方括号 | [ ] | 在输入法符号面板中查找 | 标识国籍 | |||
六角括号 | 〔 〕 | 在输入法符号面板中查找 | 标示所属朝代或公文发文字号中的发文年份 | |||
方头括号 | 【 】 | [ / ] | 标示被注释的词语 | |||
空心方头括号 | 〖 〗 | 在输入法符号面板中查找 | 作为二级标注符号使用 | |||
英文 | 圆括号 | 半宽 | ( ) | 英文输入法 | Shift + 9 / 0 | 补充说明、注释、解释 |
方括号 | [ ] | [ / ] | 引用补充、编辑修改 | |||
花括号 | { } | Shift + [ / ] | 编程、数学、集合 | |||
尖括号 | Shift + , / . | 编程 |
除科技书刊中的数学、逻辑公式外,所有括号(特别是同一形式的括号)应尽量避免套用。必须套用括号时,宜采用不同的括号形式配合使用。
〔茸(róng)毛〕很细很细的毛。
中文夹用英文注释,用中文全宽圆括号标示注释。
The Beatles 有一首歌,题为《除了我和我的猴子人人都想捂藏一点东西》(Everybody's Got Something to Hide except Me and My Monkey),这首歌后来音乐家称之为《猴子》。
The Beatles 有一首歌,题为《除了我和我的猴子人人都想捂藏一点东西》(Everybody's Got Something to Hide except Me and My Monkey),这首歌后来音乐家称之为《猴子》。
书名号是中文特有标点。
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | |||
---|---|---|---|---|---|---|
中文 | 双书名号 | 全宽 | 《 》 | 中文输入法 | Shift + / > | 用于中文正式出版物名称(主书名号) |
单书名号 | 〈 〉 | 在输入法符号面板中查找 | 用于书名号内的嵌套或次级作品名称 | |||
英文不使用书名号,以英文斜体字表示 |
标有引号、书名号的并列词语,分隔已经非常清晰,所以它们之间不需要再增加标点符号进行分隔了。
《三国演义》、《西游记》、《水浒传》、《红楼梦》并称四大名著。
《三国演义》《西游记》《水浒传》《红楼梦》并称四大名著。
但如果有更多符号穿插其中,比如书名号之后有括注,阅读起来就会十分混乱,所以这时就要用合适的符号进行连接和分割。
《三国演义》(罗贯中著)《西游记》(吴承恩著)《水浒传》(施耐庵著)《红楼梦》(曹雪芹著)并称四大名著。
《三国演义》(罗贯中著)、《西游记》(吴承恩著)、《水浒传》(施耐庵著)、《红楼梦》(曹雪芹著)并称四大名著。
书名号采用「双单交替」的嵌套规则,即《〈《〈〉》〉》。
〈某某集团关于下发《〈《子公司安全生产管理办法》修订版〉执行细则》的通知〉
《某某集团关于下发〈《〈子公司安全生产管理办法〉修订版》执行细则〉的通知》
中文句子中夹有英文书籍名、报刊名时,不能借用中文书名号,而应以英文斜体字表示。英文文章的标题用引号标示。
The Evening Post 发表了这篇评论,但把标题改成了「What We Eat Tomorrow?」。
表示语气或声音的延续、语意的转换或行文的补充。
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文破折号 | 全宽 占两个汉字宽度 | —— | 中文输入法 | Shift + - | 用于标示中文语气或声音的延续、语意的转换或行文的补充 |
英文破折号 | 长度相当于字母 n | – | 英文输入法 | Alt + 0150(数字键盘) | 用于标示数值范围、事物之间的关系等 |
长度相当于字母 m | — | Alt + 0151(数字键盘) | 用于标示语流的间断、插人、附加说明等 |
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文省略号 | 全宽 占两个汉字宽度 | …… | 中文输入法 | Shift + 6 | 用于标示中文内容的省略、语意未尽或语气的不连续 |
英文省略号 | 全宽 | … | 英文输入法 | Alt + 0133(数字键盘) | 用于标示英文内容的省略、语意未尽或语气的不连续 |
中文省略号不应与「等」这个词一起使用。
我们为会餐准备了香蕉、苹果、梨⋯⋯等各色水果。
我们为会餐准备了各色水果,有香蕉、苹果、梨⋯⋯
我们为会餐准备了香蕉、苹果、梨等各色水果。
英文句子中省略号使用全宽省略号(…)分隔。
Juan thought and thought ... and then thought some more.
Juan thought and thought…and then thought some more.
Juan thought and thought … and then thought some more.
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | |||
---|---|---|---|---|---|---|
中文连接号 | 短横线 | 半宽 | – | 中文输入法 | Alt + 0150(数字键盘) | 化合物的名称或表格、插图的编号、产品型号; 连接号码,包括门牌号码、电话号码,以及用阿拉伯数字表示年月日等; 在复合名词中起连接作用; 汉语拼音、外来语内部的分合。 |
一字线 | 全宽 | — | Alt + 0151(数字键盘) | 标示相关项目(如时间、地域等)的起止 | ||
浪纹线 | ~ | 在输入法符号面板中查找 | 标示数值范围的起止 | |||
英文连接号 | 即连字符 | 长度相当于字母 m 的 1/3 | - | 英文输入法 | - | 连接单词以构成复合词; 在行文移行时分隔音节; 构成分数和部分数字。 |
短横线的用法示例:
3–戊酮为无色液体,对眼及皮肤有强烈刺爱性
参见下页表 2–8、表 2–9
安宁里东路 26 号院 3–2–11 室
联系电话:010-88842603
2025–06–11
吐鲁番–哈密盆地
WZ–10 直升机具有复杂天气和夜间作战的能力。
shuōshuō–xiàoxiào(说说笑笑)
盎格鲁–撒克逊人
让–雅克·卢梭
一字线的用法示例:
沈括(1031一1095),宋朝人。
2025 年 6 月 9 日一2025 年 6 月 12 日
北京一上海特别旅客快车
浪纹线的用法示例:
25~30 g
第五~八课
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文间隔号 | 半宽 | · | 中文输入法 | ` 或 Alt + 0183(数字键盘) | 外国人名中文译名、少数民族音译名; 标识书名与篇、章、卷之间的分界; 以月、日为标志的事件或节日。 |
英文间隔号 | 半宽 | · | 英文输入法 | Alt + 0183(数字键盘) | 姓名缩写 术语并列 语言学 |
比尔·盖茨
《沁园春·雪》
「3·15」消费者权益日
当外语人名缩写成一个字母时,其后宜使用西文句点,而非中文间隔号。
B·盖茨
B. 盖茨
标点类型 | 符号形式 | Windows 输入方式 | 使用场景 | ||
---|---|---|---|---|---|
中文分隔号 | 全宽 | / | 中文输入法 | 在输入法符号面板中查找 | 分隔诗行; 分隔音节节拍; 表示「或」关系。 |
英文分隔号 | 半宽 | / | 英文输入法 | / | 分隔诗行; 分隔音节节拍; 表示「或」关系; 路径或网址分隔; 分数或日期简写。 |
中文间用全宽分隔号。
半身/对开
字母数字间用半宽分隔号。
3/4
em/en
https://gshuo.space
3/4
em/en
https://gshuo.space
通过Google搜索引擎,你可以更快地找到想要的信息。
通过 Google 搜索引擎,你可以更快地找到想要的信息。
专有产品名词,按照官方所定义的格式书写。
豆瓣FM
2025年6月17日,「积蒴一掷」发出这篇文章。
2025 年 6 月 17 日,「积蒴一掷」发出这篇文章。
2kg
2 kg
20±2%
p
1+1=2
20 ± 2%
p
1 + 1 = 2
¥ 10
¥10
英文的货币名称,建议参考国际标准 ISO 4217。
百分号(%)不是单位,因此应该紧挨在数字后面。
5 %
5%
2 x
3 n
2x
3n
一律使用半宽形式,不得使用全宽形式。
1234567890
1234567890
为方便阅读,整数部分超四位以上的阿拉伯数字,应添加半宽字符千分撇(,)。整数部分向左每三位一节,小数部分不分节。
100,000,0
0.000,1
1,000,000
0.0001
对于四位的数值,千分撇是选用的,比如「1000」和「1,000」都可以接受。
1000
1,000
表示数值范围时,用浪纹线(~)连接。前后两个数值的附加符号或计量单位相同时,在不造成歧义的情况下,前一个数值的附加符号或计量单位可省略,如果省略数值的附加符号或计量单位会造成歧义,则不应省略。
13~17 万元
15~30%
13 万元~17 万元
15%~30%
-36~-8 ℃
10 × 15 × 20 m
G-UI 是为贴合我个人的需求而制作,并应用到此站点。
背景 | 文本 | 边框 | ||||
---|---|---|---|---|---|---|
Class | 示例 | Class | 示例 | Class | 示例 | |
主色 | .g-theme-1 | 文本 | .g-text-theme-1 | 文本 | .g-border-theme-1 | |
.g-theme-2 | 文本 | .g-text-theme-2 | 文本 | .g-border-theme-2 | ||
.g-theme-3 | 文本 | .g-text-theme-3 | 文本 | .g-border-theme-3 | ||
.g-theme-4 | 文本 | .g-text-theme-4 | 文本 | .g-border-theme-4 | ||
.g-theme-5 .g-theme | 文本 | .g-text-theme-5 .g-text-theme | 文本 | .g-border-theme-5 .g-border-theme | ||
.g-theme-6 | 文本 | .g-text-theme-6 | 文本 | .g-border-theme-6 | ||
.g-theme-7 | 文本 | .g-text-theme-7 | 文本 | .g-border-theme-7 | ||
.g-theme-8 | 文本 | .g-text-theme-8 | 文本 | .g-border-theme-8 | ||
.g-theme-9 | 文本 | .g-text-theme-9 | 文本 | .g-border-theme-9 | ||
强调色 | .g-accent-1 | 文本 | .g-text-accent-1 | 文本 | .g-border-accent-1 | |
.g-accent-2 | 文本 | .g-text-accent-2 | 文本 | .g-border-accent-2 | ||
.g-accent-3 | 文本 | .g-text-accent-3 | 文本 | .g-border-accent-3 | ||
.g-accent-4 | 文本 | .g-text-accent-4 | 文本 | .g-border-accent-4 | ||
.g-accent-5 .g-accent-hue | 文本 | .g-text-accent-5 .g-text-accent | 文本 | .g-border-accent-5 .g-border-accent | ||
.g-accent-6 | 文本 | .g-text-accent-6 | 文本 | .g-border-accent-6 | ||
.g-accent-7 | 文本 | .g-text-accent-7 | 文本 | .g-border-accent-7 | ||
.g-accent-8 | 文本 | .g-text-accent-8 | 文本 | .g-border-accent-8 | ||
.g-accent-9 | 文本 | .g-text-accent-9 | 文本 | .g-border-accent-9 | ||
中性色 | .g-white | 文本 | .g-text-white | 文本 | .g-border-white | |
.g-grey-1 | 文本 | .g-text-grey-1 | 文本 | .g-border-grey-1 | ||
.g-grey-2 | 文本 | .g-text-grey-2 | 文本 | .g-border-grey-2 | ||
.g-grey-3 | 文本 | .g-text-grey-3 | 文本 | .g-border-grey-3 | ||
.g-grey-4 | 文本 | .g-text-grey-4 | 文本 | .g-border-grey-4 | ||
.g-grey-5 .g-grey | 文本 | .g-text-grey-5 .g-text-grey | 文本 | .g-border-grey-5 .g-border-grey | ||
.g-grey-6 | 文本 | .g-text-grey-6 | 文本 | .g-border-grey-6 | ||
.g-grey-7 | 文本 | .g-text-grey-7 | 文本 | .g-border-grey-7 | ||
.g-grey-8 | 文本 | .g-text-grey-8 | 文本 | .g-border-grey-8 | ||
.g-grey-9 | 文本 | .g-text-grey-9 | 文本 | .g-border-grey-9 | ||
.g-black | 文本 | .g-text-black | 文本 | .g-border-black | ||
成功色 | .g-success-1 | 文本 | .g-text-success-1 | 文本 | .g-border-success-1 | |
.g-success-2 | 文本 | .g-text-success-2 | 文本 | .g-border-success-2 | ||
.g-success-3 | 文本 | .g-text-success-3 | 文本 | .g-border-success-3 | ||
.g-success-4 | 文本 | .g-text-success-4 | 文本 | .g-border-success-4 | ||
.g-success-5 .g-success | 文本 | .g-text-success-5 .g-text-success | 文本 | .g-border-success-5 .g-border-success | ||
.g-success-6 | 文本 | .g-text-success-6 | 文本 | .g-border-success-6 | ||
.g-success-7 | 文本 | .g-text-success-7 | 文本 | .g-border-success-7 | ||
.g-success-8 | 文本 | .g-text-success-8 | 文本 | .g-border-success-8 | ||
.g-success-9 | 文本 | .g-text-success-9 | 文本 | .g-border-success-9 | ||
警告色 | .g-warning-1 | 文本 | .g-text-warning-1 | 文本 | .g-border-warning-1 | |
.g-warning-2 | 文本 | .g-text-warning-2 | 文本 | .g-border-warning-2 | ||
.g-warning-3 | 文本 | .g-text-warning-3 | 文本 | .g-border-warning-3 | ||
.g-warning-4 | 文本 | .g-text-warning-4 | 文本 | .g-border-warning-4 | ||
.g-warning-5 .g-warning | 文本 | .g-text-warning-5 .g-text-warning | 文本 | .g-border-warning-5 .g-border-warning | ||
.g-warning-6 | 文本 | .g-text-warning-6 | 文本 | .g-border-warning-6 | ||
.g-warning-7 | 文本 | .g-text-warning-7 | 文本 | .g-border-warning-7 | ||
.g-warning-8 | 文本 | .g-text-warning-8 | 文本 | .g-border-warning-8 | ||
.g-warning-9 | 文本 | .g-text-warning-9 | 文本 | .g-border-warning-9 | ||
错误色 | .g-error-1 | 文本 | .g-text-error-1 | 文本 | .g-border-error-1 | |
.g-error-2 | 文本 | .g-text-error-2 | 文本 | .g-border-error-2 | ||
.g-error-3 | 文本 | .g-text-error-3 | 文本 | .g-border-error-3 | ||
.g-error-4 | 文本 | .g-text-error-4 | 文本 | .g-border-error-4 | ||
.g-error-5 .g-error | 文本 | .g-text-error-5 .g-text-error | 文本 | .g-border-error-5 .g-border-error | ||
.g-error-6 | 文本 | .g-text-error-6 | 文本 | .g-border-error-6 | ||
.g-error-7 | 文本 | .g-text-error-7 | 文本 | .g-border-error-7 | ||
.g-error-8 | 文本 | .g-text-error-8 | 文本 | .g-border-error-8 | ||
.g-error-9 | 文本 | .g-text-error-9 | 文本 | .g-border-error-9 |
CSS 变量 | 默认值 | |
---|---|---|
主色 | --g-theme-hue | 80 |
强调色 | --g-accent-hue | 256 |
中性色 | --g-grey-hue | var(--g-theme-hue) |
成功色 | --g-success-hue | 140 |
警告色 | --g-warning-hue | 56 |
错误色 | --g-error-hue | 4 |
CSS 变量 | 默认值 | |
---|---|---|
中性色 | --g-grey-saturation | 1% |
其他颜色 | --g-theme-saturation | 80% |
CSS 变量 | 默认值 | ||
---|---|---|---|
亮色 | 暗色 | ||
白色 | --g-white-lightness | 100% | 4% |
黑色 | --g-black-lightness | 0% | 98% |
其他颜色 | --g-lightness-1 | 91% | 17% |
--g-lightness-2 | 78% | 28% | |
--g-lightness-3 | 66% | 39% | |
--g-lightness-4 | 55% | 49% | |
--g-lightness-5 | 45% | 59% | |
--g-lightness-6 | 35% | 68% | |
--g-lightness-7 | 25% | 77% | |
--g-lightness-8 | 16% | 85% | |
--g-lightness-9 | 8% | 92% |
Class | CSS 变量 | 默认值 | 示例 |
---|---|---|---|
.g-opacity-1 | --g-opacity-1 | 8% | 文本 |
.g-opacity-2 | --g-opacity-2 | 16% | 文本 |
.g-opacity-3 | --g-opacity-3 | 25% | 文本 |
.g-opacity-4 | --g-opacity-4 | 35% | 文本 |
.g-opacity-5 | --g-opacity-5 | 45% | 文本 |
.g-opacity-6 | --g-opacity-6 | 55% | 文本 |
.g-opacity-7 | --g-opacity-7 | 66% | 文本 |
.g-opacity-8 | --g-opacity-8 | 78% | 文本 |
.g-opacity-9 | --g-opacity-9 | 91% | 文本 |
断点分类 | 最小宽度 | CSS |
---|---|---|
xs | 0rem | @media (min-width: 0rem) |
sm | 30rem | @media (min-width: 30rem) |
md | 40rem | @media (min-width: 40rem) |
lg | 60rem | @media (min-width: 60rem) |
xl | 80rem | @media (min-width: 80rem) |
2xl | 100rem | @media (min-width: 100rem) |
3xl | 120rem | @media (min-width: 120rem) |
4xl | 150rem | @media (min-width: 150rem) |
5xl | 180rem | @media (min-width: 180rem) |
Class | CSS 变量 | 默认值 |
---|---|---|
.g-row | ||
.g-col-xs-1 .g-col-sm-1 .g-col-md-1 .g-col-lg-1 .g-col-xl-1 .g-col-2xl-1 .g-col-3xl-1 .g-col-4xl-1 .g-col-5xl-1 | --g-row-1 | 1fr |
.g-col-xs-2 .g-col-sm-2 .g-col-md-2 .g-col-lg-2 .g-col-xl-2 .g-col-2xl-2 .g-col-3xl-2 .g-col-4xl-2 .g-col-5xl-2 | --g-row-2 | repeat(2, 1fr) |
.g-col-xs-3 .g-col-sm-3 .g-col-md-3 .g-col-lg-3 .g-col-xl-3 .g-col-2xl-3 .g-col-3xl-3 .g-col-4xl-3 .g-col-5xl-3 | --g-row-3 | repeat(3, 1fr) |
.g-col-xs-4 .g-col-sm-4 .g-col-md-4 .g-col-lg-4 .g-col-xl-4 .g-col-2xl-4 .g-col-3xl-4 .g-col-4xl-4 .g-col-5xl-4 | --g-row-4 | repeat(4, 1fr) |
.g-col-xs-5 .g-col-sm-5 .g-col-md-5 .g-col-lg-5 .g-col-xl-5 .g-col-2xl-5 .g-col-3xl-5 .g-col-4xl-5 .g-col-5xl-5 | --g-row-5 | repeat(5, 1fr) |
.g-col-xs-6 .g-col-sm-6 .g-col-md-6 .g-col-lg-6 .g-col-xl-6 .g-col-2xl-6 .g-col-3xl-6 .g-col-4xl-6 .g-col-5xl-6 | --g-row-6 | repeat(6, 1fr) |
.g-col-xs-7 .g-col-sm-7 .g-col-md-7 .g-col-lg-7 .g-col-xl-7 .g-col-2xl-7 .g-col-3xl-7 .g-col-4xl-7 .g-col-5xl-7 | --g-row-7 | repeat(7, 1fr) |
.g-col-xs-8 .g-col-sm-8 .g-col-md-8 .g-col-lg-8 .g-col-xl-8 .g-col-2xl-8 .g-col-3xl-8 .g-col-4xl-8 .g-col-5xl-8 | --g-row-8 | repeat(8, 1fr) |
.g-col-xs-9 .g-col-sm-9 .g-col-md-9 .g-col-lg-9 .g-col-xl-9 .g-col-2xl-9 .g-col-3xl-9 .g-col-4xl-9 .g-col-5xl-9 | --g-row-9 | repeat(9, 1fr) |
.g-col-xs-10 .g-col-sm-10 .g-col-md-10 .g-col-lg-10 .g-col-xl-10 .g-col-2xl-10 .g-col-3xl-10 .g-col-4xl-10 .g-col-5xl-10 | --g-row-10 | repeat(10, 1fr) |
.g-col-xs-11 .g-col-sm-11 .g-col-md-11 .g-col-lg-11 .g-col-xl-11 .g-col-2xl-11 .g-col-3xl-11 .g-col-4xl-11 .g-col-5xl-11 | --g-row-11 | repeat(11, 1fr) |
.g-col-xs-12 .g-col-sm-12 .g-col-md-12 .g-col-lg-12 .g-col-xl-12 .g-col-2xl-12 .g-col-3xl-12 .g-col-4xl-12 .g-col-5xl-12 | --g-row-12 | repeat(12, 1fr) |
示例
g-col-xs-12
g-col-lg-4
g-col-xs-12
g-col-lg-8
<div class="g-row">
<div class="g-col-xs-12 g-col-lg-4 g-theme-4 g-text-center">g-col-xs-12<br/>g-col-lg-4</div>
<div class="g-col-xs-12 g-col-lg-8 g-theme-5 g-text-center">g-col-xs-12<br/>g-col-lg-8</div>
</div>
Class | CSS 变量 | 默认值 |
---|---|---|
.g-row-xs-1 .g-row-sm-1 .g-row-md-1 .g-row-lg-1 .g-row-xl-1 .g-row-2xl-1 .g-row-3xl-1 .g-row-4xl-1 .g-row-5xl-1 | --g-col-1 | span 1 |
.g-row-xs-2 .g-row-sm-2 .g-row-md-2 .g-row-lg-2 .g-row-xl-2 .g-row-2xl-2 .g-row-3xl-2 .g-row-4xl-2 .g-row-5xl-2 | --g-col-2 | span 2 |
.g-row-xs-3 .g-row-sm-3 .g-row-md-3 .g-row-lg-3 .g-row-xl-3 .g-row-2xl-3 .g-row-3xl-3 .g-row-4xl-3 .g-row-5xl-3 | --g-col-3 | span 3 |
.g-row-xs-4 .g-row-sm-4 .g-row-md-4 .g-row-lg-4 .g-row-xl-4 .g-row-2xl-4 .g-row-3xl-4 .g-row-4xl-4 .g-row-5xl-4 | --g-col-4 | span 4 |
.g-row-xs-5 .g-row-sm-5 .g-row-md-5 .g-row-lg-5 .g-row-xl-5 .g-row-2xl-5 .g-row-3xl-5 .g-row-4xl-5 .g-row-5xl-5 | --g-col-5 | span 5 |
.g-row-xs-6 .g-row-sm-6 .g-row-md-6 .g-row-lg-6 .g-row-xl-6 .g-row-2xl-6 .g-row-3xl-6 .g-row-4xl-6 .g-row-5xl-6 | --g-col-6 | span 6 |
.g-row-xs-7 .g-row-sm-7 .g-row-md-7 .g-row-lg-7 .g-row-xl-7 .g-row-2xl-7 .g-row-3xl-7 .g-row-4xl-7 .g-row-5xl-7 | --g-col-7 | span 7 |
.g-row-xs-8 .g-row-sm-8 .g-row-md-8 .g-row-lg-8 .g-row-xl-8 .g-row-2xl-8 .g-row-3xl-8 .g-row-4xl-8 .g-row-5xl-8 | --g-col-8 | span 8 |
.g-row-xs-9 .g-row-sm-9 .g-row-md-9 .g-row-lg-9 .g-row-xl-9 .g-row-2xl-9 .g-row-3xl-9 .g-row-4xl-9 .g-row-5xl-9 | --g-col-9 | span 9 |
.g-row-xs-10 .g-row-sm-10 .g-row-md-10 .g-row-lg-10 .g-row-xl-10 .g-row-2xl-10 .g-row-3xl-10 .g-row-4xl-10 .g-row-5xl-10 | --g-col-10 | span 10 |
.g-row-xs-11 .g-row-sm-11 .g-row-md-11 .g-row-lg-11 .g-row-xl-11 .g-row-2xl-11 .g-row-3xl-11 .g-row-4xl-11 .g-row-5xl-11 | --g-col-11 | span 11 |
.g-row-xs-12 .g-row-sm-12 .g-row-md-12 .g-row-lg-12 .g-row-xl-12 .g-row-2xl-12 .g-row-3xl-12 .g-row-4xl-12 .g-row-5xl-12 | --g-col-12 | span 12 |
示例
g-col
g-col
g-col
g-col
<div class="g-row-xs-2 g-row-lg-4">
<div class="g-theme-4 g-text-center">g-col</div>
<div class="g-theme-5 g-text-center">g-col</div>
<div class="g-theme-6 g-text-center">g-col</div>
<div class="g-theme-7 g-text-center">g-col</div>
</div>
up | 在指定宽度及以上的设备上隐藏 |
down | 在指定宽度及以下的设备上隐藏 |
Class | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl |
---|---|---|---|---|---|---|---|---|---|
.g-hidden-xs-up | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.g-hidden-sm-up | 可见 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.g-hidden-md-up | 可见 | 可见 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.g-hidden-lg-up | 可见 | 可见 | 可见 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.g-hidden-xl-up | 可见 | 可见 | 可见 | 可见 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.g-hidden-2xl-up | 可见 | 可见 | 可见 | 可见 | 可见 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
.g-hidden-3xl-up | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 隐藏 | 隐藏 | 隐藏 |
.g-hidden-4xl-up | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 隐藏 | 隐藏 |
.g-hidden-5xl-up | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 隐藏 |
.g-hidden-xs-down | 隐藏 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 |
.g-hidden-sm-down | 隐藏 | 隐藏 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 |
.g-hidden-md-down | 隐藏 | 隐藏 | 隐藏 | 可见 | 可见 | 可见 | 可见 | 可见 | 可见 |
.g-hidden-lg-down | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 可见 | 可见 | 可见 | 可见 | 可见 |
.g-hidden-xl-down | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 可见 | 可见 | 可见 | 可见 |
.g-hidden-2xl-down | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 可见 | 可见 | 可见 |
.g-hidden-3xl-down | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 可见 | 可见 |
.g-hidden-4xl-down | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 可见 |
.g-hidden-5xl-down | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 | 隐藏 |
Class | CSS 变量 | 默认值 | ||
---|---|---|---|---|
width | height | xs | md | |
.g-w-1 | .g-h-1 | --g-size-1 | 1px | 0.125rem |
.g-w-2 | .g-h-2 | --g-size-2 | 0.125rem | 0.25rem |
.g-w-3 | .g-h-3 | --g-size-3 | 0.25rem | 0.375rem |
.g-w-4 | .g-h-4 | --g-size-4 | 0.375rem | 0.5rem |
.g-w-5 | .g-h-5 | --g-size-5 | 0.5rem | 0.625rem |
.g-w-6 | .g-h-6 | --g-size-6 | 0.625rem | 0.75rem |
.g-w-7 | .g-h-7 | --g-size-7 | 0.75rem | 0.875rem |
.g-w-8 | .g-h-8 | --g-size-8 | 0.875rem | 1rem |
.g-w-9 | .g-h-9 | --g-size-9 | 1rem | 1.25rem |
.g-w-10 | .g-h-10 | --g-size-10 | 1.25rem | 1.625rem |
.g-w-11 | .g-h-11 | --g-size-11 | 1.625rem | 2.125rem |
.g-w-12 | .g-h-12 | --g-size-12 | 2.125rem | 2.75rem |
.g-w-13 | .g-h-13 | --g-size-13 | 2.75rem | 3.5rem |
.g-w-14 | .g-h-14 | --g-size-14 | 3.5rem | 4.375rem |
.g-w-15 | .g-h-15 | --g-size-15 | 4.375rem | 5.375rem |
.g-w-16 | .g-h-16 | --g-size-16 | 5.375rem | 6.5rem |
.g-w-17 | .g-h-17 | --g-size-17 | 6.5rem | 7.75rem |
.g-w-18 | .g-h-18 | --g-size-18 | 7.75rem | 9.125rem |
.g-w-19 | .g-h-19 | --g-size-19 | 9.125rem | 10.625rem |
.g-w-20 | .g-h-20 | --g-size-20 | 10.625rem | 12.25rem |
.g-w-21 | .g-h-21 | --g-size-21 | 12.25rem | 14rem |
.g-w-22 | .g-h-22 | --g-size-22 | 14rem | 15.875rem |
.g-w-23 | .g-h-23 | --g-size-23 | 15.875rem | 17.875rem |
.g-w-24 | .g-h-24 | --g-size-24 | 17.875rem | 20rem |
全 | 默认 |
左右 / X 轴 | x |
上下 / Y 轴 | y |
上 | t |
下 | b |
左 | l |
右 | r |
Class | CSS 变量 | 默认值 | ||
---|---|---|---|---|
padding | margin | gap | ||
.g-p-1 .g-px-1 .g-py-1 .g-pt-1 .g-pr-1 .g-pb-1 .g-pl-1 | .g-m-1 .g-mx-1 .g-my-1 .g-mt-1 .g-mr-1 .g-mb-1 .g-ml-1 | .g-g-1 .g-gx-1 .g-gy-1 | --g-spacing-1 | var(--g-size-1) |
.g-p-2 .g-px-2 .g-py-2 .g-pt-2 .g-pr-2 .g-pb-2 .g-pl-2 | .g-m-2 .g-mx-2 .g-my-2 .g-mt-2 .g-mr-2 .g-mb-2 .g-ml-2 | .g-g-2 .g-gx-2 .g-gy-2 | --g-spacing-2 | var(--g-size-2) |
.g-p-3 .g-px-3 .g-py-3 .g-pt-3 .g-pr-3 .g-pb-3 .g-pl-3 | .g-m-3 .g-mx-3 .g-my-3 .g-mt-3 .g-mr-3 .g-mb-3 .g-ml-3 | .g-g-3 .g-gx-3 .g-gy-3 | --g-spacing-3 | var(--g-size-3) |
.g-p-4 .g-px-4 .g-py-4 .g-pt-4 .g-pr-4 .g-pb-4 .g-pl-4 | .g-m-4 .g-mx-4 .g-my-4 .g-mt-4 .g-mr-4 .g-mb-4 .g-ml-4 | .g-g-4 .g-gx-4 .g-gy-4 | --g-spacing-4 | var(--g-size-4) |
.g-p-5 .g-px-5 .g-py-5 .g-pt-5 .g-pr-5 .g-pb-5 .g-pl-5 | .g-m-5 .g-mx-5 .g-my-5 .g-mt-5 .g-mr-5 .g-mb-5 .g-ml-5 | .g-g-5 .g-gx-5 .g-gy-5 | --g-spacing-5 | var(--g-size-5) |
.g-p-6 .g-px-6 .g-py-6 .g-pt-6 .g-pr-6 .g-pb-6 .g-pl-6 | .g-m-6 .g-mx-6 .g-my-6 .g-mt-6 .g-mr-6 .g-mb-6 .g-ml-6 | .g-g-6 .g-gx-6 .g-gy-6 | --g-spacing-6 | var(--g-size-6) |
.g-p-7 .g-px-7 .g-py-7 .g-pt-7 .g-pr-7 .g-pb-7 .g-pl-7 | .g-m-7 .g-mx-7 .g-my-7 .g-mt-7 .g-mr-7 .g-mb-7 .g-ml-7 | .g-g-7 .g-gx-7 .g-gy-7 | --g-spacing-7 | var(--g-size-7) |
.g-p-8 .g-px-8 .g-py-8 .g-pt-8 .g-pr-8 .g-pb-8 .g-pl-8 | .g-m-8 .g-mx-8 .g-my-8 .g-mt-8 .g-mr-8 .g-mb-8 .g-ml-8 | .g-g-8 .g-gx-8 .g-gy-8 | --g-spacing-8 | var(--g-size-8) |
.g-p-9 .g-px-9 .g-py-9 .g-pt-9 .g-pr-9 .g-pb-9 .g-pl-9 | .g-m-9 .g-mx-9 .g-my-9 .g-mt-9 .g-mr-9 .g-mb-9 .g-ml-9 | .g-g-9 .g-gx-9 .g-gy-9 | --g-spacing-9 | var(--g-size-9) |
.g-p-10 .g-px-10 .g-py-10 .g-pt-10 .g-pr-10 .g-pb-10 .g-pl-10 | .g-m-10 .g-mx-10 .g-my-10 .g-mt-10 .g-mr-10 .g-mb-10 .g-ml-10 | .g-g-10 .g-gx-10 .g-gy-10 | --g-spacing-10 | var(--g-size-11) |
.g-p-11 .g-px-11 .g-py-11 .g-pt-11 .g-pr-11 .g-pb-11 .g-pl-11 | .g-m-11 .g-mx-11 .g-my-11 .g-mt-11 .g-mr-11 .g-mb-11 .g-ml-11 | .g-g-11 .g-gx-11 .g-gy-11 | --g-spacing-11 | var(--g-size-11) |
.g-p-12 .g-px-12 .g-py-12 .g-pt-12 .g-pr-12 .g-pb-12 .g-pl-12 | .g-m-12 .g-mx-12 .g-my-12 .g-mt-12 .g-mr-12 .g-mb-12 .g-ml-12 | .g-g-12 .g-gx-12 .g-gy-12 | --g-spacing-12 | var(--g-size-12) |
G-UI 内置了 Material Icons,你可以点击前往复制图标代码。
用法:在 <i>
元素中添加类 .g-icon
和图标代码即可。
search home menu close settings add delete chevron_left chevron_right check
<i class="g-icon">search</i>
<i class="g-icon">home</i>
<i class="g-icon">menu</i>
<i class="g-icon">close</i>
<i class="g-icon">settings</i>
<i class="g-icon">add</i>
<i class="g-icon">delete</i>
<i class="g-icon">chevron_left</i>
<i class="g-icon">chevron_right</i>
<i class="g-icon">check</i>
在文章的父元素上添加 .g-typo
类,就能优化整篇文章的显示样式,包括表格。
<div class="g-typo">
<h1>标题</h1>
<p>正文</p>
<table>
...
</table>
</div>
Roboto 是 Material Design 使用的标准字体,G-UI 框架内置了该字体文件。
Class | CSS 变量 | 默认值 | 示例 |
---|---|---|---|
.g-text-1 | --g-font-size-1 | var(--g-size-6) | 文本 Display 1 |
.g-text-2 | --g-font-size-2 | var(--g-size-7) | 文本 Display 2 |
.g-text-3 | --g-font-size-3 | var(--g-size-8) | 文本 Display 3 |
.g-text-4 | --g-font-size-4 | var(--g-size-9) | 文本 Display 4 |
.g-text-5 | --g-font-size-5 | var(--g-size-10) | 文本 Display 5 |
.g-text-6 | --g-font-size-6 | var(--g-size-111) | 文本 Display 6 |
.g-text-7 | --g-font-size-7 | var(--g-size-12) | 文本 Display 7 |
.g-text-8 | --g-font-size-8 | var(--g-size-13) | 文本 Display 8 |
.g-text-9 | --g-font-size-9 | var(--g-size-14) | 文本 Display 9 |
Class | CSS 变量 | 默认值 | 示例 |
---|---|---|---|
.g-font-weight-1 | --g-font-weight-1 | 100 | 文本 Display 1 |
.g-font-weight-2 | --g-font-weight-2 | 300 | 文本 Display 2 |
.g-font-weight-3 | --g-font-weight-3 | 400 | 文本 Display 3 |
.g-font-weight-4 | --g-font-weight-4 | 500 | 文本 Display 4 |
.g-font-weight-5 | --g-font-weight-5 | 700 | 文本 Display 5 |
.g-font-weight-6 | --g-font-weight-6 | 900 | 文本 Display 6 |
Class | CSS 变量 | 默认值 |
---|---|---|
--g-line-height-increment | 0.75rem | |
.g-line-height-0 | 1 | |
.g-line-height-1 | --g-line-height-1 | calc(var(--g-size-5) + var(--g-line-height-increment)) |
.g-line-height-2 | --g-line-height-2 | calc(var(--g-size-6) + var(--g-line-height-increment)) |
.g-line-height-3 | --g-line-height-3 | calc(var(--g-size-7) + var(--g-line-height-increment)) |
.g-line-height-4 | --g-line-height-4 | calc(var(--g-size-8) + var(--g-line-height-increment)) |
.g-line-height-5 | --g-line-height-5 | calc(var(--g-size-9) + var(--g-line-height-increment)) |
.g-line-height-6 | --g-line-height-6 | calc(var(--g-size-10) + var(--g-line-height-increment)) |
.g-line-height-7 | --g-line-height-7 | calc(var(--g-size-11) + var(--g-line-height-increment)) |
.g-line-height-8 | --g-line-height-8 | calc(var(--g-size-12) + var(--g-line-height-increment)) |
.g-line-height-9 | --g-line-height-9 | calc(var(--g-size-13) + var(--g-line-height-increment)) |
在 <table>
元素上添加以下类,即可对应高亮。
Class | 功能 |
---|---|
.g-table-highlight | 行列同时高亮 |
.g-table-highlight-x | 行高亮 |
.g-table-highlight-y | 列高亮 |
示例
月份 | 销售额 | 利润 |
---|---|---|
1月 | ¥120,000 | ¥30,000 |
2月 | ¥150,000 | ¥45,000 |
3月 | ¥180,000 | ¥60,000 |
<div class="g-table">
<table class="g-table-highlight">
<thead>
<tr>
<th>月份</th>
<th>销售额</th>
<th>利润</th>
</tr>
</thead>
<tbody>
<tr>
<td>1月</td>
<td>¥120,000</td>
<td>¥30,000</td>
</tr>
<tr>
<td>2月</td>
<td>¥150,000</td>
<td>¥45,000</td>
</tr>
<tr>
<td>3月</td>
<td>¥180,000</td>
<td>¥60,000</td>
</tr>
</tbody>
</table>
</div>
Class | CSS 变量 | 默认值 | 示例 |
---|---|---|---|
.g-radius-0 | none | ||
.g-radius-1 .g-radius-t-1 .g-radius-r-1 .g-radius-b-1 .g-radius-l-1 | --g-radius-1 | var(--g-size-2) | |
.g-radius-2 .g-radius-t-2 .g-radius-r-2 .g-radius-b-2 .g-radius-l-2 | --g-radius-2 | var(--g-size-5) | |
.g-radius-3 .g-radius-t-3 .g-radius-r-3 .g-radius-b-3 .g-radius-l-3 | --g-radius-3 | var(--g-size-8) | |
.g-radius-full .g-radius-t-full .g-radius-r-full .g-radius-b-full .g-radius-l-full | 9999rem |
Class | CSS 变量 | 示例 |
---|---|---|
.g-shadow-0 | ||
.g-shadow-1 | --g-shadow-1 | |
.g-shadow-2 | --g-shadow-2 | |
.g-shadow-3 | --g-shadow-3 |
Class | CSS 变量 | 默认值 | 示例 |
---|---|---|---|
.g-border-0 | none | ||
.g-border-1 .g-border-t-1 .g-border-r-1 .g-border-b-1 .g-border-l-1 .g-border-x-1 .g-border-y-1 | --g-border-1 | 1px | |
.g-border-2 .g-border-t-2 .g-border-r-2 .g-border-b-2 .g-border-l-2 .g-border-x-2 .g-border-y-2 | --g-border-2 | 0.125rem | |
.g-border-3 .g-border-t-3 .g-border-r-3 .g-border-b-3 .g-border-l-3 .g-border-x-3 .g-border-y-3 | --g-border-3 | 0.25rem |
类型 | CSS 变量 | 默认值 |
---|---|---|
缓动曲线 | --g-easing | cubic-bezier(0.2, 0, 0, 1) |
持续时间 | --g-duration-1 | 150ms |
--g-duration-2 | 300ms | |
--g-duration-3 | 700ms | |
过渡 | --g-transition-1 | all var(--g-duration-1) var(--g-easing) |
--g-transition-2 | all var(--g-duration-2) var(--g-easing) | |
--g-transition-3 | all var(--g-duration-3) var(--g-easing) |
预置动画 | Class | 示例 |
---|---|---|
旋转 | .g-animate-spin | refresh |
ping | .g-animate-ping | favorite |
弹跳 | .g-animate-bounce | arrow_downward |
为 <a>
或 <button>
元素添加类 .g-btn
即可获得文本按钮的样式。
类型Buttonaddchevron_leftButtonButtonchevron_right
<!-- 文本按钮 -->
<button class="g-btn">Button</button>
<!-- 图标按钮 -->
<button class="g-btn g-btn-icon"><i class="g-icon">add</i></button>
<!-- 文本图标按钮 -->
<button class="g-btn"><i class="g-icon">chevron_left</i>Button</button>
<button class="g-btn">Button<i class="g-icon">chevron_right</i></button>
大小ButtonButtonButtonButtonButtonButtonButtonButton
<!-- 常规按钮 -->
<button class="g-btn-1">Button</button>
<button class="g-btn-2">Button</button>
<button class="g-btn">Button</button>
<button class="g-btn-3">Button</button>
<!-- 全宽按钮 -->
<button class="g-btn-1 g-btn-block g-mt-6 g-mb-1">Button</button>
<button class="g-btn-2 g-btn-block g-my-1">Button</button>
<button class="g-btn g-btn-block g-my-1">Button</button>
<button class="g-btn-3 g-btn-block g-my-1" value="Button">Button</button>
样式ButtonButtonButtonButtonButton
<!-- 默认 -->
<button class="g-btn">Button</button>
<!-- 填色 -->
<button class="g-btn g-theme">Button</button>
<!-- 阴影 -->
<button class="g-btn g-shadow-1">Button</button>
<!-- 边框 -->
<button class="g-btn g-border-3 g-border-theme">Button</button>
<!-- 圆角 -->
<button class="g-btn g-radius-full">Button</button>
禁用
在按钮上加上 disabled
属性即可禁用按钮。ButtonButtonButtonButton
<button class="g-btn" disabled>Button</button>
<button class="g-btn g-theme" disabled>Button</button>
<button class="g-btn g-shadow-1" disabled>Button</button>
<button class="g-btn g-border-2 g-border-theme" disabled>Button</button>
G-UI 提供 4 种常见布局可引用。
<body class="g-layout-tb">
<div id="g-topbar"></div>
<div id="g-main"></div>
</body>
g-drawer-btn-fixed
可以使侧边栏按钮悬浮在页面左上角。在桌面设备上,抽屉栏按钮自动隐藏;在手机和平板上,抽屉栏按钮自动显示。
<body class="g-layout-lr">
<button class="g-btn-icon g-drawer-btn-fixed" id="g-drawer-btn">
<i class="g-icon" id="g-drawer-btn-icon">menu</i>
</button>
<div id="g-drawer"></div>
<div id="g-main"></div>
</body>
<body class="g-layout-tlr">
<div id="g-topbar">
<button id="g-drawer-btn" class="g-btn-icon">
<i id="g-drawer-btn-icon" class="g-icon">menu</i>
</button>
</div>
<div id="g-drawer"></div>
<div id="g-main"></div>
</body>
<body class="g-layout-ltb">
<div id="g-drawer"></div>
<div id="g-topbar">
<button id="g-drawer-btn" class="g-btn-icon">
<i id="g-drawer-btn-icon" class="g-icon">menu</i>
</button>
</div>
<div id="g-main"></div>
</body>
a | 根据内容自适应大小 |
f | 占据剩余空间 |
数量 | Class | |
---|---|---|
x | y | |
2 | .g-auto-x-fa .g-auto-x-af | .g-auto-y-fa .g-auto-y-af |
3 | .g-auto-x-faa .g-auto-x-afa .g-auto-x-aaf | .g-auto-y-faa .g-auto-y-afa .g-auto-x-aaf |
4 | .g-auto-x-faaa .g-auto-x-afaa .g-auto-x-aafa .g-auto-x-aaaf | .g-auto-y-faaa .g-auto-y-afaa .g-auto-y-aafa .g-auto-y-aaaf |
示例
<a class="g-auto-x-afaa g-gx-5">
<i class="g-icon">account_balance_wallet</i>
<div>现金</div>
<div>10.00</div>
<i class="g-icon">chevron_right</i>
</a>
链接行会自动继承父元素圆角大小。
<a class="g-link-row">链接行 1</a>
<a class="g-link-row" selected>链接行 2</a>
<ul class="g-list">
<li><a>列表 1</a></li>
<li><a>列表 2</a></li>
<li><a selected>列表 3</a></li>
</ul>
标签文本
帮助文本标签文本
帮助文本标签文本
帮助文本
<div class="g-textfield-1">
<label>标签文本</label>
<input type="text" placeholder="请输入内容" />
<span class="g-text-error">帮助文本</span>
</div>
<div class="g-textfield-2">
<label>标签文本</label>
<input type="text" placeholder="请输入内容" />
<span class="g-text-error">帮助文本</span>
</div>
<div class="g-textfield-3">
<label>标签文本</label>
<input type="text" placeholder="请输入内容" />
<span class="g-text-error">帮助文本</span>
</div>
<!-- 全宽禁用状态 -->
<div class="g-textfield g-textfield-block">
<input type="text" placeholder="请输入内容" disabled />
</div>
标签文本
帮助文本标签文本
帮助文本标签文本
帮助文本
<div class="g-textfield-1">
<label>标签文本</label>
<textarea placeholder="请输入内容" /></textarea>
<span class="g-text-error">帮助文本</span>
</div>
<div class="g-textfield-2">
<label>标签文本</label>
<textarea placeholder="请输入内容" /></textarea>
<span class="g-text-error">帮助文本</span>
</div>
<div class="g-textfield-3">
<label>标签文本</label>
<textarea placeholder="请输入内容" /></textarea>
<span class="g-text-error">帮助文本</span>
</div>
<!-- 全宽禁用状态 -->
<div class="g-textfield g-textfield-block">
<textarea placeholder="请输入内容" disabled /></textarea>
</div>
在 <select>
元素上添加类 g-select
即可为该元素赋予美化后的样式。
选择 1选择 2选择 3
<select class="g-select">
<option value="1" selected>选择 1</option>
<option value="2">选择 2</option>
<option value="3">选择 3</option>
</select>
全宽选择器
g-select-block
类可以拉伸到父元素的 100% 宽度,且变为块级(block)元素。
选择 1选择 2选择 3
<select class="g-select-block">
<option value="1" selected>选择 1</option>
<option value="2">选择 2</option>
<option value="3">选择 3</option>
</select>
禁用状态
在 select
元素上添加 disabled
属性,即可禁用选择器。
选择 1选择 2选择 3
<select class="g-select-block" disabled>
<option value="1" selected>选择 1</option>
<option value="2">选择 2</option>
<option value="3">选择 3</option>
</select>
[ ] 记住密码
<div class="g-checkbox">
<input type="checkbox">
<label>记住密码</label>
</div>
下面是一个标准选项卡。
selected
– 默认激活状态。disabled
– 禁用状态。选项卡 1选项卡 2选项卡 3
选项卡 1 的内容
选项卡 2 的内容
选项卡 3 的内容
<div class="g-tab-group">
<div class="g-tab">
<button>选项卡 1</button>
<button selected>选项卡 2</button>
<button disabled>选项卡 3</button>
</div>
<div class="g-typo"><hr></div>
<div class="g-tab-content">选项卡 1 的内容</div>
<div class="g-tab-content">选项卡 2 的内容</div>
<div class="g-tab-content">选项卡 3 的内容</div>
</div>
delete
<button class="g-btn g-btn-icon" data-dialog-id="del" onclick="gDialogOpen('del')"><i class="g-icon">delete</i></button>
<div class="g-dialog g-px-9 g-py-8" id="del">
<div class="g-text-4 g-font-weight-5">确定删除?</div>
<div class="g-text-3 g-mt-2">删除后将不可恢复。</div>
<div class="g-text-right g-mt-4">
<button class="g-btn" onclick="gDialogClose('del')">再想想</button>
<button class="g-btn g-error g-ml-2">删除</button>
</div>
</div>
把多个 a
标签放在一个面包屑容器 g-breadcrumb
内即可。当窗口宽度小于断点 sm
时,只保留最后一个。
[G-UI]()[组件]()[面包屑]()
<div class="g-breadcrumb">
<a>G-UI</a>
<a>组件</a>
<a>面包屑</a>
</div>
进度条
<div class="g-progress" value="60%"></div>
进度环
<div class="g-spinner"></div>
<div class="g-spinner" value="30%"></div>
<div class="g-spinner" value="60%"></div>
<div class="g-spinner" value="100%"></div>
<!-- 生成的大纲在这 -->
<div id="g-toc"></div>
<!-- 要识别文章放这 -->
<div id="g-article">文章内容</div>
<div id="g-gallery"><!-- 图片放这 --></div>
<div id="g-viewer">
<button class="g-btn-icon-dense" id="g-viewer-btn-close"><i class="g-icon">close</i></button>
<div id="g-viewer-toolbar">
<button class="g-btn-icon" id="g-viewer-btn-prev"><i class="g-icon">chevron_left</i></button>
<div id="g-viewer-label"></div>
<button class="g-btn-icon" id="g-viewer-btn-next"><i class="g-icon">chevron_right</i></button>
</div>
<img id="g-viewer-img">
<div id="g-viewer-mask"></div>
</div>
文本对齐 | Class 类名 |
---|---|
居中对齐 | g-text-center |
左对齐 | g-text-left |
右对齐 | g-text-right |
元素对齐 | Class 类名 |
---|---|
水平居中 | g-center |
垂直居中 | g-valign |
元素水平垂直居中:
<!-- 垂直居中 -->
<div class="g-valign">
<!-- 水平居中 -->
<div class="g-center"></div>
</div>
浮动 | Class 类名 |
---|---|
向左浮动 | g-float-left |
向右浮动 | g-float-right |
g-text-truncate
可以在文本长度超出限制时,自动截断,并用省略号代替。
这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文字。
<p class="g-text-truncate">这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文字。</p>
g-no-select
可以使元素禁止被选中。
这段文字禁止被选中。
<p class="g-no-select">这段文字禁止被选中。</p>
背景 | Class 类名 | 示例 |
---|---|---|
马赛克 | g-texture-mosaic-1 | |
g-texture-mosaic-2 | ||
点阵 | g-texture-dot-1 | |
g-texture-dot-2 | ||
渐变 | g-transparent-gradient-t | |
g-transparent-gradient-b | ||
g-transparent-gradient-l | ||
g-transparent-gradient-r |
植物名称 | 属名 | PPFD(µmol/m²/s) | DLI(mol/m²/d) |
---|
未找到匹配植物
光源 | Lux 转 PPFD<br/>转换系数 | PPFD 转 Lux<br/>转换系数 |
---|---|---|
色温 6500 K 的自然光 | 0.0230 | 43 |
色温 6500 K 的高显色 LED 灯 | 0.0172 | 58 |
色温 4000 K 的高显色 LED 灯 | 0.0178 | 56 |
色温 3000 K 的高显色 LED 灯 | 0.0190 | 52 |
色温 6500 K 的低显色 LED 灯 | 0.0134 | 74 |
色温 3500 K 的低显色 LED 灯 | 0.0160 | 62 |
色温 2000 K 的高压钠灯 | 0.0130 | 77 |
色温 3000 K 的卤素灯 | 0.0346 | 28 |
色温 3000 K 的陶瓷金属卤素灯 | 0.0182 | 55 |
色温 5000 K 的荧光节能灯 | 0.0135 | 74 |
单色红光 LED 灯 650 nm | 0.0769 | 13 |
单色蓝光 LED 灯 450 nm | 0.1156 | 9 |
紫光 LED 灯 450 + 650 nm | 0.0887 | 11 |
RBW 灯 450 + 650 nm + 3500 K<br/>(红、蓝、白一比一搭配的 LED 灯) | 0.0257 | 39 |
表格数据:光合有效辐射日累积量(DLI),单位 mol/m²/d
表格数据:VPD 值(kPa)
10 月中旬在淘宝薅的杏仁饼,到家后疯狂掉叶,直到一片叶子不剩,光秃秃的。期间看了下感觉应该是药害,马上给他洗过一次澡,之后一直控水养着,总算有点活过来的迹象。
⚠️ 本文包含一些关于植物病害和昆虫的图片,可能会造成视觉不适。请根据个人情况决定是否继续阅读。
植物的病害分为非侵染性病害和侵染性病害。
主要是植物的生长环境不佳而引起的。生长环境问题包括光照过强或过弱,肥料过多或缺乏,水分过多或缺乏,寒害,土壤酸碱度等。
光照问题可以通过调整植物位置来改善,夏季光照强时给植物进行适当的遮荫。
肥料缺乏:会引起植物缺素症,通常我们可以根据植物的叶片变化,来判断缺乏哪种元素。
植物缺素症状有时候并非缺乏某一元素造成的,可将叶片表现作为判断的参考。一旦判定可补充相应元素,最好选择含有微量元素的复合肥料,用于日常的追肥可以预防缺素症的发生。
因为气温降低导致植物枝叶变红,最后枯萎死亡。气温较低时需将植物移至室内,地栽植物适当增加覆盖物,加强保温。
不同的植物对土壤酸碱度的需求不同,它影响着植物对养分的吸收和利用。不同的植物对土壤酸碱度的适应性不同,有的喜酸性土壤,有的则适合碱性或中性土壤。
土壤过酸:
土壤过碱:
主要由病原生物引起的,具有传染性。常见的侵染性病害有白粉病、锈病、灰霉病、黑斑病、炭疽病、枝枯病褐斑病、根腐病等。
侵染性病害大都因为潮湿的环境造成的,所以营造一个通风干燥的环境,能避免大部分病害的发生。
叶片表面出现白色粉末状霉层,后期霉层变为灰色。叶片变黄、卷曲,严重时叶片枯死。
叶片、茎和果实上出现黄色或棕色的小斑点,斑点周围有黄色晕圈。严重时,斑点连成一片,导致叶片枯黄、落叶。
叶片、花朵和果实上出现灰色霉层,病斑呈水渍状,边缘褐色。严重时,病斑扩展至整个叶片,导致叶片腐烂。
叶片、枝干和果实表面出现黑色或灰色的煤烟状霉层,影响光合作用,使植株生长受阻。
叶片上出现圆形、椭圆形或不规则形状的病斑,病斑边缘清晰,颜色为褐色或黑色。严重时,病斑连成一片,导致叶片枯黄、脱落。
植株的茎、叶或根部出现不规则的黑褐色斑点或斑块,这些斑点迅速扩大并伴随着组织软化和腐烂,病情严重时,受感染的部位会完全变黑、干枯,最终导致整个植株死亡。
目前无药可救,早期可切除受感染的部分,并对植物土壤花盆进行消毒处理。
叶片主要表现为初期为黑色小斑点,逐渐扩大,褪成褐色,有同心轮斑纹,患处会出现细小黑色斑点。
枝干上出现褐色斑点,斑点逐渐扩大,导致枝干干枯、死亡。严重时,整株植株死亡。
植物根部会由白色变为褐色,最终变黑腐烂,并有腐臭味。地上部分生长缓慢,叶片发黄、枯萎。严重时,植株死亡。
由病原体引起的,主要影响十字花科作物,如大白菜和油菜、甘蓝、萝卜。感染后根腐病的植物的根部组织会异常膨大,形成类似肿瘤的结构。
深入了解:How to Identify, Control, and Prevent Clubroot
虫害会随着气温升高而逐渐增多,夏季是虫害的高发季节。
主要啃食芽、叶、茎。叶片通常有破洞,表面会残留光滑的粘液,通常在夜晚和清晨出没。
蜗牛
蛞蝓
主要啃食叶片。叶片通常有破洞,严重的只剩叶脉,叶片可见粪便,有的品种会把叶片卷起。
青虫
毛毛虫
祸害的叶子
啃食植物的叶、茎、花、果,不同品种危害部位有差异。叶片会有破洞或半透明破洞。
天牛
象甲
祸害的叶子
俗称“鬼画符”,潜伏在叶片内部啃食叶肉,叶片会出现不规则白色条纹。
潜叶蝇
潜叶蛾
幼虫祸害的叶子
主要危害植物的种子和根部。当植物出现非缺水性萎蔫,生长迟缓,可以通过翻土进行排查判断。
蛴螬
蝼蛄
深入了解:How to Identify and Treat root-knot Nematodes
蚜虫繁殖速度快,喜温暖干燥的环境。通常喜欢聚集在植物的新芽、嫩叶上吸食汁液。
蔷薇谷网蚜
豌豆无网管蚜
马铃薯长管蚜
豌豆修尾蚜(无翅孤雌蚜)
苍白超瘤蚜
蒿小长管蚜
感谢 INSECTA INTEGRATION 授权使用图片,图片来源:蚜科 Aphididae – IISDW 。
危害表现:蚜虫以吸食植物汁液为生,导致叶片卷曲、变形,生长不良。蚜虫排泄的蜜露,不仅会吸引蚂蚁,还可能引发煤污病等,甚至传播植物病毒,加重危害程度。
体型微小,繁衍快,喜高温干燥的环境,常隐藏在叶片背面活动及结网,能通过风、雨等自然方式传播。
叶螨
危害表现:主要以吸食植物叶片的汁液为生,导致叶片出现黄白色斑点,严重时叶片枯黄脱落。
叶螨祸害的叶子
叶螨结网
蚧壳虫是「五小害虫」之首,种类多,繁殖快,危害大,抗药性强。
扶桑绵粉蚧
草履蚧
橙蜡蚧
红蜡蚧
乌黑副盔蜡蚧
梨形原棉蜡蚧
感谢 INSECTA INTEGRATION 授权使用图片,图片来源:蚧科 Coccidae – IISDW 。
危害表现:常附着在植物枝干、果实和叶片吸食汁液,导致植株生长不良,甚至引起植株死亡。其分泌物还可能诱发煤污病。
多数蚧壳虫成虫因体外有蜡质保护层包裹,有较强的耐药。防治蚧壳虫的最佳时期是在孵化期到若虫期,这时介壳尚未形成或增厚,对药物较为敏感。
体型微小,常在潮湿、阴暗的土壤中滋生。
幼虫
成虫
危害表现:成虫通常不取食,对植物的直接危害较小,但会在土壤中产卵,幼虫啃食植物根系,影响植物根系生长。此外,还能传播真菌,可能导致植物感染病害。
粉虱通常群集于植物叶片的反面。一只雌性粉虱在一年内可以繁殖 9 到 10 代,并习惯在叶片背面产卵。随着温度上升,它们的产卵数量也会随之增加,但高于 40°C 时成虫会死亡。
幼虫
成虫
危害表现:粉虱以吸食植物汁液为生,导致叶片褪色卷曲和枯萎。同时还会分泌蜜露,引发煤污病。
蓟马体型微小,喜高温干燥,经常昼伏夜出(傍晚和夜间打药效果更佳),成虫擅长到处飞,多在植物的花朵、嫩叶等部位活动。
幼虫
成虫
危害表现:锉吸植物汁液,导致叶片变形、卷曲,花朵畸形,果实有疤痕,影响观赏价值和植物生长。
在迁飞的过程中,顺带传播病毒病。
蓟马祸害的叶子
蓟马祸害的花朵
蓟马祸害的果实
害虫处理:
枝叶修剪:
严重病虫害处理:
在购买农药时应该选择标有农药登记证号、农药生产许可证号和产品标准号的正规产品。建议选择知名品牌有保障,如国光、先正达、巴斯夫、拜耳
侵染性病害一般使用杀菌剂进行防治常用的杀菌剂有多菌灵、代森锰锌、百菌清等。
杀虫剂名称 | 主要灭杀对象 | 灭杀方式 |
---|---|---|
阿维菌素 | 青虫、毛毛虫、甲虫等食叶类害虫 | 触杀、胃毒 |
四聚乙醛 | 蜗牛、蛞蝓等软体类害虫 | 胃毒、触杀 |
辛硫磷 | 蛴螬、蝼蛄等地下类害虫 | 触杀、胃毒 |
吡虫啉 | 蚜虫、蓟马、粉虱、叶蝉等 | 内吸、触杀、胃毒 |
噻嗪酮 | 蚧壳虫 | 触杀、胃毒 |
灭蝇胺 | 潜叶蝇 | 内吸、触杀、胃毒 |
阿维菌素+乙螨唑 | 红蜘蛛 | 触杀、胃毒 |
药剂类型 | 配方 | 优点 | 缺点 | 使用场景及注意事项 |
---|---|---|---|---|
乳油 | 原药 + 溶剂 + 乳化剂 | 粘附性好、展布性好、渗透性强、残效期长 | 难以分解、容易残留 | 适用于杀虫剂,避免用于幼苗、生长周期短的蔬菜,高温(超过 35°C)环境下慎用 |
水剂 | 原药 + 水 | 使用方便、成本低 | 持效性差、易受雨水冲刷 | 雨季不宜使用,适用于快速施药的场合 |
可湿性粉剂 | 原药 + 填料 | 现配现用、粘附性好 | 部分质量较差,易吸潮结块堵喷头 | 杀虫效果好,不宜用于无人机喷洒,开封后的小包装应尽快用完 |
悬浮剂 | 原药 + 悬浮助剂 | 布洒均匀、粘附性好、易于储存 | 价格较高,药剂微粒可能对操作者健康产生影响 | 适用于大范围喷施,避免在室内或通风不良的环境中使用 |
颗粒剂 | 原药 + 填充剂 + 粘合剂(有时需要) | 使用安全、,持效长,适于大规模撒布 | 效果较慢,多雨时效果减,用于地下害虫、土壤处理 | 适用于地下害虫防治,撒布要均匀,深入土壤,避免作物接触 |
活不活在水,好不好在肥。自然界的植物即使不施肥也能健壮生长,但家庭盆裁的土质有别于自然界,所以适当施肥有利于植物生长。施肥需根据植物的养分需求、生长阶段、土壤状况以及气候,适量适度,否则也容易造成肥害或烧根烧苗等。
注意
以上种类大致分为这些,但并不是完全,肥料还有很多种,这些仅限于家庭种植常见的肥料。
水溶肥是指能够在水中溶解的肥料,一般分为固体水溶肥和液体水溶肥。通常都需要按比例兑水稀释使用,以液体形式供应给植物,能快速被植物吸收。
优点:
缺点:
*施用方式:*灌根 / 喷叶
缓释肥一般呈颗粒状,虽见效较慢但肥效时间较长,减少施肥频率。颗粒中的养分会随着浇水、温度变化等缓慢释放。
优点:
缺点:
*施用方式:*拌土 / 底肥 / 浅埋 / 撒土表
粪肥通常指的是动物粪便制成的有机肥料。动物粪便含有丰富的营养成分,包括氮、磷、钾等,对植物生长具有良好的促进作用。
肥力:鸡粪 > 羊粪 > 牛粪
优点:
缺点:
施用方式:拌土 / 底肥
微生物有机肥是指含有丰富微生物种群的有机肥料。这类肥料的制备过程通常包括微生物的培养、发酵等步骤,以便在肥料中维持或引入对植物生长有益的微生物。
优点:
缺点:
藻肥是一种来源于海藻的有机肥料,通过提取、分解或发酵海藻而制成。海藻是一种富含丰富营养物质的植物,因此藻肥含有多种有机物、矿物质和微量元素。
优点:
缺点:
肥料使用时一定要按产品说明控制好用量。
在换盆时,先放入少量底土(2cm 左右),然后撒入一些有机肥或缓释肥,然后再覆盖一层土。
适用:有机肥、缓释肥。
效果:见效慢,用量大,作用持久,
在花盆的边边,埋上一圈肥料,注意不能太靠近植物的根系。
适用:有机肥、缓释肥。
效果:见效慢,用量适中,作用持久。
适用:有机肥、缓释肥。
效果:见效慢,用量适中,作用持久。
化肥兑水,浇在盆里,按照使用说明的比例来兑水,浓度宁低毋高。
适用:化肥。
效果:见效适中,用量适中,肥效期适中。
化肥兑水,喷雾在叶面上,按照使用说明的比例来兑水,浓度宁低毋高。
适用:水溶肥。
效果:见效快,用量少,肥效期短。
吸收效率:新叶 > 老叶,叶背 > 叶面
适宜天气:光照不强、气温不高、没风没雨的天气。
(气温高光照强,一是气孔开启少,吸收效果差;二是水分蒸发太快,化肥浓度变高,易烧苗。)
注意:
一般极端天气 (过冷或过热) 某些植物会进入休眠,所以该阶段不宜施肥。适合多数植物的最佳施肥季节通常是春季和秋季。
🌷一年开花一次,且开花时间集中,在花苞显色后需要停肥
🌺一年多次开花,且开花时间分散,需要持续施肥补充营养
注意:不能因为下雨就随意提高化肥兑水浓度,叶子的正反面都要喷到。
雨季的土壤,吸水接近甚至达到饱和(各自的盆栽情况不同,不能一概而论),植物很难再吸水。
若此时灌根:
随着植物的生长,其体型和根系会逐渐增大,原有花盆的透气性和空间可能不足以支持根系的健康呼吸和伸展,这可能导致根系拥堵,呼吸不畅,进而影响植物的正常生长,表现为生长缓慢、开花减少甚至生长受阻。因此,适时更换更大的花盆对于保证植物根系的健康发展至关重要。
换盆的最佳时机一般在春季和秋季,此时气温适宜,植物生长旺盛,有利于换盆后快速恢复。尽量避开气温炎热的夏天换盆,以及植物的休眠期。
材质:
口径大小:
深浅:
排水孔:
颜色:
重量:
套盆是一种园艺装饰手法,指的是在一个较大的花盆内部放置一个较小的花盆,小的花盆中种植植物,而大的花盆则作为装饰和衬托。
如果你是新手,不建议大盆种小苗。原因如下:
使用大盆种植小苗的好处:
种植植物,无论是蔬菜、花卉还是绿植,土壤的选择和配比都是至关重要的。合适的土壤不仅能够提供植物所需的养分,还能保证土壤的透气性和保水性,为植物提供一个良好的生长环境。自配土并没有特定的公式或严格的标准,适合较有经验或爱动手的。
植物死亡后的分解物,含有机制,透气性保水性保肥性好,不易板结。
椰子壳加工而成,价格便宜,可部分替代泥炭土,注意要脱盐,泡发后用水冲洗 3 次以上去盐。
椰壳含纤维多,颗粒度大,疏松透气,是常用的配土材料之一,和椰糠土一样要脱盐。
稻壳碳化,富含钾元素,透水透气。保温性强,可杀菌防虫。
植物燃烧后的灰烬,富含钾元素的有机速肥,可杀菌驱虫。
材质轻,透气透水,利于根系生长,有黄白褐三色,含镁有离子交换性。但易粉化失效,浇水易上浮,适合育苗,不推荐长期使用。
价格便宜,质量很轻,透气透水,利于排水,但易粉化失效,浇水易上浮,适合育苗,不推荐长期使用。
赤玉土是一种来自日本的红色粘土,因其颜色而得名。微酸性,多孔结构透气性好含有较多养分,通透及保水性适中。
鹿沼土也是一种来自日本的粘土材料,通常含有较高的腐殖酸和营养元素。它常被用于多肉植物和其他对土壤要求较高的植物的种植。
日向石是一种含有大量硅质的岩石,常被用于园艺中作为基质材料或装饰品。它有助于提高土壤的 pH 值,促进植物生长。
桐生沙是一种细腻的沙质土壤,常被用于培养兰花等娇贵的植物。它具有良好的排水性和透气性,并能提供适量的养分。
透气性强,含矿物质及微量元素,可促进植物生长,常用于拌土或铺面,有红黑二色。
透气透水,保湿。能够平衡土壤物理机能,净化土壤,并含有一些微量元素,一般有软硬两种。
铝硅酸盐矿物,透气好,物理杀菌防黑腐,可一定程度防烧苗烂根,常铺面或拌土。
结构稳定不粉化,可拌土也可铺面,透水透气防虫,可清洗后反复使用。
性质疏松孔隙多,透气保水保肥弱酸性,质量轻强度高常用于拌土或铺底、铺面及兰花种植等。
硅藻土是一种含有大量硅质的沉积岩,常被用作园艺中的基质材料或装饰品。它的多孔结构和吸附能力有助于保持土壤的湿润,并为植物提供所需的养分。
价格便宜,质地轻,孔隙大,非常透气透水,能大大减少用土量。常用于垫盆底,铺面,拌土,水培植物。
透气性好保水性适中,可混合使用也可单独使用,常用于兰科类栽培,应使用发酵完全的松碳。
种植环境:
浇水习惯
植物名称 | 属名 | PPFD(µmol/m²/s) | DLI(mol/m²/d) |
---|
未找到匹配植物
表格数据:光合有效辐射日累积量(DLI),单位 mol/m²/d
表格数据:VPD 值(kPa)
10 月中旬在淘宝薅的杏仁饼,到家后疯狂掉叶,直到一片叶子不剩,光秃秃的。期间看了下感觉应该是药害,马上给他洗过一次澡,之后一直控水养着,总算有点活过来的迹象。
⚠️ 本文包含一些关于植物病害和昆虫的图片,可能会造成视觉不适。请根据个人情况决定是否继续阅读。
植物的病害分为非侵染性病害和侵染性病害。
主要是植物的生长环境不佳而引起的。生长环境问题包括光照过强或过弱,肥料过多或缺乏,水分过多或缺乏,寒害,土壤酸碱度等。
光照问题可以通过调整植物位置来改善,夏季光照强时给植物进行适当的遮荫。
肥料缺乏:会引起植物缺素症,通常我们可以根据植物的叶片变化,来判断缺乏哪种元素。
植物缺素症状有时候并非缺乏某一元素造成的,可将叶片表现作为判断的参考。一旦判定可补充相应元素,最好选择含有微量元素的复合肥料,用于日常的追肥可以预防缺素症的发生。
因为气温降低导致植物枝叶变红,最后枯萎死亡。气温较低时需将植物移至室内,地栽植物适当增加覆盖物,加强保温。
不同的植物对土壤酸碱度的需求不同,它影响着植物对养分的吸收和利用。不同的植物对土壤酸碱度的适应性不同,有的喜酸性土壤,有的则适合碱性或中性土壤。
土壤过酸:
土壤过碱:
主要由病原生物引起的,具有传染性。常见的侵染性病害有白粉病、锈病、灰霉病、黑斑病、炭疽病、枝枯病褐斑病、根腐病等。
侵染性病害大都因为潮湿的环境造成的,所以营造一个通风干燥的环境,能避免大部分病害的发生。
叶片表面出现白色粉末状霉层,后期霉层变为灰色。叶片变黄、卷曲,严重时叶片枯死。
叶片、茎和果实上出现黄色或棕色的小斑点,斑点周围有黄色晕圈。严重时,斑点连成一片,导致叶片枯黄、落叶。
叶片、花朵和果实上出现灰色霉层,病斑呈水渍状,边缘褐色。严重时,病斑扩展至整个叶片,导致叶片腐烂。
叶片、枝干和果实表面出现黑色或灰色的煤烟状霉层,影响光合作用,使植株生长受阻。
叶片上出现圆形、椭圆形或不规则形状的病斑,病斑边缘清晰,颜色为褐色或黑色。严重时,病斑连成一片,导致叶片枯黄、脱落。
植株的茎、叶或根部出现不规则的黑褐色斑点或斑块,这些斑点迅速扩大并伴随着组织软化和腐烂,病情严重时,受感染的部位会完全变黑、干枯,最终导致整个植株死亡。
目前无药可救,早期可切除受感染的部分,并对植物土壤花盆进行消毒处理。
叶片主要表现为初期为黑色小斑点,逐渐扩大,褪成褐色,有同心轮斑纹,患处会出现细小黑色斑点。
枝干上出现褐色斑点,斑点逐渐扩大,导致枝干干枯、死亡。严重时,整株植株死亡。
植物根部会由白色变为褐色,最终变黑腐烂,并有腐臭味。地上部分生长缓慢,叶片发黄、枯萎。严重时,植株死亡。
由病原体引起的,主要影响十字花科作物,如大白菜和油菜、甘蓝、萝卜。感染后根腐病的植物的根部组织会异常膨大,形成类似肿瘤的结构。
深入了解:How to Identify, Control, and Prevent Clubroot
虫害会随着气温升高而逐渐增多,夏季是虫害的高发季节。
主要啃食芽、叶、茎。叶片通常有破洞,表面会残留光滑的粘液,通常在夜晚和清晨出没。
蜗牛
蛞蝓
主要啃食叶片。叶片通常有破洞,严重的只剩叶脉,叶片可见粪便,有的品种会把叶片卷起。
青虫
毛毛虫
祸害的叶子
啃食植物的叶、茎、花、果,不同品种危害部位有差异。叶片会有破洞或半透明破洞。
天牛
象甲
祸害的叶子
俗称“鬼画符”,潜伏在叶片内部啃食叶肉,叶片会出现不规则白色条纹。
潜叶蝇
潜叶蛾
幼虫祸害的叶子
主要危害植物的种子和根部。当植物出现非缺水性萎蔫,生长迟缓,可以通过翻土进行排查判断。
蛴螬
蝼蛄
深入了解:How to Identify and Treat root-knot Nematodes
蚜虫繁殖速度快,喜温暖干燥的环境。通常喜欢聚集在植物的新芽、嫩叶上吸食汁液。
蔷薇谷网蚜
豌豆无网管蚜
马铃薯长管蚜
豌豆修尾蚜(无翅孤雌蚜)
苍白超瘤蚜
蒿小长管蚜
感谢 INSECTA INTEGRATION 授权使用图片,图片来源:蚜科 Aphididae – IISDW 。
危害表现:蚜虫以吸食植物汁液为生,导致叶片卷曲、变形,生长不良。蚜虫排泄的蜜露,不仅会吸引蚂蚁,还可能引发煤污病等,甚至传播植物病毒,加重危害程度。
体型微小,繁衍快,喜高温干燥的环境,常隐藏在叶片背面活动及结网,能通过风、雨等自然方式传播。
叶螨
危害表现:主要以吸食植物叶片的汁液为生,导致叶片出现黄白色斑点,严重时叶片枯黄脱落。
叶螨祸害的叶子
叶螨结网
蚧壳虫是「五小害虫」之首,种类多,繁殖快,危害大,抗药性强。
扶桑绵粉蚧
草履蚧
橙蜡蚧
红蜡蚧
乌黑副盔蜡蚧
梨形原棉蜡蚧
感谢 INSECTA INTEGRATION 授权使用图片,图片来源:蚧科 Coccidae – IISDW 。
危害表现:常附着在植物枝干、果实和叶片吸食汁液,导致植株生长不良,甚至引起植株死亡。其分泌物还可能诱发煤污病。
多数蚧壳虫成虫因体外有蜡质保护层包裹,有较强的耐药。防治蚧壳虫的最佳时期是在孵化期到若虫期,这时介壳尚未形成或增厚,对药物较为敏感。
体型微小,常在潮湿、阴暗的土壤中滋生。
幼虫
成虫
危害表现:成虫通常不取食,对植物的直接危害较小,但会在土壤中产卵,幼虫啃食植物根系,影响植物根系生长。此外,还能传播真菌,可能导致植物感染病害。
粉虱通常群集于植物叶片的反面。一只雌性粉虱在一年内可以繁殖 9 到 10 代,并习惯在叶片背面产卵。随着温度上升,它们的产卵数量也会随之增加,但高于 40°C 时成虫会死亡。
幼虫
成虫
危害表现:粉虱以吸食植物汁液为生,导致叶片褪色卷曲和枯萎。同时还会分泌蜜露,引发煤污病。
蓟马体型微小,喜高温干燥,经常昼伏夜出(傍晚和夜间打药效果更佳),成虫擅长到处飞,多在植物的花朵、嫩叶等部位活动。
幼虫
成虫
危害表现:锉吸植物汁液,导致叶片变形、卷曲,花朵畸形,果实有疤痕,影响观赏价值和植物生长。
在迁飞的过程中,顺带传播病毒病。
蓟马祸害的叶子
蓟马祸害的花朵
蓟马祸害的果实
害虫处理:
枝叶修剪:
严重病虫害处理:
在购买农药时应该选择标有农药登记证号、农药生产许可证号和产品标准号的正规产品。建议选择知名品牌有保障,如国光、先正达、巴斯夫、拜耳
侵染性病害一般使用杀菌剂进行防治常用的杀菌剂有多菌灵、代森锰锌、百菌清等。
杀虫剂名称 | 主要灭杀对象 | 灭杀方式 |
---|---|---|
阿维菌素 | 青虫、毛毛虫、甲虫等食叶类害虫 | 触杀、胃毒 |
四聚乙醛 | 蜗牛、蛞蝓等软体类害虫 | 胃毒、触杀 |
辛硫磷 | 蛴螬、蝼蛄等地下类害虫 | 触杀、胃毒 |
吡虫啉 | 蚜虫、蓟马、粉虱、叶蝉等 | 内吸、触杀、胃毒 |
噻嗪酮 | 蚧壳虫 | 触杀、胃毒 |
灭蝇胺 | 潜叶蝇 | 内吸、触杀、胃毒 |
阿维菌素+乙螨唑 | 红蜘蛛 | 触杀、胃毒 |
药剂类型 | 配方 | 优点 | 缺点 | 使用场景及注意事项 |
---|---|---|---|---|
乳油 | 原药 + 溶剂 + 乳化剂 | 粘附性好、展布性好、渗透性强、残效期长 | 难以分解、容易残留 | 适用于杀虫剂,避免用于幼苗、生长周期短的蔬菜,高温(超过 35°C)环境下慎用 |
水剂 | 原药 + 水 | 使用方便、成本低 | 持效性差、易受雨水冲刷 | 雨季不宜使用,适用于快速施药的场合 |
可湿性粉剂 | 原药 + 填料 | 现配现用、粘附性好 | 部分质量较差,易吸潮结块堵喷头 | 杀虫效果好,不宜用于无人机喷洒,开封后的小包装应尽快用完 |
悬浮剂 | 原药 + 悬浮助剂 | 布洒均匀、粘附性好、易于储存 | 价格较高,药剂微粒可能对操作者健康产生影响 | 适用于大范围喷施,避免在室内或通风不良的环境中使用 |
颗粒剂 | 原药 + 填充剂 + 粘合剂(有时需要) | 使用安全、,持效长,适于大规模撒布 | 效果较慢,多雨时效果减,用于地下害虫、土壤处理 | 适用于地下害虫防治,撒布要均匀,深入土壤,避免作物接触 |
活不活在水,好不好在肥。自然界的植物即使不施肥也能健壮生长,但家庭盆裁的土质有别于自然界,所以适当施肥有利于植物生长。施肥需根据植物的养分需求、生长阶段、土壤状况以及气候,适量适度,否则也容易造成肥害或烧根烧苗等。
注意
以上种类大致分为这些,但并不是完全,肥料还有很多种,这些仅限于家庭种植常见的肥料。
水溶肥是指能够在水中溶解的肥料,一般分为固体水溶肥和液体水溶肥。通常都需要按比例兑水稀释使用,以液体形式供应给植物,能快速被植物吸收。
优点:
缺点:
*施用方式:*灌根 / 喷叶
缓释肥一般呈颗粒状,虽见效较慢但肥效时间较长,减少施肥频率。颗粒中的养分会随着浇水、温度变化等缓慢释放。
优点:
缺点:
*施用方式:*拌土 / 底肥 / 浅埋 / 撒土表
粪肥通常指的是动物粪便制成的有机肥料。动物粪便含有丰富的营养成分,包括氮、磷、钾等,对植物生长具有良好的促进作用。
肥力:鸡粪 > 羊粪 > 牛粪
优点:
缺点:
施用方式:拌土 / 底肥
微生物有机肥是指含有丰富微生物种群的有机肥料。这类肥料的制备过程通常包括微生物的培养、发酵等步骤,以便在肥料中维持或引入对植物生长有益的微生物。
优点:
缺点:
藻肥是一种来源于海藻的有机肥料,通过提取、分解或发酵海藻而制成。海藻是一种富含丰富营养物质的植物,因此藻肥含有多种有机物、矿物质和微量元素。
优点:
缺点:
肥料使用时一定要按产品说明控制好用量。
在换盆时,先放入少量底土(2cm 左右),然后撒入一些有机肥或缓释肥,然后再覆盖一层土。
适用:有机肥、缓释肥。
效果:见效慢,用量大,作用持久,
在花盆的边边,埋上一圈肥料,注意不能太靠近植物的根系。
适用:有机肥、缓释肥。
效果:见效慢,用量适中,作用持久。
适用:有机肥、缓释肥。
效果:见效慢,用量适中,作用持久。
化肥兑水,浇在盆里,按照使用说明的比例来兑水,浓度宁低毋高。
适用:化肥。
效果:见效适中,用量适中,肥效期适中。
化肥兑水,喷雾在叶面上,按照使用说明的比例来兑水,浓度宁低毋高。
适用:水溶肥。
效果:见效快,用量少,肥效期短。
吸收效率:新叶 > 老叶,叶背 > 叶面
适宜天气:光照不强、气温不高、没风没雨的天气。
(气温高光照强,一是气孔开启少,吸收效果差;二是水分蒸发太快,化肥浓度变高,易烧苗。)
注意:
一般极端天气 (过冷或过热) 某些植物会进入休眠,所以该阶段不宜施肥。适合多数植物的最佳施肥季节通常是春季和秋季。
🌷一年开花一次,且开花时间集中,在花苞显色后需要停肥
🌺一年多次开花,且开花时间分散,需要持续施肥补充营养
注意:不能因为下雨就随意提高化肥兑水浓度,叶子的正反面都要喷到。
雨季的土壤,吸水接近甚至达到饱和(各自的盆栽情况不同,不能一概而论),植物很难再吸水。
若此时灌根:
随着植物的生长,其体型和根系会逐渐增大,原有花盆的透气性和空间可能不足以支持根系的健康呼吸和伸展,这可能导致根系拥堵,呼吸不畅,进而影响植物的正常生长,表现为生长缓慢、开花减少甚至生长受阻。因此,适时更换更大的花盆对于保证植物根系的健康发展至关重要。
换盆的最佳时机一般在春季和秋季,此时气温适宜,植物生长旺盛,有利于换盆后快速恢复。尽量避开气温炎热的夏天换盆,以及植物的休眠期。
材质:
口径大小:
深浅:
排水孔:
颜色:
重量:
套盆是一种园艺装饰手法,指的是在一个较大的花盆内部放置一个较小的花盆,小的花盆中种植植物,而大的花盆则作为装饰和衬托。
如果你是新手,不建议大盆种小苗。原因如下:
使用大盆种植小苗的好处:
种植植物,无论是蔬菜、花卉还是绿植,土壤的选择和配比都是至关重要的。合适的土壤不仅能够提供植物所需的养分,还能保证土壤的透气性和保水性,为植物提供一个良好的生长环境。自配土并没有特定的公式或严格的标准,适合较有经验或爱动手的。
植物死亡后的分解物,含有机制,透气性保水性保肥性好,不易板结。
椰子壳加工而成,价格便宜,可部分替代泥炭土,注意要脱盐,泡发后用水冲洗 3 次以上去盐。
椰壳含纤维多,颗粒度大,疏松透气,是常用的配土材料之一,和椰糠土一样要脱盐。
稻壳碳化,富含钾元素,透水透气。保温性强,可杀菌防虫。
植物燃烧后的灰烬,富含钾元素的有机速肥,可杀菌驱虫。
材质轻,透气透水,利于根系生长,有黄白褐三色,含镁有离子交换性。但易粉化失效,浇水易上浮,适合育苗,不推荐长期使用。
价格便宜,质量很轻,透气透水,利于排水,但易粉化失效,浇水易上浮,适合育苗,不推荐长期使用。
赤玉土是一种来自日本的红色粘土,因其颜色而得名。微酸性,多孔结构透气性好含有较多养分,通透及保水性适中。
鹿沼土也是一种来自日本的粘土材料,通常含有较高的腐殖酸和营养元素。它常被用于多肉植物和其他对土壤要求较高的植物的种植。
日向石是一种含有大量硅质的岩石,常被用于园艺中作为基质材料或装饰品。它有助于提高土壤的 pH 值,促进植物生长。
桐生沙是一种细腻的沙质土壤,常被用于培养兰花等娇贵的植物。它具有良好的排水性和透气性,并能提供适量的养分。
透气性强,含矿物质及微量元素,可促进植物生长,常用于拌土或铺面,有红黑二色。
透气透水,保湿。能够平衡土壤物理机能,净化土壤,并含有一些微量元素,一般有软硬两种。
铝硅酸盐矿物,透气好,物理杀菌防黑腐,可一定程度防烧苗烂根,常铺面或拌土。
结构稳定不粉化,可拌土也可铺面,透水透气防虫,可清洗后反复使用。
性质疏松孔隙多,透气保水保肥弱酸性,质量轻强度高常用于拌土或铺底、铺面及兰花种植等。
硅藻土是一种含有大量硅质的沉积岩,常被用作园艺中的基质材料或装饰品。它的多孔结构和吸附能力有助于保持土壤的湿润,并为植物提供所需的养分。
价格便宜,质地轻,孔隙大,非常透气透水,能大大减少用土量。常用于垫盆底,铺面,拌土,水培植物。
透气性好保水性适中,可混合使用也可单独使用,常用于兰科类栽培,应使用发酵完全的松碳。
种植环境:
浇水习惯
正式介绍下:
哥哥叫可乐,毛色比较深,我和爱人称呼为「黑渐层」。e 猫一只,黏人又话痨,爱好是挠门,无论打还是骂,怎么教育都不改,活脱脱一个犟种猫。
弟弟叫雪碧,短毛银渐层,和哥哥是同一胎出生,一个老二一个老五。傻白甜(装的)一个,人前 i 猫,文静优雅,公子气质,不吵不闹;人后陪它哥上蹿下跳,四处跑酷。 哥哥不在的时候就黏人,哥哥在就走高冷路线。
亲生父是一只长毛银渐层,亲生母是一只短毛金渐层。🤔为什么会产生「黑渐层」?
2024 年 2 月 1 日出生,3 月 17 日迎接入住。到家当天两个菠萝的性格表现已经很明显了,可乐开始四处巡逻,雪碧则躲在书包里,久久不敢出来。
这是我和爱人第一次养猫,本来是打算养一只,担心出门没人另一只孤独,所以这对兄弟是结伴一起过来的。为什么标题称为「金菠萝」呢?嘿嘿\~搜下粤语就知道。
果然和人一样,e 猫的照片就是比 i 猫要多,真不是我大小心眼,雪碧不怎么配合拍照,可乐就比较大方啦 。这些是它们小时候的照片,不是现在的模样,如今都已一岁大了,肥头大耳的,等照片整理好再发。
新年到,可乐携雪碧来拜年,愿您财猫双全,喵事顺利\~
10 月中旬在淘宝薅的杏仁饼,到家后疯狂掉叶,直到一片叶子不剩,光秃秃的。期间看了下感觉应该是药害,马上给他洗过一次澡,之后一直控水养着,总算有点活过来的迹象。
植物名称 | 属名 | PPFD(µmol/m²/s) | DLI(mol/m²/d) |
---|
未找到匹配植物
表格数据:光合有效辐射日累积量(DLI),单位 mol/m²/d
指相机对拍摄画面周围的光线进行测量,然后根据测量的光线明暗来自动设置曝光,拍出相机认为明暗合适的照片。测光模式不同,拍出来的照片明暗也不同。
测光与曝光模式(光圈优先、快门优先、手动曝光)无直接关系,也与对焦模式无关。
对焦,又叫聚焦,指调节被拍摄物体到相机镜头之间的距离,使被拍摄物体在感光元件上清晰成像的过程。这个最终清晰的对焦距离会形成一个面,在这个面上所有物体都是清晰的,这个称为焦平面。
自动对焦(AF):自动对焦是相机根据被拍摄物体的距离和镜头的焦距,自动调整镜头对焦距离,使画面清晰的一种对焦方式。自动对焦速度快,准确率高,适合拍摄运动物体和抓拍场景。
类型:
不同品牌称呼:
特点:
超出对焦范围
对焦区域缺乏对比度
对焦系统性能限制
目标物体移动迅速
表格数据:VPD 值(kPa)