常用命名
| 功能 |
命名 |
备注 |
| 头部 |
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>
网友评论