首页 > 代码库 > css基础

css基础

一、列表

列表有三种形式:

1.1 无序列表

      

无序列表,用来表示一个列表语义,并且每个项目与项目之间是不分先后顺序的

ul 的英文unordered list “无序列表”

li  的英文  list item “列表项”

你会发现 ,这个我们学习的“组标签”,就是要么不写,要写就写一组

<ul>

           <li>北京</li>

           <li>上海</li>

           <li>深圳</li>

           <li>广州</li>

</ul>

也就是,当前的这个列表项li不能单独的存在,必须包裹在ul标签里面,反过来说ul的“徒弟”就是li。

 

下表为错误演示:没有被ul标签包裹,默认没有ul的语义,所以直接没有排版

<li>北京</li>

<li>上海</li>

<li>深圳</li>

<li>广州</li>  

 

 

                      Ul标签并不是给文字添加小圆点的,而是给无序列表增加“语义技术分享

 

 

 

Ul标签实际应用的场景:导航条,排版文章,标题栏(ul放li,li是个容器级标签,什么都可以放)

 

ul的层级结构(嵌套结构)

  1. 1.       ul>
  2. 2.                <li>吃的
  3. 3.              <ul>
  4. 4.                         <li>饼干</li>
  5. 5.                         <li>水果
  6. 6.                      <ul>
  7. 7.                               <li>榴莲</li>
  8. 8.                               <li>香蕉
  9. 9.                                <ul>
  10. 10.                                     <li>拔丝香蕉
  11. 11.                                      <ul>
  12. 12.                                        <li>冷的</li>
  13. 13.                                        <li>热的</li>
  14. 14.                                      </ul>
  15. 15.                                     </li>
  16. 16.                                     <li>越南香蕉</li>
  17. 17.                             </ul>
  18. 18.                            </li>
  19. 19.                   </ul>
  20. 20.                      </li>
  21. 21.           </ul>
  22. 22.             </li>
  23. 23.     
  24. 24.             <li>喝的</li>
  25. 25.             <li>用的</li>
  26. 26.             <li>玩的</li>
  27. 27.    </ul>

 

1.2有序列表

order list 有序列表 , 用ol表示

<ol>

         <li>香蕉</li>

         <li>苹果</li>

         <li>桔子</li>

</ol>

 浏览器会自动添加阿拉伯序列号:

1.香蕉

2.苹果

3.桔子

css基础