Css <ul><li>列表的樣式的控制

您的位置：首頁 - 教程 - CSS - 正文
Css

• 列表的樣式的控制列表是HTML裏一種很有用的顯示方式，可以把相關的並列內容整齊地垂直排列，使網頁顯得整潔專業，並讓瀏覽者有一目了然的感覺。
  列表是HTML裏一種很有用的顯示方式，可以把相關的並列內容整齊地垂直排列，使網頁顯得整潔專業，並讓瀏覽者有一目了然的感覺。
  樣式表為列表增加了一些功能，控制列表的樣式包括列表樣式、圖形符號、列表位置三個部分。
  1．列表符號
  列表符號是指顯示於每一個列表項目前的符號標識。
  基本格式如下：
  
  list-style-type：參數
  參數取值範圍：
  ·disc：圓形
  ·circle：空心圓
  ·square：方塊
  ·decimal：十進制數字
  ·lower-roman：小寫羅馬數字
  ·upper-roman：大寫羅馬數字
  ·lower-alpha：小寫希臘字母
  ·upper-alpha：大寫希臘字母
  ·none：無符號顯示
  參數中的disc是默認選項。
  2．圖形符號
  圖形符號指原來列表的項目符號將可以使用圖形來代替。
  基本格式如下：
  list-style-image：URL
  URL是用來代替項目符號的圖形文件的地址，可以使用相對地址或絕對地址。
  3．列表位置
  列表位置描述列表在何處顯示。
  基本格式如下：
  list-style-position：參數
  參數取值範圍：
  ·inside：在BOX模型內部顯示
  ·outside：在BOX模型外部顯示
  這裏又出現了一個新的概念：BOX模型。BOX是指一種容器，包含了應用樣式規則的對象，具體介紹將在後文中給出。 ========================================================================================
  使用無序列表：即UL
  看一個最簡單的例子：
  
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  這是一個未加修飾的縱向列表
  1：設置列表的邊界
  #base {
  border: 1px solid #000;
  margin: 2em;
  width: 10em;
  padding: 5px;
  }
  html中這樣寫，就會呈現一個帶邊框的無序列表
  
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  
  2：設定列表的圖像
  可以設定列表的樣式為左邊帶一個圖像，樣式如下：
  ul {
  list-style-type: disc;
  list-style-image: url(bullet.gif);
  list-style-position: inside;
  }
  disc表示實心的圓，list-style-image表示列表用到的小圖像，如果這個圖像的url
  不正確時，disc才會起作用，inside表示列表是在區塊內部的。
  3：如何在段落中使用列表
  樣式如下：
  #inline-list {
  border: 1px solid #000;
  margin: 2em;
  width: 80%;
  padding: 5px;
  font-family: Verdana, sans-serif;
  }
  #inline-list p {
  display: inline;
  }
  #inline-list ul, #inline-list li {
  display: inline;
  margin: 0;
  padding: 0;
  color: #339;
  font-weight: bold;
  }
  4：水平導航
  #h-contain {
  padding: 5px;
  border: 1px solid #000;
  margin-bottom: 25px;
  }
  #pipe ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  }
  #pipe ul li {
  margin-left: 0;
  padding: 3px 15px;
  
  border-left: 1px solid #000;
  list-style: none;
  display: inline;
  }
  #pipe ul li.first {
  margin-left: 0;
  border-left: none;
  list-style: none;
  display: inline;
  }
  #h-contain定一個一個邊界為1的區塊，水平導航用的也是inline方式，li.first定義第一個
  列表元素沒有左邊那個象素為1的border。
  下面的樣式是tab方式的水平導航：
  #tabs ul {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  }
  #tabs ul li {
  margin-left: 0;
  margin-bottom: 0;
  padding: 2px 15px 5px;
  border: 1px solid #000;
  list-style: none;
  display: inline;
  }
  #tabs ul li.here {
  border-bottom: 1px solid #ffc;
  list-style: none;
  display: inline;
  }
  li的class如果為here，則是選中的
  評論：
  

創作打卡挑戰賽


贏取流量/現金/CSDN周邊激勵大獎