下一课
对于排列有序的条目,可以使用列表来实现,下面我们来看一个练习;
1、文本编辑器
1)打开记事本或 gedit、leafpad 文本编辑器,gedit 在查看菜单里选择“HTML”;
2)点菜单“文件-保存”命令,以“lx8.html”为文件名,类型所有文件,编码 UTF-8,保存到自己的文件夹;
3)按照基础02课的方法,输入 <html> 、 <head> 和 <body> 的内容;
2、使用列表
1)在 <body> 后面接着输入下面的代码;
<ul>
<li><a href="lx1.html">第一课<a></li>
<li><a href="lx2.html">第二课<a></li>
<li><a href="lx3.html">第三课<a></li>
</ul>
2)前面的 <ul> 建立一个列表,里面的各个 <li> 是列表项,各个列表项排列对齐缩进,前面有一个圆点列表符号,
保存一下文件,到自己文件夹里,打开 lx7 网页,看看列表的效果,这儿加了 <a> 超级链接;
3)如果要去掉前面的圆点,可以在 ul 的样式里设定,前面的缩进也可以设定内边距为 0,输入下面的代码;
<ul>
<li><a href="lx1.html">第一课<a></li>
<li><a href="lx2.html">第二课<a></li>
<li><a href="lx3.html">第三课<a></li>
</ul>
4)保存一下,再到浏览器里看一下,三个列表都排到了左边对齐;
5)如果要排列成横向水平的菜单样式,可以在每个列表项里加上 float 属性,防止重叠再设定一个宽度,代码如下;
<ul>
<li><a href="lx1.html">第一课<a></li>
<li><a href="lx2.html">第二课<a></li>
<li><a href="lx3.html">第三课<a></li>
</ul>
6)保存一下,再到浏览器里看一下,三个列表项都水平排列了;
本节学习了列表的基本使用方法,如果你成功地完成了练习,请继续学习下一课内容;