ul 列表_CSS 基础教程-查字典教程网
ul 列表
ul 列表
发布时间:2015-03-10 来源:查字典编辑
摘要:

下一课

对于排列有序的条目,可以使用列表来实现,下面我们来看一个练习;

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)保存一下,再到浏览器里看一下,三个列表项都水平排列了;

本节学习了列表的基本使用方法,如果你成功地完成了练习,请继续学习下一课内容;

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新CSS 基础入门教程学习
    热门CSS 基础入门教程学习
    编程开发基础子分类