Css基礎學習(六) 列表

2021-04-21 18:27:05 字數 1496 閱讀 6467

瀏覽任何基於web標準建立的**資源,幾乎都可以看到乙個導航列表、乙個外部鏈結列表、有的還有按鈕列表和陣列列表。**設計開始階段就採用簡單的列表可保證設計的靈活性和各種功能,並且可以在某些瀏覽場景下簡化設計。

1、list-style-type屬性

list-style-type屬性可以從多個可能的列表專案符中為列表設定乙個特定列表專案符,使列表不採用預設的disc。常用的值有:none、disc、circle、square、latin;這些值看英文就知道會顯示什麼了。

另外常用的upper-alpha:a、b、c、d、e等;lower-alpha:a、b、c、d、e等;upper-roman:i、ii、iii、iv、v等;

我們看看使用的css語句:

/* style for all default lists */

ul2、外邊距與內邊距

如果我們使用list-style-type:none;的樣式,實際的列表項並不會因為去掉了列表專案符就緊靠左邊框。

大部分的瀏覽器將列表項置於距離無序列表左邊框30畫素處(預設padding)。無序列表本身距離容器的上邊框約10畫素(預設margin)。

3、list-style-position屬性

list-style-position屬性的預設值為outside,還可以設定inside值,inside使列表專案符內聯在文字中。

list-style-position:inside;長文字在列表專案符下另起一行,好像列表專案符是個普通字元一樣。此屬性作用不大,就在此提一下。

4、list-style-image屬性

ul 我們還可以選擇另外一種方式來實現列表專案符使用來替代,而且功能更加的強大,可以每個列表使用不同的圖案。

ul li

5、list-style縮寫

list-style-type、list-style-position和list-style-image可以按任意次序排列。

list-style:none

inside

url(images/list.gif);

不過如果有了list-style-image設定,就不需要設定list-style-type,因此這個縮寫意義不大。

6、內聯列表

無序列表預設垂直顯示的,因為li元素是塊級元素,那水平顯示就是將塊級元素轉變為內聯的元素。下面就是css的實現方式,簡單的很。

ul li

設定成水平列表以後,列表專案符就不再顯示了,如果我們還需要列表專案符,就要使用前面講到的設定背景影象了。

上面css效果如下:

coffee

7、用於導航的列表

還是前面使用的列表,修改一下css來改變列表成為導航列表的樣子;

ul li

上面的顯示效果如下:

Python學習 Python基礎 六 列表

2 列表 list 3 通用操作 4 修改列表 5 列表的方法 6 遍歷列表 從未接觸過 和論壇部落格的超級小白一枚,最近在學習python,把從頭開始學到的東西都記錄在這裡,當做自己的成長記錄,希望可以慢慢成長起來!加油!v 步長表示每次獲取元素的間隔,預設是1 可以省略不寫 步長不能是0,但可以...

Python基礎六 列表和字典

乙個列表需要用中括號 把裡面的各種資料框起來,裡面的每乙個資料叫作 元素 每個元素之間都要用英文逗號隔開。例 list1 小明 小紅 小剛 list2 12 25,26.0 從列表提取單個元素 我們可以通過偏移量對列表進行索引來讀取所要元素 例 list 小明 小紅 小剛 print list 1 ...

Redis學習(六) 列表型別(List)

列表型別可以儲存乙個有序的字串列表,常用的操作是向列表的兩端新增元素,或者獲取列表的乙個片段 與雜湊型別最多能容納的字段數量相同,乙個列表型別鍵最多能容納2 32 1個元素。優點 列表型別的內部是使用 double linked list 雙向鍊錶實現的,所以像列表兩端新增元素的時間複雜度為o 1 ...