範仁義html css課程 5 列表

2022-03-24 00:45:43 字數 3884 閱讀 4118

學會基本的使用有序列表、無序列表、定義列表,設定樣式的話盡量通過css而不是屬性ul標籤包裹li標籤:

cpb粉底li>

雪花秀氣墊bbli>

iope氣墊bbli>

ul>

type屬性:有三個值:1.disc(預設值)(實心圓);2.circle(空心圓);3.square(實心方塊)ol標籤包裹li標籤:

<

ol>

<

li>第一步:清洗面部

li>

<

li>第二部:塗爽膚水

li>

<

li>第三部:塗乳液

li>

<

li>第四部:塗防曬

li>

ol>

type屬性:可以是整數,大小寫英文本母,大小寫羅馬字母

start屬性:定義列表的開始序號

reversed屬性:定義列表倒序排列dl標籤包裹dt和dd標籤,dt是概念,dd是相應的解釋和描述:

<

dl>

<

dt>cpb

dt>

<

dd>日本高階護膚品品牌

dd>

<

dt>雪花秀

dt>

<

dd>南韓中高階護膚品品牌

dd>

dl>

ul(unorder line)標籤裡面放li標籤就好了,每一項就是乙個li(lineitem)標籤

無序列表的type屬性有三個值:1.disc(預設值);2.circle;3.square

分別對應

這裡演示的就是ul中type為circle的效果

在css

ol(order line)標籤裡面放li標籤就好了,每一項就是乙個li(lineitem)標籤

整數(預設值);

大(小)寫字母a\b\c...

大小寫的羅馬字母:i ii .../i ii iii

這裡設定的ol的type為大寫字母a

li標籤裡面放鏈結都是可以的,元素的巢狀

定義列表的開始序號,比如第一項不是數字1,而是從10開始.......

就把ol的start屬性設定成不同就可以了

reversed屬性的值為reversed或者true表示倒序排列

比如reversed="reversed"

定義某個單個列表項的序號.......

可以通過value屬性來設定不連續列表

我們之前都是對ol操作,這裡是對li操作

因為要設定每一項,所以可以每一項任意設定

比如說之前是連續的123,這裡卻跳到了10

做法是把跳的那一項li的value屬性單獨設定成10就好了

設定之後,後面的值會在這個設定的值上面遞增

自定義列表項組成:由 dl定義列表;dt定義列表專案;dd定義列表內容;

列表專案一

列表專案一的內容

列表專案二

列表專案二的內容

列表專案一

列表專案一的內容

列表專案二

列表專案二的內容

列表支援巢狀,比如

<

ol type

="i"

start

="5"

reversed

="reversed"

>

<

li>第一步:清洗面部

li>

<

li>第二部:塗爽膚水

li>

<

li>第三部:塗乳液

li>

<

li>第四部:塗防曬

li>

<

ol >

<

li>先塗粉底再塗防曬

li>

<

li>先塗防曬再塗粉底

li>

ol>

ol>

長做導航,以及一些列表內容(比如課程章節對應的具體課程)

有序列表通常用來表示內容之間的順序或者是重要性關係,每乙個列表都分為多個子項,每乙個子項都有相應的編號。

有序列表,列表項包含在標籤對中,有序列表以定義,專案前有數字或者字母縮排

無序列表僅僅用於表示內容之間存在有並列關係,也是分為多個子項,但是子項之前沒有相應的編號,只有乙個原點用於標識。

無序列表,列表項包含在標籤對中,無序列表以定義,專案前有符號縮排

自定列表,列表項包含在標籤對中,與定義項對應的每個定義,自定義列表以定義,專案前有符號縮排

定義列表通常用於表示名詞或者是概念的定義,每乙個子項有兩個部分組成,第一部分是名詞或者是概念,第二部分是相應的解釋和描述。

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

head

>

<

body

>

<

ol type

="i"

start

="5"

reversed

="reversed"

>

<

li>第一步:清洗面部

li>

<

li>第二部:塗爽膚水

li>

<

li>第三部:塗乳液

li>

<

li>第四部:塗防曬

li>

<

ol >

<

li>先塗粉底再塗防曬

li>

<

li>先塗防曬再塗粉底

li>

ol>

ol>

<

ul>

<

li>cpb粉底

li>

<

li>雪花秀氣墊bb

li>

<

li>iope氣墊bb

li>

ul>

<

dl>

<

dt>cpb

dt>

<

dd>日本高階護膚品品牌

dd>

<

dt>雪花秀

dt>

<

dd>南韓中高階護膚品品牌

dd>

dl>

body

>

html

>

效果圖:

一、 list-style-type:disc(預設for ul,實心圓);decimal(預設for ol ,數字);none(無標記);circle(空心圓);square(實心方塊);decimal-leading-zero(01,02等以0開頭的數字);lower-roman(小寫羅馬數字);upper-roman(大寫羅馬數字);lower-alpha(小寫英文本母);upper-alpha(大寫英文本母);

二、list-style-position:outside(預設);inside;inherit;

三、list-style-image:none(預設);url(「img.png」);inherit;

範仁義js課程 5 js字面量和變數

字面量就是常量,也就是不會改變的量,比如數字1。變數就是可以變化的量,一般變數可以用來儲存字面量。var age 80 比如直接alert 12342 字面量都是可以直接使用,但是我們一般都不會直接使用字面量 變數可以用來儲存字面量,而且變數的值是可以任意改變的 通過變數可以對字面量進行描述 變數更...

python練習5 列表

dayup 1.0dayfactor 0.01 for i in range 365 if i 7 in 6,0 dayup 1 dayfactor else dayup 1 dayfactor print dayup format dayup a,n map int,input 請輸入不超過9的兩...

程式5 列表排序sort

程式5 列表排序sort 題目 輸入三個整數x,y,z,請把這三個數由小到大輸出。1.程式分析 我們想辦法把最小的數放到x上,先將x與y進行比較,如果x y則將x與y的值進行交換,然後再用x與z進行比較,如果x z則將x與z的值進行交換,這樣能使x最小。知識點排序 原型sort key none,r...