css網站元素設計-列表元素的使用

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1、列表形式由於展示形式整齊直觀，在網站設計中佔有很大的比重。早期的列表都是由表格實現的，在代碼上過於繁雜，設計和可讀性較差。這一節我們重點探討無序列表ul及有序列表ol元素的使用。
看XHTML代碼很簡單：程式碼<ul>
    <li>布局概述</li>
    <li>頁面元素入門</li>
    <li>進階技巧</li>
    <li>進階技巧</li>
</ul>
<ol>
    <li>布局概述</li>
    <li>頁面元素入門</li>
    <li>進階技巧</li>
    <li>進階技巧</li>
</ol>

以上對比效果見圖左：

2、針對ul的項目列表符號有以下幾種：程式碼ul{list-style-type:none} /*不顯示項目符號*/
ul{list-style-type:disc} /*實心圓點，預設的*/
ul{list-style-type:ncircle} /*空心圓點*/
ul{list-style-type:square} /*實心方塊*/

針對ol的項目列表符號有以下幾種：none（沒有）;decimal（實心圓點，預設的）;circle（空心圓點），square（小方塊）；程式碼ol{list-style-type:none} /*不顯示項目符號*/
ol{list-style-type:decimal} /*阿拉伯數字*/
ol{list-style-type:lower-roman} /*小寫羅馬數字*/
ol{list-style-type:upper-roman} /*大寫羅馬數字*/
ol{list-style-type:lower-alpha} /*小寫英文字母*/
ol{list-style-type:upper-alpha} /*大寫英文字母*/

3、使用圖片自訂項目符號程式碼ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;}

其中：list-style-position:inside;的意義是設定清單項目位置位於內部，inside與outside是這一句的屬性值，對比效果如右側。
其實用過這種方法的朋友會發現，使用這種方法固然簡單，但定位起來比較麻煩，而且在效果上也有很大的局限性，下面我們採用背景圖片的方法來實現項目列表樣式：
css代碼如下：程式碼ul{list-style-type:none;}/*去掉項目符號*/
li{background:url(arrow.gif) no-repeat 0px 3px;
padding-left:20px;}

4、使列表變為段落
在以前的教程中，我們接觸了display:block;的屬性定義，而display的可用值中除了這個外，還有一個inline;詳細見下：程式碼display:block;//將對象顯示為塊狀或叫做盒狀，後一個對象換行顯示。
display:none;//隱藏，不顯示對象；
display:inline;//行間內聯樣式，對象排列在一行中，後一個對象繼續串連此對象顯示；
display:inline-block;//對象顯示為塊狀，但能呈現內聯樣式。
display:list-item;//將對象作為清單項目顯示；

以下做一對比：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>步步為營，實戰div+css系列教程</title>
</head>
<style tpye="text/css">
<!--
ul{list-style-type:none;display:inline;padding:0px;margin-left:0px;}/*去掉項目符號*/
li{display:inline}
h1{display:inline;font-size:16px;font-weight:normal}

-->
</style>
<body>
<h1>這一節我們重點講解列表元素的應用：</h1>
<ul>
    <li>改變清單項目符號</li>
    <li>使列表變為段落</li>
    <li>列表的縮排排版</li>
    <li>複雜列表的排版</li>
</ul>
<h1>在排版的過程中，應用一些圖文混排技術，可以實現更好的效果。</h1>
</body>
</html>

效果

把ul對象，li對象,h1對象都設定為內聯屬性，便形成一段落，再控制好左邊距及內邊距，就右部分所示。
下面我們繼續對代碼改進，設定其首行縮排：
首行縮排代碼：

程式碼text-indent:32px;//可以用固定值，
text-indent:50%; //也可以用其它值如：50%，0.5em.還可以用負值。

小結：這一節主要認識了有序列表ol與無序列表ul，並且常用的屬性參數。下一節我們將綜合這方面內容實現較複雜的列表布局。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More