天學習下css中列表的相關屬性。列表可以用ul,li元素來實現。
主要有以下幾個屬性:
list-style-type,設置列表符號,常用值,none :不顯示前面的標識(很常用!)square :實心方塊disc :圓形,decimal :數字
list-style-image,自定義列表符號 ,url(圖片地址)
以下通過一個文章標題的列表來演示列表的樣式操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章標題列表</title>
</head>
<style>
/* 通用樣式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
/* 列表樣式 */
.article-titles {
list-style-type: none; /* 移除列表項前的默認標記 */
padding: 0; /* 移除默認的內邊距 */
margin: 0; /* 移除默認的外邊距 */
}
.article-titles li {
background-color: #fff; /* 背景色設置為白色 */
border: 1px solid #ddd; /* 邊框顏色 */
margin-bottom: 10px; /* 列表項之間的間距 */
padding: 10px; /* 內邊距 */
border-radius: 5px; /* 邊框圓角 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 陰影效果 */
transition: all 0.3s ease; /* 平滑過渡效果 */
}
.article-titles li:hover {
background-color: #f0f0f0; /* 鼠標懸停時背景色變化 */
}
.article-titles a {
text-decoration: none; /* 移除超鏈接的下劃線 */
color: #333; /* 文本顏色 */
font-weight: bold; /* 字體加粗 */
}
.article-titles a:hover {
color: #007bff; /* 鼠標懸停時文本顏色變化 */
}
</style>
<body>
<ul class="article-titles">
<li><a href="#article1">文章標題 1:探索宇宙的奧秘</a></li>
<li><a href="#article2">文章標題 2:人工智能的未來展望</a></li>
<li><a href="#article3">文章標題 3:環保科技的創新與實踐</a></li>
<li><a href="#article4">文章標題 4:全球疫情下的經濟趨勢</a></li>
</ul>
<!-- 這里可以放置更多文章內容,但為了示例,我們僅顯示列表 -->
</body>
</html>
運行效果如下:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
這個效果還可以吧,學會了么?
TML 支持有序、無序和定義列表:
HTML 列表
有序列表
| 無序列表
|
本例演示無序列表。無序列表
有序列表
本例演示有序列表。
HTML無序列表
無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。
無序列表使用 <ul> 標簽
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下:
Coffee
Milk
HTML 有序列表
同樣,有序列表也是一列項目,列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器中顯示如下:
Coffee
Milk
HTML 自定義列表
自定義列表不僅僅是一列項目,而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
瀏覽器顯示如下:
Coffee
- black hot drink
Milk
- white cold drink
注意事項 - 有用提示
提示: 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實例
不同類型的有序列表
本例演示不同類型的有序列表。
不同類型的無序列表
本例演示不同類型的無序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更復雜的嵌套列表。
自定義列表
本例演示一個定義列表。
HTML 列表標簽
標簽 | 描述 |
---|---|
<ol> | 定義有序列表 |
<ul> | 定義無序列表 |
<li> | 定義列表項 |
<dl> | 定義定義列表 |
<dt> | 自定義列表項目 |
<dd> | 定義自定列表項的描述 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
TML的常用列表可以分為三種:無序列表,有序列表以及定義列表。
定義:<ul>...</ul> ,表示項目之間沒有順序規定的列表。
內層標簽是 <li>...</li>,它有一個type屬性,常用的值有三種:
小實例:
<ul>
? <li>默認值</li><br>
? <li type="disc">實心圓點</li><br>
? <li type="circle">空心圓點</li><br>
? <li type="square">實心方塊</li><br>
</ul>
定義:<ol>...</ol>, 相對于無序列表而言,具有一定的順序的列表,一般用數字或者是字母放在表示項目的最前端表示先后順序。
內層標簽是 <li>...</li>,同樣它的type屬性常用值有四種:
小實例:
<ol>
? <li>默認值</li><br>
? <li type="A">大寫字母</li><br>
? <li type="a">小寫字母</li><br>
? <li type="I">羅馬數字</li><br>
? <li type="1">純數字</li><br><br><br>
</ol>
定義:<dl>...</dl>,不僅僅是一列項目,還是項目及其注釋的組合。
由 <dl> 標簽開始,內層標簽 <dt>...</dt> 包裹對象文本, <dd>...</dd> 包裹著解釋文本。(內層只能是 dt 和 dd 標簽,且dt 必須是在 dd 前面)
小實例:
<dl>
? <dt>HTML</dt>
? <dd>HTML稱為超文本標記語言,是一種標識性的語言。它包括一系列標簽.通過這些標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。</dd><br>
? <dt>CSS</dt>
? <dd>層疊樣式表(英文全稱:Cascading Style
? Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。</dd><br>
? <dt>JavaScript</dt>
? <dd>JavaScript是一種直譯式腳本語言,是一種動態類型、弱類型、基于原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。</dd><br>
</dl>
動手小練習
*請認真填寫需求信息,我們會在24小時內與您取得聯系。