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之前看看列表前面專案符號是什麼，讓初學者有一個直觀的印象。
程式碼塊

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

結果圖

現在愛學習的園友們知道了什麼是列表前面的專案符號了，那我們就進入列表的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>

結果圖

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

屬性值為disc使用方式

在這裡說明下列表的list-style-type屬性值為disc，列表的list-style-type屬性值預設就是disc，如果是細心的園友已經發現了，上面有現成的列子在這裡就不過多的介紹了，這個屬性值為disc就跳過了哈。

屬性值為circle使用方式

讓我進入列表的list-style-type屬性值為circle實踐，實踐內容如：將列表前面的專案符號設定為空心圓。
程式碼塊

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

結果圖

屬性值為square使用方式

讓我們進入列表的list-style-type屬性值為square實踐，實踐內容如：將列表前面專案符號設定為實心方塊。
程式碼塊

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

結果圖

CSS如何設定列表樣式屬性

列表樣式屬性在HTML中有2種列表、無序列表和有序列表，在工作中無序列表比較常用，無序列表就是ul標籤和li標籤組合成的稱之為無序列表，那什麼是有序列表呢？就是ol標籤和li標籤組合成的稱之為有序列表，列表的基礎知識就簡單說明下，本章內容主要說明的是如何給列表設定樣式，若有不懂列表是什麼的園友筆者建議去W

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

CSS控制列表樣式屬性list-style有哪些？怎麽用？

w3cschool list-style 控制列表樣式 css 前端開發 CSS列表樣式屬性list-style有哪些類型？不同類型CSS控制列表樣式使用時該註意什麽？這是W3Cschool用戶Shirley於2016-11-10在W3Cschool編程問答提出的問題。雲南小天使的回答很好

07：CSS設定列表樣式

1.有序列表(ol)和無序列表（ul） list.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>列表樣式</title&

CSS之——設定列表樣式和建立導航選單

一、設定列表的符號 list-style-type: 屬性；//設定列表樣式 list-style-type: none; //清楚樣式屬性有很多可以自己去試：circle，disc,decimal。。。。二、設定列表圖片符號為ul,ol設定圖

css基礎：樣式屬性

-h otto 下劃線基礎 size out 去掉滾動 ddl 1.背景與前景：background-color：；背景色，樣式表優先級高。 background-image：url（路徑）；設置背景圖片 background-attachment：fixed；背景固定

08：CSS設定表格樣式

1.一個簡單的表格 table.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>表格樣式</title> &

CSS設定表格樣式，樣式表格

table{ border-collapse: collapse; //相鄰邊被合併 &nbs

CSS 設定字型樣式為自己下載的個性字型

一般情況下設定字型樣式“font-family”都是電腦自帶的字型，如果想要用一些個性字型就要從網上下載使用了：下載字型地址：http://font.chinaz.com/zhongwenziti_2.html （有很多這樣的網站，在此我就找了一個）選擇自己喜歡的樣式，

css設定字型樣式

font-family: 字型型別 (隸屬,宋體,新羅馬,…) 該字型型別設定依賴於當前作業系統中已安裝的字型庫, 如果所設定的字型型別在系統中能查到, 則啟用該字型如果所設定的字型型別在系統中找不到, 則使用預設字型字型型別

CSS設定文字樣式——模擬Google

文字樣式，顧名思義，就是通過各種CSS去調整文字的樣式，從而創造出各式各樣的文字效果。在看完這部分的視訊後，一個很明顯的感覺：這好像是網頁版的word一樣。我們平時在Word中調整文字樣式，現在是在

Css的字型樣式屬性大全

CSS 屬性：字型樣式(Font Style) 1 字型樣式 {font:font-style font-variant font-weight font-size font-family} 2 字型型別 {font-family:"字型1","字型2","字型3"

H5 CSS中列表屬性設定

列表設定 list-style-type：圖示型別 list-style-position：圖示位置 list-style-image：圖示圖片 list-style：簡化書寫方案示例：list-style: circle outsid

css行內樣式的屬性設定，css的外部樣式的設定

15 行內樣式：行內樣式1：是通過標籤的style屬性來設定元素的樣式格式：<html 標籤 style=”css樣式程式碼”> 示例：<a style=”color:#f00

使用 jQuery 修改 css 中帶有 !important 的樣式屬性

wid tex jscript 使用全部保留 logs php color 外部樣式為： div.test { width:auto !important; overflow:auto !important } 　　通過 $("div.t

CSS 列表樣式詳解

.com htm 天龍八部分享 .cn font -s com str CSS列表用於前端的列表排列。 CSS列表屬性作用如下：設置不同的列表項標記為有序列表設置不同的列表項標記為無序列表設置列表項標記為圖像列表在HTML中，有兩種類型的列表：無序列表

css樣式屬性

lac ive splay ota div meta text type css css樣式屬性比HTML用標簽來添加方便很多，樣式也比較多樣。不過需要記得東西就更多了。 .d1 { width: 100px; height: 30px; border: 1

CSS覆蓋公共樣式中的某個屬性

1.0 gree code 標題 oct 綠色 itl 字體 clas CSS如何覆蓋公共樣式中的某個屬性？利用CSS樣式的優先級。如下例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

CSS ul（列表樣式）

編號代碼羅馬數字 tex chrom bsp mar 瀏覽器兼容性 int CSS Ul（列表樣式） CSS列表屬性作用如下：設置不同的列表項標記為有序列表設置不同的列表項標記為無序列表設置列表項標記為圖像一、列表在HTML中，有兩種類型的列表：無序列

css設定滾動條樣式，解決ios修改滾動條樣式無效問題

css部分 /* 橫向滾動容器 */ .scroll-wrapper { width: 100%; overflow-x: auto; height: 22px; white-space: nowrap; display: flex;

CSS如何設定列表樣式屬性

列表樣式屬性

list-style-type屬性

屬性值為none使用方式

屬性值為disc使用方式

屬性值為circle使用方式

屬性值為square使用方式

相關推薦