• <menu id="ecaea"><center id="ecaea"></center></menu>
    <blockquote id="ecaea"><center id="ecaea"></center></blockquote>
  • 專注搜索競價代運營

    成長之選 ,效果之道!

    免費咨詢熱線:17636682598

    html列表有哪幾種,樣式怎么設置

    html列表標簽有ul、ol,無序列表、有序列表;怎么清除列表格式去掉點、空格、進行水平垂直布局。

    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> 列表水平布局:默認</p> 
    34.             <ul > 
    35.                 <li>無序列表1</li> 
    36.                 <li>無序列表2</li> 
    37.             </ul> 
    38.         </div> 
    39.         <div class="bd"
    40.             <p> 列表水平布局:float浮動實現</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實現</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列表去掉點

    在工作中,我們經常會用到列表,列表又分為有序列表和無序列表,無序列表在頁面中會顯示實心圓點,有序列表會顯示序號,但是,有時候我們不要它,覺得是多余的,不需要列表前面的點和序號顯示出來,那可以去除列表樣式嗎?怎么去掉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標簽創建

    2、有序列表,使用“ol”和“li”標簽創建,有序列表之間的內容有先后順序之分;

    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> 

    本文分類:營銷學院

    瀏覽次數:55次瀏覽

    發布日期:2022-07-13 15:29:12

    本文鏈接:http://www.backlinkboom.com/edu/2429.html

    上一篇:html表格居中代碼效果
    下一篇:返回列表
    天美传媒精品,亚洲国际综合无码一区,液液酱cosplay露出
  • <menu id="ecaea"><center id="ecaea"></center></menu>
    <blockquote id="ecaea"><center id="ecaea"></center></blockquote>