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

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

feilong.org 修订于2021-01-22 12:18:24 416 次浏览

飞龙前端殿堂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>
<!--a0mod --></div>

<h3>

</h3>

</ul>

</div>

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

举例2、模块头写法

基础写法：

我的一家

标准写法：

<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>
<p class="a0val">优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚</p>
</li>

</ul>

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

<li>

</li>

<li>

<b class="a0bti">物标题与链接分离</b>

</p>

</li>

<li>

<p class="a0val">优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚优雅时尚</p>

</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

127

128

129

130

131

<li>

</a>

</li>

<li>

<b class="a0bti">物标题与有边框封面图一起</b>

</a>

</li>

<li>

<b class="a0bti">物标题与有边框封面图一起</b>

</a>

</li>

<li>

<b class="a0bti">物标题与有边框封面图一起</b>

</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>

<b class="a0nme">人名字与无边框头像一起</b>

</a>

</li>

<li>

<b class="a0nme">人名字与有边框头像一起</b>

</a>

</li>

<li>

<b class="a0nme">人名字与有边框头像一起</b>

</a>

</li>

<li>

<b class="a0nme">人名字与有边框头像一起</b>

</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>
<!--a0mod --></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>

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

</li>

<li>

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

<p>我们挑选优质经纪人为您服<br>务，拒绝骚扰</p>

</li>

<li>

<p>优质经纪人协助您完成办理手续</p>

</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
最初发布：20170606 04:01:49 feilong.org 于广州

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

所在分类： html css 教程

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

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