1. 列表的实现
我要完成的作业是酱紫啦:
- ok,来第一步 先实现最外层的连个大标题 Javascript 和 Java
<ul>
<li>Javascript</li>
<li>Java</li>
</ul>
- 实现二级菜单有序列表
<ul>
<li>JavaScript</li>
<ol start="1">
<li>第一章</li>
<li>第二章</li>
</ol>
<li>Java</li>
<ol start="1">
<li> 第一章</li>
<li>第二章</li>
</ol>
</ul>
- 实现第三层的 无序列表
<ul>
<li>JavaScript</li>
<ol start="1">
<li>第一章</li>
<ul type="square">
<li>const</li>
<li>let</li>
</ul>
<li>第二章</li>
<ul type="square">
<li>function</li>
<li>object</li>
</ul>
</ol>
<li>Java</li>
<ol start="1">
<li> 第一章</li>
<ul type="square">
<li>class</li>
<li>package</li>
</ul>
<li>第二章</li>
<ul>
<li>private</li>
<li>public</li>
</ul>
</ol>
</ul>
ok完成了!
知识点总结 ** 无需列表符号**:
- Disc 无序列表符号
<h4>Disc 项目符号列表:</h4>
<ul type="circle">
<li>苹果</li>
</ul>
- Circle 无序符号列表
<h4>Circle 项目符号列表:</h4>
<ul type="circle">
<li>苹果</li>
</ul>
- Square 无序符号列表:
<h4>Square 项目符号列表: </h4>
<ul type="square">
<li>苹果</li>
</ul>
2. 现在来实现一个跨行、列的表格,如下:
其实这个没什么难点
只要知道这些:
- 表格的模板
<table>
<caption>这里写上表格的标题</caption>
<thead> //表格的头部
<tr> //一行
<th></th> //一列
</tr>
</thead>
<tbody> //表格的身体
<tr> //一行
<td></td> //一列
</tr>
</tbody>
<tfoot> //表格的尾部
<tr> //一行
<td></td> 一列
</tr>
</tfoot>
</table>
跨行操作:
rowspan
: 用来合并行,表示表格占得行数colspan
: 用来合并列,表示表格占得列数实现表格的头部
<table border="2">
<caption>购物车</caption>
<thead>
<tr> <th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<td>重量</td>
<td>单价</td>
</tr>
</thead>
</table>
- 接下来实现 中部 和尾部,过程比较简单,这里就不细说了,请见我的github地址