CSS Styling - Lists
List
在HTML,List有兩種類型
- 沒有順序的lists(unordered lists) - the list items are marked with bullets
- 有順序的lists(ordered lists) - the list items are marked with numbers or letters
- ul.a {list-style-type: circle;}
- ul.b {list-style-type: square;}
- ol.c {list-style-type: upper-roman;}
- ol.d {list-style-type: lower-alpha;}
- ul.a 是表示對HTML這個ul元素定義一個class叫做a
- 原W3School的Demo
- ul
- {
- list-style-image: url('sqpurple.gif');
- }
- 對ul這個元素定義其呈現的方式(list item用sqpurple.gif取代)
- 原W3School的Demo
在IE跟Opera在呈現這個image list item時會比火狐,Chrome跟Safari高一點.
以下的範例將會示範如何在各個瀏覽器呈現出來的都會一樣!
跨瀏覽器的解決辦法
- ul
- {
- list-style-type: none;
- padding: 0px;
- margin: 0px;
- }
- li
- {
- background-image: url(sqpurple.gif);
- background-repeat: no-repeat;
- background-position: 0px 5px;
- padding-left: 14px;
- }
- 原W3School的Demo
- 解釋
- 針對ul :
- 藉由設定list-style-type: none;來移除list item
- 設定padding跟margin都為0 (跨瀏覽器的相容)
- 針對li :
- 設定好圖片的url,並只出現一次(no-repeat;)
- 把圖片放置到想要的地方(因為IE跟Ｏpera會略高,所以統一都放在left: 0px,down: 5px的位置)
- Position the text in the list with padding-left
- 留白 (padding) 是在內容外，邊框內的部分
- padding-top (上)
- padding-right (右)
- padding-bottom (下)
- padding-left (左)
- 第五個屬性，padding，是用來作為同時設定四個邊留白的捷徑屬性
- 範例:
- #container
- {
padding-top:15px;
padding-left:10px;
padding-right:30px;
padding-bottom:40px;
border: 1px solid 000000;
} - #container
- {
- padding 15px 30px 40 px 10px;
- /*上 右 下 左*/
- }
把所有的properties用一個property表示
範例
- ul
- {
- list-style: square url("sqpurple.gif");
- }
- 將list-style-type(list item)設定成square
- 並用sqpurple.gif取代
- 原W3School的Demo
留言
張貼留言