飞龙前端殿堂1：列表模块.txt = 飞龙博客

飞龙前端殿堂1：列表模块.txt (484)

飞龙前端殿堂1：列表模块.txt

version:fl20160610gz

html最常见的模块，包括列表模块和段落模块。

如果看是否有图片，又可以分为文字列表和图片列表。这种分法并不重要

本文飞龙主要总结列表模块。

一、列表模块 list model

ul无序列表模块和 ol有序列表模块，合称列表模块

无序列表模块：div>(h3+ul>(li*n))
有序列表模块：div>(h3+ol>(li*n))

模块特点简记：div>(h3+ul)

ul或ol 下的 li 就是列表项 list item ，个数n>=1

有序列表模块和无序列表模块写法基本一样。
区别在于，需要排序的列表，才用有序列表。
如果仅从外观上分析，两者差别可以忽略。

举例1：标准结构示意

<div class="a0mod">
<h3>
<b class="a0tit">模块标题</b>
<a class="a0mor" href="jblogcat.html">更多</a>
</h3>
<ul class="a0cot">
<li>列表项</li>
</ul>
</div>

<h3>

模块标题

</h3>

</ul>

</div>

列表模块class命名：div.mod>(h3+ul.cot>(li*n))

举例2、模块头的写法

基础写法：

<h3>我的一家</h3>

1	<h3>我的一家</h3>

标准写法：

<h3>
<b class="a0tit">模块标题</b>
<a class="a0mor" href="jblogcat.html">更多</a>
</h3>

<h3>

模块标题

</h3>

另类写法,这种写法飞龙不建议使用：

<h3>模块标题 <a class="a0mor" href="jblogcat.html">更多</a></h3>

1	<h3>模块标题 <a class="a0mor" href="jblogcat.html">更多</a></h3>

模块标题带链接：

<h3><a class="a0tit" href="jblogcat.html">模块标题</a></h3>

1	<h3><a class="a0tit" href="jblogcat.html">模块标题</a></h3>

模块标题带链接和more，比较少见

<h3>
<a class="a0tit" href="jblogcat.html">模块标题</a>
<a class="a0mor" href="jblogcat.html">更多</a>
</h3>

<h3>

</h3>

多个标题组合标题非链接 tab选项卡 jstab与js挂接

<h3>
<b class="a0tit jstab">模块标题</b>
<b class="a0tit jstab">模块标题</b>
<b class="a0tit jstab">模块标题</b>
<a class="a0mor" href="jblogcat.html">更多</a>
</h3>

<h3>

模块标题

</h3>

多个标题组合标题是链接

<h3>
<a class="a0tit" href="jblogcat.html">模块标题</a>
<a class="a0tit" href="jblogcat.html">模块标题</a>
<a class="a0tit" href="jblogcat.html">模块标题</a>
<a class="a0mor" href="jblogcat.html">更多</a>
</h3>

<h3>

</h3>

举例3、列表项写法：
ul里的每个li,就是列表项。
可见列表项具体写法并不是一定的。

1、以下是从简单到复杂的文字列表

<ul class="a0cot">
<li>列表项</li>

<li><a class="a0lnk" href="jblog.html">国务院发布关于改革铁路投融资体制和铁路建设的意见</a></li>

<li><a class="a0lnk" href="jgood.html">商品链接</a></li>

<li><a class="a0url" href="juser.html">用户链接</a></li>

<li>
<i class="a0dte">2014-11-23</i>
<i class="a0prc">8000</i>
<a class="a0lnk" href="jgood.html">物标题与链接在一起</a>
</li>

<li>
<i class="a0tme">16:42</i>
<p class="a0wht">
<b class="a0bti">物标题与链接是分离的</b>
<a class="a0lnk" href="jgood.html">详情>> </a>
</p>
</li>

<li><em class="a0key">价格：</em> <span class="a0val">1000元</span></li>

<li>
<em class="a0key">特点：</em>
<span class="a0val">属性值短文本</span>
</li>

<li>
<em class="a0key">特点：</em>
<p class="a0val">属性值是一长串文字</p>
</li>

</ul>

<li><a class="a0lnk" href="jblog.html">国务院发布关于改革铁路投融资体制和铁路建设的意见</a></li>

<li>

2014-11-23

8000

<a class="a0lnk" href="jgood.html">物标题与链接在一起</a>

</li>

<li>

16:42

物标题与链接是分离的

</li>

<li>

特点：

属性值短文本

</li>

<li>

特点：

属性值是一长串文字

</li>

</ul>

2、以下是从简单到复杂的图文列表

<ul class="a0cot">

<li><img class="a0cov" src="skin/lipin.jpg" /></li>

<li>
<a class="a0lnk" href="jgood.html" >
<img class="a0cov" src="skin/lipin.jpg" />
</a>
</li>

<li>
<a class="a0lnk" href="jgood.html" >
<i class="a0avb"><img class="a0cov" src="skin/lipin.jpg" /></i>
<b class="a0bti">物标题与有边框封面图一起</b>
</a>
</li>

<li>
<a class="a0lnk" href="jgood.html" >
<i class="a0avb"><img class="a0cov" src="skin/lipin.jpg" /></i>
<b class="a0bti">物标题与有边框封面图一起</b>
<i class="a0lbl">带角标</i>
</a>
</li>

<li>
<a class="a0lnk" href="jgood.html" >
<i class="a0avb"><img class="a0cov" src="skin/lipin.jpg" /></i>
<b class="a0bti">物标题与有边框封面图一起</b>
<i class="a0lbl">带角标</i>
</a>
<p class="a0acs"><i class="icl il2 ivote jsvote" title="投票"></i> <i class="icl il2 iplay jsplay" title="播放"></i></p>
</li>

<li>
<a class="a0lnk" href="jgood.html" >
<img class="a0cov" src="skin/lipin.jpg" />
</a>
<a class="a0bti" href="jgood.html" >物标题与封面图分开</a>
</li>

<li>
<a class="a0lnk" href="jgood.html" >
<i class="a0avb"><img class="a0cov" src="skin/lipin.jpg" /></i>
<i class="a0lbl">带角标</i>
</a>
<a class="a0bti" href="jgood.html" >物标题与封面图分开</a>
</li>

<li>
<a class="a0lnk" href="jgood.html" >
<i class="a0avb"><img class="a0cov" src="skin/lipin.jpg" /></i>
<i class="a0lbl">带角标</i>
</a>
<a class="a0bti" href="jgood.html" >物标题与封面图分开</a>
<p class="a0acs"><i class="icl il2 ivote jsvote" title="投票"></i> <i class="icl il2 iplay jsplay" title="播放"></i></p>
</li>

</ul>

<ul class="a0cot">

<li><img class="a0avg" src="skin/face.jpg" /></li>

<li>
<a class="a0url" href="juser.html" >
<img class="a0avg" src="skin/face.jpg" />
</a>
</li>

<li>
<a class="a0url" href="juser.html" >
<img class="a0avg" src="skin/face.jpg" />
<b class="a0nme">人名字与无边框头像一起</b>
</a>
</li>

<li>
<a class="a0url" href="juser.html" >
<i class="a0avb"><img class="a0avg" src="skin/face.jpg" /></i>
<b class="a0nme">人名字与有边框头像一起</b>
</a>
</li>

<li>
<a class="a0url" href="juser.html" >
<i class="a0avb"><img class="a0avg" src="skin/face.jpg" /></i>
<b class="a0nme">人名字与有边框头像一起</b>
<i class="a0lbl">带角标</i>
</a>
</li>

<li>
<a class="a0url" href="juser.html" >
<i class="a0avb"><img class="a0avg" src="skin/face.jpg" /></i>
<b class="a0nme">人名字与有边框头像一起</b>
<i class="a0lbl">带角标</i>
</a>
<p class="a0acs"><i class="icl il2 ivote jsvote" title="投票"></i> <i class="icl il2 ilike jslike" title="关注"></i></p>
</li>

<li>
<a class="a0url" href="juser.html" >
<img class="a0avg" src="skin/face.jpg" />
</a>
<a class="a0nme" href="juser.html" >人名字与头像分开</a>
</li>

<li>
<a class="a0url" href="juser.html" >
<i class="a0avb"><img class="a0avg" src="skin/face.jpg" /></i>
<i class="a0lbl">带角标</i>
</a>
<a class="a0nme" href="juser.html" >人名字与头像分开</a>
</li>

<li>
<a class="a0url" href="juser.html" >
<i class="a0avb"><img class="a0avg" src="skin/face.jpg" /></i>
<i class="a0lbl">带角标</i>
</a>
<a class="a0nme" href="juser.html" >人名字与头像分开</a>
<p class="a0acs"><i class="icl il2 ivote jsvote" title="投票"></i> <i class="icl il2 ilike jslike" title="关注"></i></p>
</li>

</ul>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<li>

</a>

</li>

<li>

物标题与有边框封面图一起

</a>

</li>

<li>

物标题与有边框封面图一起

带角标

</a>

</li>

<li>

物标题与有边框封面图一起

带角标

</a>

</li>

<li>

</a>

<a class="a0bti" href="jgood.html" >物标题与封面图分开</a>

</li>

<li>

带角标

</a>

<a class="a0bti" href="jgood.html" >物标题与封面图分开</a>

</li>

<li>

带角标

</a>

<a class="a0bti" href="jgood.html" >物标题与封面图分开</a>

</li>

</ul>

<li>

</a>

</li>

<li>

人名字与无边框头像一起

</a>

</li>

<li>

人名字与有边框头像一起

</a>

</li>

<li>

人名字与有边框头像一起

带角标

</a>

</li>

<li>

人名字与有边框头像一起

带角标

</a>

</li>

<li>

</a>

<a class="a0nme" href="juser.html" >人名字与头像分开</a>

</li>

<li>

带角标

</a>

<a class="a0nme" href="juser.html" >人名字与头像分开</a>

</li>

<li>

带角标

</a>

<a class="a0nme" href="juser.html" >人名字与头像分开</a>

</li>

</ul>

举例4：有序列表模块

<div class="a0mod">
<h3>
<b class="a0tit">光荣榜单</b>
<a class="a0mor" href="jblogcat.html">更多</a>
</h3>
<ol class="a0cot">
<li><a href="http://feilong.org">冠军</a></li>
<li><a href="http://yinlinghua.com">亚军</a></li>
<li><a href="http://jinhan.com">季军</a></li>
<li><a href="http://wanyue.com">第四名</a></li>
</ol>
</div>

<h3>

光荣榜单

</h3>

</ol>

</div>

举例5：只有内衣的模块

<ol class="sellsteps">
<li>
<h4>在安居客发房</h4>
<p>简单2步即可完成发布，方便快捷免费！</p>
</li>
<li>
<h4>优质经纪人全程服务</h4>
<p>我们挑选优质经纪人为您服<br>务，拒绝骚扰</p>
</li>
<li>
<h4>大量买家</h4>
<p>优质经纪人协助您完成办理手续</p>
</li>
</ol>

<li>

<h4>在安居客发房</h4>

简单2步即可完成发布，方便快捷免费！

</li>

<li>

<h4>优质经纪人全程服务</h4>

我们挑选优质经纪人为您服 务，拒绝骚扰

</li>

<li>

优质经纪人协助您完成办理手续

</li>

</ol>

二、模块小结：

1、结构分析

模块写法：基本结构是日字，也有可能是口字，或它们的组合。

把某个模块拆分后，可以按个人喜欢，把模块的内部组件，取各种名称。

简称1：外衣、头、内衣、项
全称1：模块外衣、模块头、模块内衣、模块项

简称2：套、上口、下口、项
全称2：模块套、模块上口、模块下口、模块项

简称3：套、头、体、项
全称3：模块套、模块头、模块体、模块项

特殊模块：只有模块内衣，有两个模块内衣，等变异或组合模块。

2、常用标签
无序模块：div h3 ul li
有序模块：div h3 ol li
段落模块：div h3 div p
定义模块：div h3 div dl dt dd
div 外衣
h2/h3/h4 头
ul/ol/div/dl 内衣
li/p/dl 项

模块头或模块项的里面，常用的微标签有：
img, a b i, em span, strong, small
凡用微标签，需加 class 命名，便于直接控制样式。

2、模块每个组件，应该如何命名?

通用的命名法，如下：
外衣 div.mod
头 h3.mh
模块标题 b.tit
模块更多 a.mor
内衣 ul.cot
项 li.itm
项标题 h4.nh
项封面 img.cov.avg
封面标题 b.bti.nme
项链接 a.lnk.url
项角标 i.lbl
项蒙版 i.msk
属性组 p.mtas/ul.mtas
项备注 p.nte
项操作 p.acs

为了区分不同模块，便于批量修改，
在写具体模块时，请加前缀比如 a0 b0 a1 之类，

模块的特殊命名法，请参考飞龙前端殿堂之网站架构

start-fl20151029gz

本文更新网址：https://feilong.org/front-end-temple-list-models

2017-06-06 ~ 2026-02-28

加入收藏夹，查看更方便。

分类： html css教程

新作：解决css样式表在ie11中无效的问题

旧文：飞龙前端殿堂0：页面布局基础.txt