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.桔子