1. 程式人生 > >使用ul,添加新聞信息列表

使用ul,添加新聞信息列表

class data code 沒有 mar 編輯 img lang 信息

使用ul,添加新聞信息列表

在瀏覽網頁時,你會發現網頁上有很多信息的列表,如新聞列表、圖片列表,如下圖所示。

技術分享

新聞列表

技術分享

圖片列表

這些列表就可以使用ul-li標簽來完成。ul-li是沒有前後順序的信息列表。

語法:

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

舉例:

<ul>
  <li>精彩少年</li>
  <li>美麗突然出現</li>
  <li>觸動心靈的旋律</li>
</ul>

ul-li在網頁中顯示的默認樣式一般為:每項li前都自帶一個圓點,如下圖所示:

技術分享

任務

我來試試,親自感受一下無序標簽的使用

1、在右部編輯器中的第8行輸入<ul><li>我的第一個列表信息</li></ul>

附圖:技術分享

使用ul,添加新聞信息列表