欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間：2019-11-25 15:45:11   作者：微笑是最初的信仰   我要評(píng)論
這篇文章主要介紹了CSS如何設(shè)置列表樣式屬性(看這篇文章就夠用了)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

列表樣式屬性

  •  在 HTML 中有 2 種列表、無序列表和有序列表，在工作中無序列表比較常用，無序列表就是 ul 標(biāo)簽和 li 標(biāo)簽組合成的稱之為無序列表，那什么是有序列表呢？就是 ol 標(biāo)簽和 li 標(biāo)簽組合成的稱之為有序列表，列表的基礎(chǔ)知識(shí)就簡單說明下，本章內(nèi)容主要說明的是如何給列表設(shè)置樣式，若有不懂列表是什么的園友筆者建議去 W3school官網(wǎng) 進(jìn)行學(xué)習(xí)。
  • 列表樣式常用的屬性有4種如： list-style-type 、 list-style-position 、 list-style-image 、 list-style ，在這里就是簡單說明下列表常用的屬性名稱而已，具體使用或每一個(gè)屬性值的介紹，在下面會(huì)具體的說明，愛學(xué)習(xí)的園友不用擔(dān)心哦。

list-style-type屬性

  • list-style-type屬性作用:就是設(shè)置列表前面項(xiàng)目符號(hào)的類型。
  • list-style-type屬性值說明表。

     

屬性值 描述
none 將列表前面項(xiàng)目符號(hào)去除掉。
disc 將列表前面項(xiàng)目符號(hào)設(shè)置為實(shí)心圓。
circle 將列表前面項(xiàng)目符號(hào)設(shè)置為空心圓。
square 將列表前面項(xiàng)目符號(hào)設(shè)置為實(shí)心小方塊。

屬性值為none使用方式

  • 讓我們進(jìn)入列表的 list-style-type 屬性值為 none 實(shí)踐，實(shí)踐內(nèi)容如：使用 class 屬性值為 .box 將列表前面項(xiàng)目符號(hào)去除掉。
  • 我們?cè)趯?shí)踐列表的 list-style-type 屬性值為 none 之前看看列表前面項(xiàng)目符號(hào)是什么，讓初學(xué)者有一個(gè)直觀的印象。

代碼塊

<!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實(shí)踐</title>
</head>
  
<body>
    <ul>
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
    </ul>
</body>
</html>

結(jié)果圖

現(xiàn)在愛學(xué)習(xí)的園友們知道了什么是列表前面的項(xiàng)目符號(hào)了，那我們就進(jìn)入列表的 list-style-type 屬性值為 none 實(shí)踐咯。

代碼塊

<!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實(shí)踐</title>
    <style>
        .box{
            list-style-type: none;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
    </ul>
</body>
</html>

結(jié)果圖

既然能看到這里說明園友已經(jīng)掌握了，列表的 list-style-type 屬性值為 none 使用，恭喜恭喜恭喜。

屬性值為disc使用方式

在這里說明下列表的 list-style-type 屬性值為 disc ，列表的 list-style-type 屬性值默認(rèn)就是 disc ，如果是細(xì)心的園友已經(jīng)發(fā)現(xiàn)了，上面有現(xiàn)成的列子在這里就不過多的介紹了，這個(gè)屬性值為 disc 就跳過了哈。

屬性值為circle使用方式

讓我們進(jìn)入列表的 list-style-type 屬性值為 circle 實(shí)踐，實(shí)踐內(nèi)容如：將列表前面的項(xiàng)目符號(hào)設(shè)置為空心圓。

代碼塊

<!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實(shí)踐</title>
    <style>
        .box{
            list-style-type: circle;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
    </ul>
</body>
</html>

結(jié)果圖

屬性值為square使用方式

讓我們進(jìn)入列表的 list-style-type 屬性值為 square 實(shí)踐，實(shí)踐內(nèi)容如：將列表前面項(xiàng)目符號(hào)設(shè)置為實(shí)心方塊。

代碼塊

<!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實(shí)踐</title>
    <style>
        .box{
            list-style-type: square;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
    </ul>
</body>
</html>

結(jié)果圖

list-style-position屬性

list-style-position 屬性作用：設(shè)置列表前面項(xiàng)目符號(hào)的位置， list-style-position 屬性有2個(gè)屬性值，分別是 outside 、 inside ，具體說明看下面的屬性值說明表。

list-style-position屬性值說明表 

     

屬性值 描述
outside 將列表前面項(xiàng)目符號(hào)設(shè)置在外面。
inside 將列表前面項(xiàng)目符號(hào)設(shè)置在里面。

屬性值為outside使用方式

  • 在實(shí)踐 list-style-position 屬性值為 outside 之前，我們先看看列表前面的項(xiàng)目符號(hào)的默認(rèn)位置在哪，筆者為了讓初學(xué)者有一個(gè)直觀的印象，筆者將 HTML 頁面中的 ul 標(biāo)簽 li 標(biāo)簽設(shè)置了一些樣式。
  •  ul 標(biāo)簽樣式如：： width 寬度設(shè)置為 300px 像素、 height 高度為 150px 像素、 border 邊框?yàn)椋?1px 像素、顯示是實(shí)線、邊框顏色為藍(lán)色）、樣式。
  • ul 標(biāo)簽中的 li 標(biāo)簽設(shè)置樣式如： width 寬度設(shè)置為 280px 像素、 height 高度為 30px 像素 line-height 行高為 30px 像素、 border 邊框?yàn)椋?1px 像素、顯示是實(shí)線、邊框顏色為紅色）、樣式。
  • 如果園友沒有掌握 border 邊框的知識(shí)，愛學(xué)習(xí)的園友不用擔(dān)心以后會(huì)寫 border 邊框的文章，若有想了解 border 邊框知識(shí)的園友可以去W3school官網(wǎng) 進(jìn)行學(xué)習(xí)。

代碼塊

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

結(jié)果圖

現(xiàn)在大家應(yīng)該很清楚的看到了列表前面項(xiàng)目的符號(hào)默認(rèn)在 ul 標(biāo)簽和 li 標(biāo)簽之間的位置，現(xiàn)在我們知道了列表前面的項(xiàng)目符號(hào)的默認(rèn)位置，那我們進(jìn)行 list-style-position 屬性值為 outside 實(shí)踐了，實(shí)踐內(nèi)容：將 HTML 頁面中的列表前面的項(xiàng)目符號(hào)設(shè)置為外面。

代碼塊

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

結(jié)果圖

注意：為什么給列表設(shè)置了 list-style-position 屬性值為 outside ，運(yùn)行結(jié)果沒有發(fā)生任何變化呢，因?yàn)榱斜砬懊娴捻?xiàng)目符號(hào)默認(rèn)就在外面的位置，列表前面的項(xiàng)目符號(hào)外面的位置就是 ul 標(biāo)簽和 li 標(biāo)簽之間的位置。

屬性值為inside使用方式

  1.  通過介紹 list-style-position 屬性值為 outside ，大家已經(jīng)知道了列表前面項(xiàng)目符號(hào)外邊的位置了，接下來我們將列表前面項(xiàng)目符號(hào)設(shè)置在里面咯。
  2. 讓我們進(jìn)入 list-style-position 屬性值為 inside 實(shí)踐，將列表前面項(xiàng)目符號(hào)位置設(shè)置在里面。

代碼塊

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

結(jié)果圖

注意： list-style-position 屬性值為 inside 作用就是將列表前面項(xiàng)目符號(hào)位置設(shè)置在 li 標(biāo)簽中，這就是里面的位置。

list-style-image屬性

list-style-image 屬性作用：將列表前面項(xiàng)目符號(hào)設(shè)置為一張圖片。

 list-style-image屬性說明表 

     

屬性值名稱 描述
url 設(shè)置列表前面項(xiàng)目符號(hào)的圖片的路徑

讓我們進(jìn)入 list-style-image 屬性的實(shí)踐，實(shí)踐內(nèi)容將列表前面項(xiàng)目符號(hào)更換一張圖片。

代碼塊

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

結(jié)果圖

注意：圖片路徑一定要寫在 url(./img/001.png); 括號(hào)當(dāng)中，不然不會(huì)被渲染的，圖片路徑可以是相對(duì)路徑也可以絕對(duì)路徑。

list-style屬性

list-style 屬性是（ list-style-type 屬性、 list-style-position 屬性、 list-style-image 屬性）的一個(gè)簡寫屬性，它集成了（ list-style-type 屬性、 list-style-position 屬性、 list-style-image 屬性）的功能。

讓我們進(jìn)入 list-style 屬性實(shí)踐，既然看到了這里想必園友都已經(jīng)掌握了本章的內(nèi)容了。

代碼塊

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

結(jié)果圖

注意： list-style 屬性值可以也 1 個(gè)或 2 個(gè) 3 個(gè)，順序沒有要求，若有不明白的園友可以做個(gè)實(shí)例看看就明白了，學(xué)習(xí)就要多嘗試不要偷懶呦。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論