本篇记录表格 (table) 和有序列表 (ordered list) \ 无序列表 (unordered list) 的部分用法
1.表格table
表格标签
使用 <table> 定义
表格的行
使用 <tr> 定义, 行内可以包含 <th> 和 <td>
表头和表单元
表头用 <th> 定义, 表单元用 <td> 定义
大多时候 <th> 和 <td> 长的差不多, 唯一区别可能在于有的浏览器会将 <th> 内的字加粗
因此有时候可以使用 <td> 加样式来替代 <th>
示例:
2.有序列表ordered list
列表标签
使用 <ol> 进行标记
列表项目
使用 <li> 进行标记
注意
有序列表会自动将列表内容进行分行排序展示, 如1.xxx 2.xxx
常用的两个属性:
type属性:
该属性定义的是排序的标签样式, 有 5 种样式, 分别为
1 / a / A / i / I
例如, 当 type = "A" 时, 排序变为 A.xxx B.xxx
reversed属性:
倒序排列, 属性中加入 reversed=""; 即可
示例:
3.无序列表unordered list
列表标签
使用 <ul> 进行标记
列表项目
使用 <li> 进行标记
注:
1. 无序列表前面的点要用样式来去掉, 在style中定义 list-style:none; 即可
2. 若有一个功能由很多功能子项组成, 每个功能子项又十分类似,
则可以使用无序列表进行展示, 如菜单项, 导航栏等.
示例:
鼠标移到绿色方块前:
鼠标移到绿色方块后:
这个下拉列表是用html和css做的, 不需要用到js, 下拉列表的展示不会影响原有格式, 不会在列表取消隐藏时把下面的标签顶下去
- 下拉菜单需边的子菜单隐藏（使用display:none;将元素隐藏）
- 鼠标悬浮样式（div:hover）
- 父元素相对定位（position:relative;）
- 子元素绝对定位（position:absolute;）
