HTML作业详解

作业一:

展示效果如下:


Paste_Image.png

这个列表的结构十分清晰,一个无序列表有两项,每项又包含一个有序列表,有序列表的每一项又包含一个无序列表。
1.在webstorm,sublime(须安装插件emmet)下,直接输入以下代码:

ul>li*2>ol>li*2>ul>li*2

按Tab建即可,得到以下效果:

Paste_Image.png

2.然后将内容填充进去就可以了!

作业二:

展示效果如下:

Paste_Image.png

这个是对表格的使用,首先将表格划分成五行四列,如果仔细划分可以分成表头,表身,表脚。 表头两行四列,表身两行四列,表脚一行四列。
1.同样输入以下代码,按Tab键将骨架先搭出来。

table>(thead>tr*2>th*4)+(tbody>tr*2>td*4)+(tfoot>tr>td*4)

2.给table添加属性border=1,调整单元格,将表头的第一行第一格和第四格合并行,第二格第三格和并列,将第二行多余的删掉。效果如下:

Paste_Image.png

3.将表脚的前三格合合并列:

Paste_Image.png

4.填充内容即可。

作业链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容