HTML <ul> 無序列表
ul的英文全稱是unordered lists,翻譯成漢語就是無序列表的意思。
顧名思義,通過<ul>元素可以建立無序列表。
所謂無序列表,就是列表前面沒有采用類似數字之類能夠體現先後順序標識。
無序列表和有序列表相對應,具體參閱HTML <ol>無序列表一章節。
其實在實際工作中,無所謂無序列表與有序列表,因為自帶的列表標識基本毫無用處。
<ul>是具體列表的父元素,<li>元素用於定義真正的列表內容。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <ul type="dise"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> </ul> <ul type="circle"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> </ul> <ul type="square"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> </ul> </body> </html>
程式碼執行效果截圖如下:
程式碼分析如下:
(1).通過<ul>定義三個無序列表。
(2).列表的具體內容通過<li>元素定義,li是list的縮寫。
(3).通過type定義了列表前端的標識,每一種型別標識都無法區別出先後順序。
type屬性說明:
(1).dise:實心圓(預設值)。
(2).circle:空心圓。
(3).square:實心方塊。
關於標籤自帶屬性說明:
標籤自帶屬性的初衷是為了提高開發效率。
但遺憾的是,這些屬性通常毫無用處,不但外觀醜陋,而且它的位置也難以控制。
根本無法滿足客戶對美觀度的需求,所以還是需要通過CSS來對列表進行美化。
CSS提供了設定了表樣式的屬性,具體參閱CSS 設定列表樣式一章節。
不過在設定列表前面圖片標識時,使用背景圖片更加靈活。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> ul{ list-style-type:none; padding:0px; margin:0px; } ul li{ background-image:url(mytest/div+css/index.jpg); background-repeat:no-repeat; background-position:0px 5px; padding-left:14px; } </style> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> </ul> </body> </html>
程式碼執行效果截圖如下:
列表前面的小箭頭是一個背景圖片,然後使用background-position將其控制到一個恰當位置。
此方式非常的靈活,可以任意定製列表前面的標識,並且位置完全可控,推薦使用。
相關文章
- HTML的ul無序列表HTML
- 【HTML】02有序無序列表HTML
- HTML————12、HTML列表HTML
- HTML5中有序列表和無序列表的寫法HTML
- HTML之列表HTML
- HTML速查列表HTML
- html列表標籤HTML
- HTML 列表簡介HTML
- PbootCMS 文章列表序號boot
- ul中有li,點選li,獲得對應的序號
- 舉例說明只用html和css如何使得一個列表編號倒序?HTMLCSS
- HTML <ol> 有序列表HTML
- HTML <datalist> 選項列表HTML
- HTML datalist 選項列表HTML
- HTML 速查列表簡介HTML
- HTML 標籤參考無極3註冊按字母順序排列 HTML 641480標籤HTML
- HTML 屬性順序HTML
- ul案例
- ul和
- HTML5 標籤列表HTML
- 4種寫法實現點選ul列表中每個li列印索引索引
- Python中按字母順序對列表排序Python排序
- 常用HTML標籤2:表格和列表HTML
- HTML、JavaScript、PHP、 MySQL 學習順序HTMLJavaScriptPHPMySql
- 1.3 常用HTML標籤2:表格和列表HTML
- html優先順序和層疊性HTML
- 影像延遲載入 && 列表圖順序載入
- postgresql無序uuid效能測試SQLUI
- 讓 排序 按照 in 列表的的顯示順序排序輸出。排序
- 最短無序連續子陣列陣列
- CSS之CSS和html整合方式及優先順序CSSHTML
- Python 列表推導及優先順序佇列的實現Python佇列
- html裡列表滑動刪除的實現如此簡單HTML
- 大系統觀:1.3無序就是熵增熵
- leetcode最短無序連續子陣列LeetCode陣列
- HTML、CSS、JavaScript、PHP、 MySQL 的學習順序是什麼HTMLCSSJavaScriptPHPMySql
- 移動電源UL2056報告
- 修改中文、英文參考文獻在文末列表中的順序:EndNote