<var id="5bizx"></var>
    <var id="5bizx"></var>

    <form id="5bizx"></form>
    <var id="5bizx"></var>

        <form id="5bizx"><small id="5bizx"></small></form>

          專注搜索競價代運營

          成長之選 ,效果之道!

          免費咨詢熱線: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.citywhit.com/edu/2429.html

          上一篇:html表格居中代碼效果
          下一篇:返回列表
          人妻激情视频一区中文字幕,小雪被弄得很舒服,欧美成 人版中文字幕
            <var id="5bizx"></var>
            <var id="5bizx"></var>

            <form id="5bizx"></form>
            <var id="5bizx"></var>

                <form id="5bizx"><small id="5bizx"></small></form>