CSS 基础入门教程
作者：TeliuTe 来源：基础教程网
对于排列有序的条目，可以使用列表来实现，下面我们来看一个练习；
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 style="list-style-type:none; padding:0px;">
<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 style="list-style-type:none; padding:0px;">
<li style="float:left; width:100px;"><a href="lx1.html">第一课<a></li>
<li style="float:left; width:100px;"><a href="lx2.html">第二课<a></li>
<li style="float:left; width:100px;"><a href="lx3.html">第三课<a></li>
</ul>
6）保存一下，再到浏览器里看一下，三个列表项都水平排列了；
本节学习了列表的基本使用方法，如果你成功地完成了练习，请继续学习下一课内容；
本教程由86团学校TeliuTe制作|著作权所有
基础教程网：http://teliute.org/
美丽的校园……
转载和引用本站内容，请保留作者和本站链接。
