css通用命名
2018-12-13 本文已影响23人
胡儒清
常用命名
| 功能 | 命名 | 备注 |
|---|---|---|
| 头部 | header | |
| 主体 | main | |
| 底部 | footer | |
| 导航 | nav | |
| logo | logo | |
| 列表 | list | |
| 列表选项 | item | |
| 左右 | l 、r | |
| 左中右 | l、c、r | |
| 侧边栏 | side、sidebar | |
| 菜单 | menu | |
| 标题 | title | |
| 文本 | text | |
| 多行文本 | t1、t2、t3... | |
| 按钮 | btn | |
| 图片 | img | |
| 提示语 | tip | |
| 横幅 | banner | |
| 轮播图 | swiper | |
| 包裹层 | xxx-box | img-box、text-box |
| 内容 | content | |
| 图标 | icon | |
| 链接 | link | |
| 版权 | copyright | |
| 联系方式 | contact |
简书首页的html命名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="header">
<div class="l">
<img class="img" src=""/>
</div>
<div class="c">
<div class="nav">
<ul class="list">
<li class="item">xxx</li>
<li class="item">xxx</li>
<li class="item">xxx</li>
</ul>
</div>
<div class="inp-box">
<input class="inp" type="" name="" id="" value="" />
<i class="icon">图标</i>
</div>
</div>
<div class="r">
<span class="text"></span>
<span class="img"></span>
<span class="btn"></span>
</div>
</div>
<div class="main">
<div class="content">
<ul class="list">
<li class="item">xxx</li>
<li class="item">xxx</li>
<li class="item">xxx</li>
<li class="item">xxx</li>
</ul>
</div>
<div class="side">
</div>
</div>
<div class="footer">
<p class="link-box">
<a href=""></a>
<a href=""></a>
<a href=""></a>
</p>
<p class="copyright">
asdfasdf
</p>
<p class="contact">
asdfasdf
</p>
</div>
</body>
</html>
