網頁設計入門 列表

2022-05-06 15:12:10 字數 2533 閱讀 6797

一、無序列表(ul:unordered lists)

<

ul>

<

li>列表內容1

li>

<

li>列表內容2

li>

<

li>列表內容3

li>

ul>

list-style-type:disc(實心圓)|circle(空心圓)|square(正方形)|none;

如果要分別定義每個列表的樣式,可以通過如下代表實現:

<

html

>

<

head

>

<

title

>

title

>

<

style

type

="text/css"

>

.special1

.special2

style

>

head

>

<

body

>

<

ul>

<

li>列表內容1

li>

<

li class

="special1"

>列表內容2

li>

<

li class

="special2"

>列表內容3

li>

ul>

body

>

html

>

結果如下:

ps:1、可以通過list-style-image:none|url(路徑);實現給列表插入專案的效果;

2、可以通過在css裡新增li,實現列表的列轉行效果。

二、有序列表(ol:ordered lists)

list-style-type:decimal(阿拉伯數字1,2,3,...)|upper-alpha(a,b,c,...)|lower-alpha(a,b,c,...)|upper-roman(i,ii,iii,...)|lower-roman(i,ii,iii,...)|none;

**如下:

<

html

>

<

head

>

<

title

>

title

>

<

style

type

="text/css"

>

style

>

head

>

<

body

>

<

ol>

<

li>列表內容1

li>

<

li>列表內容2

li>

<

li>列表內容3

li>

ol>

<

ol start

="2"

>

<

li>列表內容1

li>

<

li>列表內容2

li>

<

li>列表內容3

li>

ol>

<

ol type

="a"

>

<

li>列表內容1

li>

<

li>列表內容2

li>

<

li>列表內容3

li>

ol>

body

>

html

>

實現結果如下:

三、定義列表(dl:definition list, dt:definition title, dd:definition description)

<

dl>

<

dt>列表一dt>

<

dd>列表內容1

dd>

<

dd>列表內容2

dd>

<

dd>列表內容3

dd>

<

dt>列表二dt>

<

dd>列表內容4

dd>

<

dd>列表內容5

dd>

<

dd>列表內容6

dd>

dl>

執行結果如下:

響應式網頁設計入門

響應式網頁設計 responsive web design 這個概念在2000年的時候就有人提出來了,其實我更喜歡將其翻譯為自適應網頁設計,阮一峰關於responsive web design的一篇文章就是翻譯為自適應網頁設計,但是國內都採用了響應式網頁設計這一生硬的翻譯 你能第一次看到響應式網頁設...

需求設計入門

我正式參加的第乙個專案是移動渠道運營,由於公司人手不夠,老大將渠道資源的大模組交給我乙個人來負責,由於之前的詳細設計極為粗略,庫表設計也沒有,所以一切就得自己來搞定了。開發過程中與客戶進行過2次粗略的互動,可由於我是新手,對移動業務很是不熟悉,他們的需求我難以全部消化。兩個月後一期開發完畢,昨天在現...

RESTful API 設計入門

前後端對接其實主要是面向 api 文件開發,而 api 的設計中,有一種 restful api 的設計,具有規範,從某一種角度,我覺得 restful api 可以很好的把後端 api 從繁雜的業務中抽象出來,更好地進行管理和編寫,同時也具有良好的可讀性。對於一些現代化的 mvc 框架,在腳手架階...