两个吃奶一个添下面视频_人妻第一页香蕉网_欧美xxxx少妇_妺妺窝人体色www婷婷

本篇將主要介紹列表的CSS樣式編寫,在學(xué)習(xí)之前,我們回憶一下HTML中的有序列表無序列表

舉例:

   	<span>無序列表-我的愛好:</span>
    <ul>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>果汁</li>
    </ul>
	<span>有序列表-成績排行:</span>
    <ol>
        <li>張三</li>
        <li>李四</li>
        <li>趙五</li>
    </ol>

運行結(jié)果如下:

有序列表和無序列表


css列表屬性作用:

(1)設(shè)置不同的列表項標(biāo)記為有序列表

(2)設(shè)置不同的列表項標(biāo)記為無序列表

(3)設(shè)置列表項標(biāo)記為圖像

在html中,有兩種類型的html列表:

(1)無序列表:列表項的標(biāo)記使用特殊圖形(如小黑點、小方框等)

(2)有序列表:列表項的標(biāo)記使用數(shù)字或字母

(3)使用css,可以列出進一步的樣式,并可用圖像作列表項標(biāo)記

列表-簡寫屬性

在單個屬性中可以指定所有的列表屬性,這就是所謂的簡寫屬性,使用縮寫屬性值的順序是:

1. list-style-type

2. list-style-position

3. list-style-image

在簡寫屬性時,如果上述值丟失一個,其余仍在指定的順序,就沒影響。


1. list-style-type無序列表樣式

描述
none無標(biāo)記
disc默認(rèn)值,標(biāo)記為實心圓
circle將標(biāo)記設(shè)置為空心圓
square將標(biāo)記設(shè)置為實心方塊
decimal將標(biāo)記設(shè)置為數(shù)字
decimal-leading-zero將標(biāo)記設(shè)置為以 0 開頭的數(shù)字標(biāo)記,例如 01、02、03
lower-roman將標(biāo)記設(shè)置為小寫羅馬數(shù)字,例如 i、ii、iii、iv、v
upper-roman將標(biāo)記設(shè)置為大寫羅馬數(shù)字,例如 I、II、III、IV、V
lower-alpha將標(biāo)記設(shè)置為小寫英文字母,例如 a、b、c、d、e
upper-alpha將標(biāo)記設(shè)置為大寫英文字母,例如 A、B、C、D、E
lower-greek將標(biāo)記設(shè)置為小寫希臘字母,例如 α、β、γ、δ、ε
lower-latin將標(biāo)記設(shè)置為小寫拉丁字母,例如 a、b、c、d、e
upper-latin將標(biāo)記設(shè)置為大寫拉丁字母,例如 A、B、C、D、E
hebrew將標(biāo)記設(shè)置為傳統(tǒng)的希伯來編號
armenian將標(biāo)記設(shè)置為傳統(tǒng)的亞美尼亞編號
georgian將標(biāo)記設(shè)置為傳統(tǒng)的喬治亞編號
cjk-ideographic將標(biāo)記設(shè)置為中文數(shù)字,例如 一、二、三、四、五
hiragana將標(biāo)記設(shè)置為日文平假名字符,例如 あ、い、う、え、お
katakana將標(biāo)記設(shè)置為日文片假名字符,例如 ア、イ、ウ、エ、オ
hiragana-iroha將標(biāo)記設(shè)置為日文平假名序號
katakana-iroha將標(biāo)記設(shè)置為日文片假名序號

舉例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .ul-none {
            list-style-type: none;
        }
        .ul-circle {
            list-style-type: circle;
        }
        .ul-square {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ul>
        <li>籃球</li>
        <li>足球</li>
        <li>乒乓球</li>
    </ul>
    <ul class="ul-none">
        <li>籃球</li>
        <li>足球</li>
        <li>乒乓球</li>
    </ul>
    <ul class="ul-circle">
        <li>籃球</li>
        <li>足球</li>
        <li>乒乓球</li>
    </ul>
    <ul class="ul-square">
        <li>籃球</li>
        <li>足球</li>
        <li>乒乓球</li>
    </ul>
</body>
</html>

運行結(jié)果:

無序列表樣式

舉例:

<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: circle;
        }
        ol {
            float: left;
        }
        .ol_one {
            list-style-type: lower-roman;
        }
        .ol_two {
            list-style-type: lower-greek;
        }
        .ol_three {
            list-style-type: georgian;
        }
    </style>
</head>
<body>
    <ul>
        <li>姓名</li>
        <li>性別</li>
        <li>籍貫</li>
    </ul>
    <ol class="ol_one">
        <li>姓名</li>
        <li>性別</li>
        <li>籍貫</li>
    </ol>
    <ol class="ol_two">
        <li>姓名</li>
        <li>性別</li>
        <li>籍貫</li>
    </ol>
    <ol class="ol_three">
        <li>姓名</li>
        <li>性別</li>
        <li>籍貫</li>
    </ol>
</body>
</html>

運行結(jié)果:

list-style-type


2. list-style-position有序列表樣式

描述
inside列表項前的標(biāo)記放置在之后的文本以內(nèi),列表項中的文本會根據(jù)標(biāo)記對齊
outside默認(rèn)值,保持標(biāo)記位于文本的左側(cè),列表項前的標(biāo)記放置在文本以外,并且列表項中的文本不會根據(jù)標(biāo)記對齊
inherit從父元素繼承 list-style-position 屬性的值

舉例:

<!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            list-style-type: lower-roman;
        }
        li {
            background: #ccc;
            margin-bottom: 2px;
        }
        .ol_one {
            list-style-position: inside;
        }
        .ol_two {
            list-style-position: outside;
        }
    </style>
</head>
<body>
    <ol class="ol_one">
        <li>姓名</li>
        <li>性別</li>
        <li>電話</li>
    </ol>
    <ol class="ol_two">
        <li>地址</li>
        <li>郵編</li>
        <li>郵件</li>
    </ol>
</body>
</html>

運行結(jié)果:

有序列表樣式


3. list-style-image修改列表標(biāo)記圖像

描述
URL圖像的路徑
none默認(rèn)值,不顯示任何圖像
inherit從父元素繼承 list-style-image 屬性的值


4. list-style

ist-style 屬性是上述三個屬性(list-style-type、list-style-position、list-style-image)的簡寫,使用 list-style 可以同時設(shè)置上面的三個屬性,其語法格式如下:

list-style: list-style-type || list-style-position || list-style-image;
點贊(0)

C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍橋杯競賽優(yōu)秀選手錄制的視頻教程,并配有習(xí)題和答疑,點擊了解:

一點編程也不會寫的:零基礎(chǔ)C語言學(xué)練課程

解決困擾你多年的C語言疑難雜癥特性的C語言進階課程

從零到寫出一個爬蟲的Python編程課程

只會語法寫不出代碼?手把手帶你寫100個編程真題的編程百練課程

信息學(xué)奧賽或C++選手的 必學(xué)C++課程

藍橋杯ACM、信息學(xué)奧賽的必學(xué)課程:算法競賽課入門課程

手把手講解近五年真題的藍橋杯輔導(dǎo)課程

Dotcpp在線編譯      (登錄可減少運行等待時間)