经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
<ul>标签--无序列表
来源:cnblogs  作者:C_XingM  时间:2019/7/2 12:44:28  对本文有异议

[2019.07.02 学习笔记2]

1.定义无序列表,没有顺序。

2.默认情况下采用粗体圆点进行标记,无序列表始于<ul>标签,每个列表项始于<li>。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>无序列表 </title>
  6. </head>
  7. <body>
  8. <ul>
  9. <li> <a href="http://www.baidu.com/">百度链接1</a></li>
  10. <li><a href="http://www.baidu.com/">百度链接2</a></li>
  11. <li><a href="http://www.baidu.com/">百度链接3</a></li>
  12. </ul>
  13. </body>
  14. </html>

3.改变项目符号,在<ul>标签上加上type属性

    type="disc"      默认黑色圆点

 type="circle"    空心圆点

   type="square"  方块

  1. 1 <!DOCTYPE html>
  2. 2 <html lang="en">
  3. 3 <head>
  4. 4 <meta charset="UTF-8">
  5. 5 <title>无序列表 </title>
  6. 6 </head>
  7. 7 <body>
  8. 8 <!--默认-->
  9. 9 <ul>
  10. 10 <h4>默认项目符号</h4>
  11. 11 <li> <a href="http://www.baidu.com/">百度链接1</a></li>
  12. 12 <li><a href="http://www.baidu.com/">百度链接2</a></li>
  13. 13 <li><a href="http://www.baidu.com/">百度链接3</a></li>
  14. 14 </ul>
  15. 15 <!-- disc:粗体圆点-->
  16. 16 <ul type="disc">
  17. 17 <h4>disc:粗体圆点</h4>
  18. 18 <li> <a href="http://www.baidu.com/">百度链接1</a></li>
  19. 19 <li><a href="http://www.baidu.com/">百度链接2</a></li>
  20. 20 <li><a href="http://www.baidu.com/">百度链接3</a></li>
  21. 21 </ul>
  22. 22 <!--circle:空心圆点-->
  23. 23 <ul type="circle">
  24. 24 <h4>circle:空心圆点</h4>
  25. 25 <li> <a href="http://www.baidu.com/">百度链接1</a></li>
  26. 26 <li><a href="http://www.baidu.com/">百度链接2</a></li>
  27. 27 <li><a href="http://www.baidu.com/">百度链接3</a></li>
  28. 28 </ul>
  29. 29 <!--square:方块-->
  30. 30 <ul type="square">
  31. 31 <h4>square:方块</h4>
  32. 32 <li> <a href="http://www.baidu.com/">百度链接1</a></li>
  33. 33 <li><a href="http://www.baidu.com/">百度链接2</a></li>
  34. 34 <li><a href="http://www.baidu.com/">百度链接3</a></li>
  35. 35 </ul>
  36. 36 </body>
  37. 37 </html>
无序列表--type属性

4.可继续嵌套<ul>标签

  1. 1 <!DOCTYPE html>
  2. 2 <html lang="en">
  3. 3 <head>
  4. 4 <meta charset="UTF-8">
  5. 5 <title>无序列表 </title>
  6. 6 </head>
  7. 7 <body>
  8. 8 <ul>
  9. 9 <li>有害垃圾</li>
  10. 10 <li>可回收物</li>
  11. 11 <li>湿垃圾</li>
  12. 12 <li>干垃圾
  13. 13 <ul>
  14. 14 <li>餐盒</li>
  15. 15 <li>餐巾纸</li>
  16. 16 <li>湿纸巾</li>
  17. 17 <li>硬果壳
  18. 18 <ul>
  19. 19 <li>椰子壳</li>
  20. 20 <li>榴莲壳</li>
  21. 21 <li>核桃壳</li>
  22. 22 </ul>
  23. 23 </li>
  24. 24 </ul>
  25. 25 </li>
  26. 26 </ul>
  27. 27 </body>
  28. 28 </html>
无序列表--嵌套

 

原文链接:http://www.cnblogs.com/Caixingmin/p/11119124.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号