CSS如何設置列表樣式屬性，看這篇文章就夠用了

時間  2019-11-24
標籤 css 如何 設置 列表 樣式 屬性 看這 文章 夠用 欄目 CSS 简体版
原文   原文鏈接

列表樣式屬性

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

list-style-type屬性

  • list-style-type屬性做用:就是設置列表前面項目符號的類型。
  • list-style-type屬性值說明表。
屬性值 描述
none 將列表前面項目符號去除掉。
disc 將列表前面項目符號設置爲實心圓。
circle 將列表前面項目符號設置爲空心圓。
square 將列表前面項目符號設置爲實心小方塊。

屬性值爲none使用方式

  • 讓咱們進入列表的list-style-type屬性值爲none實踐，實踐內容如：使用class屬性值爲.box將列表前面項目符號去除掉。

  • 咱們在實踐列表的list-style-type屬性值爲none以前看看列表前面項目符號是什麼，讓初學者有一個直觀的印象。css

  • 代碼塊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>

  • 結果圖ide

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

  • 代碼塊ui

<!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>

  • 結果圖url

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

屬性值爲disc使用方式

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

屬性值爲circle使用方式

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

  • 代碼塊3d

<!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>

  • 結果圖code

屬性值爲square使用方式

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

  • 代碼塊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屬性值爲square實踐</title>
    <style>
        .box{
            list-style-type: square;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
</body>
</html>

  • 結果圖blog

list-style-position屬性

  • list-style-position屬性做用：設置列表前面項目符號的位置，list-style-position屬性有2個屬性值，分別是outside、inside，具體說明看下面的屬性值說明表。

list-style-position屬性值說明表

屬性值 描述
outside 將列表前面項目符號設置在外面。
inside 將列表前面項目符號設置在裏面。

屬性值爲outside使用方式

  • 在實踐list-style-position屬性值爲outside以前，咱們先看看列表前面的項目符號的默認位置在哪，筆者爲了讓初學者有一個直觀的印象，筆者將HTML頁面中的ul標籤li標籤設置了一些樣式。
  • ul標籤樣式如：：width寬度設置爲300px像素、height高度爲150px像素、border邊框爲（1px像素、顯示是實線、邊框顏色爲藍色）、樣式。
  • ul標籤中的li標籤設置樣式如：width寬度設置爲280px像素、height高度爲30px像素line-height行高爲30px像素、border邊框爲（1px像素、顯示是實線、邊框顏色爲紅色）、樣式。

  • 若是園友沒有掌握border邊框的知識，愛學習的園友不用擔憂之後會寫border邊框的文章，如有想了解border邊框知識的園友能夠去W3school官網進行學習。

  • 代碼塊

<!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>屬性值爲outside使用方式</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
   
</body>
</html>

  • 結果圖

  • 如今你們應該很清楚的看到了列表前面項目的符號默認在ul標籤和li標籤之間的位置，如今咱們知道了列表前面的項目符號的默認位置，那咱們進行list-style-position屬性值爲outside實踐了，實踐內容：將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>屬性值爲outside使用方式</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-position: outside;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
   
</body>
</html>

  • 結果圖

  • 注意：爲何給列表設置了list-style-position屬性值爲outside，運行結果沒有發生任何變化呢，由於列表前面的項目符號默認就在外面的位置，列表前面的項目符號外面的位置就是ul標籤和li標籤之間的位置。

屬性值爲inside使用方式

  • 經過介紹list-style-position屬性值爲outside，你們已經知道了列表前面項目符號外邊的位置了，接下來咱們將列表前面項目符號設置在裏面咯。
  • 讓咱們進入list-style-position屬性值爲inside實踐，將列表前面項目符號位置設置在裏面。

  • 代碼塊

<!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>屬性值爲inside使用方式</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-position: inside;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
   
</body>
</html>

  • 結果圖

  • 注意：list-style-position屬性值爲inside做用就是將列表前面項目符號位置設置在li標籤中，這就是裏面的位置。

list-style-image屬性

  • list-style-image屬性做用：將列表前面項目符號設置爲一張圖片。

list-style-image屬性說明表

屬性值名稱 描述
url 設置列表前面項目符號的圖片的路徑

  • 讓咱們進入list-style-image屬性的實踐，實踐內容將列表前面項目符號更換一張圖片。

  • 代碼塊

<!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-image屬性方式</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-image: url(./img/001.png);
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
   
</body>
</html>

  • 結果圖

  • 注意：圖片路徑必定要寫在url(./img/001.png);括號當中，否則不會被渲染的，圖片路徑能夠是相對路徑也能夠絕對路徑。

list-style屬性

  • list-style屬性是（list-style-type屬性、list-style-position屬性、list-style-image屬性）的一個簡寫屬性，它集成了（list-style-type屬性、list-style-position屬性、list-style-image屬性）的功能。
  • 讓咱們進入 list-style屬性實踐，既然看到了這裏想必園友都已經掌握了本章的內容了。

  • 代碼塊

<!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屬性方式</title>
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 290px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style: none inside  url(./img/001.png) ;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
        <li>成功不是戰勝別人，而是改變本身。</li>
    </ul>
   
</body>
</html>

  • 結果圖

  • 注意：list-style屬性值能夠也1個或2個3個，順序沒有要求，如有不明白的園友能夠作個實例看看就明白了，學習就要多嘗試不要偷懶呦。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程