專注搜索競價代運營

成長之選 ，效果之道！

免費咨詢熱線：17636682598

html列表有哪幾種，樣式怎么設(shè)置

html列表標(biāo)簽有ul、ol，無序列表、有序列表；怎么清除列表格式去掉點、空格、進(jìn)行水平垂直布局。

html列表水平橫向布局排列

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>通高科技</title> 
  6.         <style> 
  7.             p{ 
  8.                 text-align: center; 
  9.                 line-height: 30px; 
  10.             } 
  11.             ul{ 
  12.                 list-style: none; 
  13.             } 
  14.             .bd{ 
  15.                 width: 300px; 
  16.                 height: 200px; 
  17.                 background: gold; 
  18.                 float: left; 
  19.                 margin-left: 5px; 
  20.                 font-size: 12px; 
  21.             } 
  22.             .ul1 li{ 
  23.                 float: left; 
  24.             } 
  25.             .ul2 li{ 
  26.                 display: inline-block; 
  27.             } 
  28.  
  29.         </style> 
  30.     </head> 
  31.     <body> 
  32.         <div class="bd"> 
  33.             <p> 列表水平布局:默認(rèn)</p> 
  34.             <ul > 
  35.                 <li>無序列表1</li> 
  36.                 <li>無序列表2</li> 
  37.             </ul> 
  38.         </div> 
  39.         <div class="bd"> 
  40.             <p> 列表水平布局:float浮動實現(xiàn)</p> 
  41.             <ul class="ul1"> 
  42.                 <li>無序列表1</li> 
  43.                 <li>無序列表2</li> 
  44.             </ul> 
  45.         </div> 
  46.         <div class="bd"> 
  47.             <p> 列表水平布局:display:inline-block實現(xiàn)</p> 
  48.             <ul class="ul2"> 
  49.                 <li>無序列表1</li> 
  50.                 <li>無序列表2</li> 
  51.             </ul> 
  52.         </div> 
  53.      
  54.          
  55.     </body> 
  56. </html> 

html列表去掉前面的空格

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>通高科技</title> 
  6.         <style> 
  7.             p{ 
  8.                 text-align: center; 
  9.             } 
  10.             .bd{ 
  11.                 width: 400px; 
  12.                 background: greenyellow; 
  13.             } 
  14.             .ul1{list-style: none; 
  15.                 padding: 0; 
  16.                 margin: 0; 
  17.             } 
  18.             .ol1{list-style: none;} 
  19.              
  20.         </style> 
  21.     </head> 
  22.     <body> 
  23.         <div class="bd"> 
  24.             <p> 有空格</p> 
  25.             <ul> 
  26.                 <li>無序列表1</li> 
  27.                 <li>無序列表2</li> 
  28.             </ul> 
  29.         </div> 
  30.         <div class="bd"> 
  31.             <p> 無空格</p> 
  32.             <ul class="ul1"> 
  33.                 <li>無序列表1</li> 
  34.                 <li>無序列表2</li> 
  35.             </ul> 
  36.         </div> 
  37.          
  38.     </body> 
  39. </html> 

html列表去掉點

在工作中，我們經(jīng)常會用到列表，列表又分為有序列表和無序列表，無序列表在頁面中會顯示實心圓點，有序列表會顯示序號，但是，有時候我們不要它，覺得是多余的，不需要列表前面的點和序號顯示出來，那可以去除列表樣式嗎？怎么去掉li前面的點呢
 

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>通高科技</title> 
  6.         <style> 
  7.             p{ 
  8.                 text-align: center; 
  9.             } 
  10.             .bd{ 
  11.                 width: 400px; 
  12.                 background: greenyellow; 
  13.             } 
  14.             .ul1{list-style: none;} 
  15.             .ol1{list-style: none;} 
  16.         </style> 
  17.     </head> 
  18.     <body> 
  19.         <div class="bd"> 
  20.             <p> 有樣式</p> 
  21.             <ul> 
  22.                 <li>無序列表1</li> 
  23.                 <li>無序列表2</li> 
  24.             </ul> 
  25.             <ol> 
  26.                 <li>有序列表</li> 
  27.                 <li>有序列表</li> 
  28.             </ol> 
  29.              
  30.         </div> 
  31.         <div class="bd"> 
  32.             <p> 無樣式</p> 
  33.              
  34.             <ul class="ul1"> 
  35.                 <li>無序列表1</li> 
  36.                 <li>無序列表2</li> 
  37.             </ul> 
  38.             <ol class="ol1"> 
  39.                 <li>有序列表</li> 
  40.                 <li>有序列表</li> 
  41.             </ol> 
  42.         </div> 
  43.          
  44.     </body> 
  45. </html> 

html列表有哪幾種

HTML有2種常用列表模式：

1、無序列表ul,使用ul和li標(biāo)簽創(chuàng)建

2、有序列表，使用“ol”和“li”標(biāo)簽創(chuàng)建，有序列表之間的內(nèi)容有先后順序之分；

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>通高科技</title> 
  6.         <style> 
  7.              
  8.         </style> 
  9.     </head> 
  10.     <body> 
  11.         <ul> 
  12.             <li>無序列表1</li> 
  13.             <li>無序列表2</li> 
  14.         </ul> 
  15.         <ol> 
  16.             <li>有序列表</li> 
  17.             <li>有序列表</li> 
  18.         </ol> 
  19.     </body> 
  20. </html> 

本文分類：營銷學(xué)院

瀏覽次數(shù)：55次瀏覽

發(fā)布日期：2022-07-13 15:29:12

本文鏈接：http://24hourphotoeditor.com/edu/2429.html

上一篇：html表格居中代碼效果
下一篇：返回列表