HTML5+CSS3——第4章 HTML5列表標簽

字號+ 編輯: Snake 修訂: IT男在阿里 來源: 慕课网 2023-09-08 我要說兩句(0)

本文給大家介紹一下HTML5列表標簽,包括(ul)無序列表和(ol)有序列表

4-1 使用<ul><li>标签实现无序列表

在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。

 图片33.jpg

新闻列表

 图片34.jpg

图片列表

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法:

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

举例:

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示:

 图片35.jpg

4-2 使用<ol><li>标签实现有序列表

如果想在网页中展示有前后顺序的信息列表,怎么办呢?

如,当当网上的书籍热卖排行榜,如下图所示。

这类信息展示就可以使用<ol>标签来制作有序列表来展示。

图片36.jpg 

语法:

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

举例:下面是一个热点课程下载排行榜:

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,如下图所示:

 图片37.jpg

閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: PHP+JS聊天群

相關課文
  • 上傳自定義文件的時候查如何填寫上傳表單中的access, mimeType等字段值

  • HTML5+CSS3——第6章 HTML5表單標簽,與瀏覽者交互

  • HTML5+CSS3——第5章 HTML5圖片、鏈接及表格標簽

  • HTML5+CSS3——第3章 HTML5效果標簽

我要說說
網上賓友點評