整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天學習下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小時內與您取得聯系。
