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

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

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

列表樣式屬性

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

list-style-type屬性

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

     

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

屬性值為none使用方式

  • 讓我們進入列表的 list-style-type 屬性值為 none 實踐，實踐內(nèi)容如：使用 class 屬性值為 .box 將列表前面項目符號去除掉。
  • 我們在實踐列表的 list-style-type 屬性值為 none 之前看看列表前面項目符號是什么，讓初學者有一個直觀的印象。

代碼塊

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

結(jié)果圖

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

代碼塊

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

結(jié)果圖

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

屬性值為disc使用方式

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

屬性值為circle使用方式

讓我們進入列表的 list-style-type 屬性值為 circle 實踐，實踐內(nèi)容如：將列表前面的項目符號設(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實踐</title>
    <style>
        .box{
            list-style-type: circle;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
        <li>成功不是打敗別人，而是改變自己。</li>
    </ul>
</body>
</html>

結(jié)果圖

屬性值為square使用方式

讓我們進入列表的 list-style-type 屬性值為 square 實踐，實踐內(nèi)容如：將列表前面項目符號設(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實踐</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è)置列表前面項目符號的位置， list-style-position 屬性有2個屬性值，分別是 outside 、 inside ，具體說明看下面的屬性值說明表。

list-style-position屬性值說明表 

     

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

屬性值為outside使用方式

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

代碼塊

<!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)在大家應該很清楚的看到了列表前面項目的符號默認在 ul 標簽和 li 標簽之間的位置，現(xiàn)在我們知道了列表前面的項目符號的默認位置，那我們進行 list-style-position 屬性值為 outside 實踐了，實踐內(nèi)容：將 HTML 頁面中的列表前面的項目符號設(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 ，運行結(jié)果沒有發(fā)生任何變化呢，因為列表前面的項目符號默認就在外面的位置，列表前面的項目符號外面的位置就是 ul 標簽和 li 標簽之間的位置。

屬性值為inside使用方式

  1.  通過介紹 list-style-position 屬性值為 outside ，大家已經(jīng)知道了列表前面項目符號外邊的位置了，接下來我們將列表前面項目符號設(shè)置在里面咯。
  2. 讓我們進入 list-style-position 屬性值為 inside 實踐，將列表前面項目符號位置設(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 作用就是將列表前面項目符號位置設(shè)置在 li 標簽中，這就是里面的位置。

list-style-image屬性

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

 list-style-image屬性說明表 

     

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

讓我們進入 list-style-image 屬性的實踐，實踐內(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-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); 括號當中，不然不會被渲染的，圖片路徑可以是相對路徑也可以絕對路徑。

list-style屬性

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

讓我們進入 list-style 屬性實踐，既然看到了這里想必園友都已經(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 個或 2 個 3 個，順序沒有要求，若有不明白的園友可以做個實例看看就明白了，學習就要多嘗試不要偷懶呦。

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

相關(guān)文章

最新評論