首页 > 软件开发 > HTML >

HTML中无序列表ul的使用方法

来源:互联网 2023-03-16 19:19:37 382

在遇到图文排列的时候,经常用到无序列表ul的使用,那么ul会有哪些属性呢wAy办公区 - 实用经验教程分享!

工具/原料

  • 华为MateBook D
  • Windows 10 10.3.3
  • HTML
  • 无序列表

方法/步骤

  • 1

    如图,在body中建立ul标签,而ul经常和li搭配,如图wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

  • 2

    我们看到输入li后,就会生成两个点的形状,这就是li的基本属性wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

  • 3

    在li前面的点还可以换成别的样式,如图,在ul后面的type样式中添加为circle空心属性后wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

  • 4

    原来的黑点,就变成了空心圆状的图形,如图wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

  • 5

    如果在后面添加的是square属性,则添加在前面的就会是几个实心块,如图wAy办公区 - 实用经验教程分享!

    wAy办公区 - 实用经验教程分享!

    wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

  • 6

    而disc就是正常时的点状,如图所示。wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

  • 7

    如果想要清除li自带的属性设置,可以对其添加list-style:none;清除样式,这样li前的属性就被清除了。wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

    HTML中无序列表ul的使用方法wAy办公区 - 实用经验教程分享!

  • 注意事项

    • 如果此经验对您有帮助,请左侧投票/关注,谢谢大家的支持^_^

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!wAy办公区 - 实用经验教程分享!


    标签:

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码