贴士:以下常用名称可灵活组合使用

方位、大小及范围

命名 意义 原型
top --
bottom --
left --
right --
front --
back --
side --
row --
col column
bar 条;如search-bar - 搜索条 --
box 框、盒子;如login-box - 登录框 --
block 块;跟盒子一样 --
size 尺寸 --
sm small
md medium
lg large
bold --
light --
horizontal 水平的 --
vertical 垂直的 --
normal 正常的;常规的 --
align 对齐 --
parent 父级 --

页面主结构

命名 意义 原型
header 页头,头 --
nav 导航栏 navigation
main 主要 --
content 内容 --
main-content 主要内容 --
footer 页脚 --
container 容器 --
wrapper 同上 --

页面辅助结构

命名 意义 原型
logo 商标,标志 --
headline 头条,头版头 --
sidebar 侧栏 --
sidebar-left 左侧栏(其他方向以此类推) --
list 列表 --
title 标题 --
cat 分类 category
icon 图标 --
menu 菜单 --
tab 标签页 --
banner 条幅,标语 --
slider, carousel 轮播 --
btn 按钮 button
msg 消息 message
sub-... 子... 如:sub-menu - 子菜单 --
...-item 单条... 如:nav-item - 单条导航(导航链接) --

电商站

命名 意义 原型
ad 广告 advertising
promotion 促销 --
hot 热卖 --
new 新品 --
product 产品 --
price 价格 --
summary 摘要 --
publisher 厂商 --
buy 购买 --
pay 支付 --

常用功能

命名 意义 原型
login 登录 --
signup, reg 注册 regsiter, signup
logout 登出 --
search 搜索 --
keyword 关键词 --
input 输入 --
output 输出 --
scroll 滚动 --
ranking 排行 --
anno 公告 announcement
登录后评论