前端开发HTML类命名

前端移动开发就业班视频
ract移动前端开发
移动端web前端开发教程
常用的一些html类命名,会逐渐补充
豆瓣:名词:
wrapper:全局的定宽容器
nav-wrap:导航容器(名称+wrap)
global-nav:全局导航
nav-links:导航链接
lnk-book:书籍页面的导航(以lnk+名称的形式)tabs:标签切换(类似于不需要跳转的导航分类)
tags:标签
srh:搜索框内容
inp:输入框
bn:按钮
bn-submit:提交按钮(修饰词放后面)
login:登录
reg:注册
item-account:账号条目
item-passd:密码条目
opt:勾选
section:章节(大的具有相似性的布局块)sidenav:侧边导航
sidelinks:侧边链接
main:主内容
aside:侧边内容(一般和其对应的artical或者main)
move-list:电影列表清单(名称+list的格式主要应用与ul列表内容)
pic:图片
rating:热度
extra:额外内容(广告栏等)
desc:详细描述
常用结构:
li结构:
li结构:<div class=”wrapper”>
<div class=”sidenav”><div class=”nav”>
<div class=”nav-links/nav-items”>
<ul>
<li class=”lnk-book”></li>
<li class=”lnk-movie”></li>
<li class=”lnk-music”></li>
</ul>
</div>
</div><div class=”global-nav”>
<nav-items>
<ul>
<li></li>
</ul>
</nav-items>
</div>
<div class=”nav-music”>
<div class=”nav-wrap”></div>
<div class=”nav-secondary”>
<div class=”nav-items”>
<ul>
<li></li>
</ul>
</div>
</div>
</div><div class=”wrapper”>
<div class=”content”>
<div class=”grid-16-8″>
<article>
<h2></h2>
</article>
<aside></aside>
<extra></extra>
</div>
</div>
<div class=”footer”></div>
</div><div class=”aside”>
<div class=”song-chart”>
<h2 class=”tabs”>
<a href=”” class=”tab1″></a>
<a href=”” class=”tab2″></a>
<a href=”” class=”tab3″></a>
</h2>
<ul class=”song-chart-1 chart-content”></ul>
<ul class=”song-chart-2 chart-content”></ul>
<ul class=”song-chart-3 chart-content”></ul>
</div>
</div>
天猫:
content:内容
grid:网格
grid-container-1190:宽度1190的格子容器
module:模块/组件
main-container:主容器
grid-col-990:宽度990的一列格子
slide:滑动
slide-pannel:滑动面板(大的滑动模块)
item-slide:滑动项目(小的滑动项目)
item-slide-content:滑动内容
slide-nav:滑动导航
site-nav:顶部全局导航
user-info:用户信息
floorliftitem:商品楼数
footer-info:页脚信息
other-link:其他链接
copyright:版权
iconfont:字体图标
feedback:反馈
backtop:回到顶部
layout:布局
banner:旗帜,标语,广告
移动web前端开发技术架构
前端与移动开发基础视频教程
前端移动开发怎么布局
» 本文来自:前端开发者 » 《前端开发HTML类命名》
» 本文链接地址:https://www.rokub.com/7665.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!