飞龙博客

妙法莲华经

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

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

飞龙前端殿堂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: 标准结构示意

模块标题 更多

  • 列表项

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

举例2、模块头写法

基础写法:

我的一家

标准写法:

模块标题 更多

另类写法,一般不用:

模块标题 更多

模块标题带链接:

模块标题

模块标题带链接和more 少见

模块标题 更多

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

模块标题 模块标题 模块标题 更多

多个标题组合 标题是链接

模块标题 模块标题 模块标题 更多

举例3、列表项写法:

ul里的每个li,就是列表项。
可见列表项具体写法不是一定的。

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


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






举例4: 有序列表模块


举例5: 只有内衣的模块

  1. 在安居客发房

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

  2. 优质经纪人全程服务

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

  3. 大量买家

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

二、模块小结:

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 教程

新作:

旧文: