CSS如何設置列表樣式屬性

時間 2019-11-21

標籤 css 如何設置列表樣式屬性欄目 CSS 简体版

原文原文鏈接

列表樣式屬性

在HTML中有2種列表、無序列表和有序列表，在工做中無序列表比較經常使用，無序列表就是ul標籤和li標籤組合成的稱之爲無序列表，那什麼是有序列表呢？就是ol標籤和li標籤組合成的稱之爲有序列表，列表的基礎知識就簡單說明下，本章內容主要說明的是如何給列表設置樣式，如有不懂列表是什麼的園友筆者建議去W3school官網進行學習。
列表樣式經常使用的屬性有4種如：list-style-type、list-style-position、list-style-image、list-style，在這裏就是簡單說明下列表經常使用的屬性名稱而已，具體使用或每個屬性值的介紹，在下面會具體的說明，愛學習的園友不用擔憂哦。
因爲我的的時間問題，筆者將列表樣式屬性分爲4篇文章進行說明。
本章內容主要說明的是列表中的list-style-type屬性。

list-style-type屬性

list-style-type屬性做用:就是設置列表前面項目符號的類型。
list-style-type屬性值說明表。

屬性值	描述
none	將列表前面項目符號去除掉。
disc	將列表前面項目符號設置爲實心圓。
circle	將列表前面項目符號設置爲空心圓。
square	將列表前面項目符號設置爲實心小方塊。

屬性值爲none使用方式

讓咱們進入列表的list-style-type屬性值爲none實踐，實踐內容如：使用class屬性值爲.box將列表前面項目符號去除掉。
咱們在實踐列表的list-style-type屬性值爲none以前看看列表前面項目符號是什麼，讓初學者有一個直觀的印象。html
代碼塊學習

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的list-style-type屬性值爲none實踐</title>
</head>
  
<body>
    <ul>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
</body>
</html>

結果圖ui

如今愛學習的園友們知道了什麼是列表前面的項目符號了，那咱們就進入列表的list-style-type屬性值爲none實踐咯。code
代碼塊htm

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的list-style-type屬性值爲none實踐</title>
    <style>
        .box{
            list-style-type: none;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
</body>
</html>

結果圖blog

既然能看到這裏說明園友已經掌握了，列表的list-style-type屬性值爲none使用，恭喜恭喜恭喜。

屬性值爲disc使用方式

在這裏說明下列表的list-style-type屬性值爲disc，列表的list-style-type屬性值默認就是disc，若是是細心的園友已經發現了，上面有現成的列子在這裏就不過多的介紹了，這個屬性值爲disc就跳過了哈。

屬性值爲circle使用方式

讓我進入列表的list-style-type屬性值爲circle實踐，實踐內容如：將列表前面的項目符號設置爲空心圓。
代碼塊ci

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的list-style-type屬性值爲circle實踐</title>
    <style>
        .box{
            list-style-type: circle;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
</body>
</html>

結果圖get

屬性值爲square使用方式

讓咱們進入列表的list-style-type屬性值爲square實踐，實踐內容如：將列表前面項目符號設置爲實心方塊。
代碼塊it

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的list-style-type屬性值爲square實踐</title>
    <style>
        .box{
            list-style-type: square;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
</body>
</html>