八,列表的样式

列表的样式:

  1. list-style-type:设置列表项目的外观,属性值:none,disc,circle,square(无序列表)decimal等(有序列表,见截图)
  2. list-style-position:列表符号的位置,属性值:inside(靠正文比较近,就是靠右),outside(靠正文比较远,就是靠左)
  3. list-style-image:把图像设置为列表项目的标记。属性值:url,none(设置了这个属性以后第一个属性将不再生效)
  4. list-style:简写属性,涵盖以上三个列表样式属性(如果第三个属性设置了,第一个属性就不再生效)

在这里插入图片描述

总结:
列表使用频率很高,经常用于菜单,规律性展示等应用场景

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
ul{
/* list-style-type: circle;
list-style-position: inside;
list-style-image: url("image/3.jpg");*/
list-style: circle url("image/3.jpg")
}
ol{
list-style-type: lower-alpha;
list-style-position: inside;
/*list-style-image: url("image/3.jpg");*/
}
</style>
</head>

<body>
    <ul>
     <li>aaa</li>
     <li>bbb</li>
     <li>ccc</li>
     <li>ddd</li>
     <li>eee</li>
    </ul>
    <ol>
     <li>aaa</li>
     <li>bbb</li>
     <li>ccc</li>
     <li>ddd</li>
     <li>eee</li>
    </ol>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的HTML列表定时滚动的例子: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表定时滚动例子</title> <style> ul { list-style: none; padding: 0; margin: 0; height: 100px; overflow: hidden; background-color: #f2f2f2; } li { padding: 10px; border-bottom: 1px solid #ccc; } </style> </head> <body> <ul id="myList"> <li>第一条消息</li> <li>第二条消息</li> <li>第三条消息</li> <li>第四条消息</li> <li>第五条消息</li> <li>第六条消息</li> <li>第七条消息</li> <li>第条消息</li> <li>第九条消息</li> <li>第十条消息</li> </ul> <script> var index = 0; var list = document.getElementById("myList"); var items = list.getElementsByTagName("li"); var timer = setInterval(function() { items[index].style.display = "none"; index++; if (index == items.length) { index = 0; } items[index].style.display = "block"; }, 2000); </script> </body> </html> ``` 这个例子包含一个`<ul>`列表和一些`<li>`列表项。我们首先对`<ul>`应用了一些CSS样式,使其具有固定高度和隐藏溢出内容的属性。然后,我们使用JavaScript定时器来逐个显示列表项,并将前一个列表项隐藏。在这个例子中,我们将定时器设置为每隔2秒钟执行一次。 请注意,我们在JavaScript代码中使用了`setInterval()`函数来创建一个定时器,并将其赋值给变量`timer`。我们还使用`getElementById()`和`getElementsByTagName()`函数来获取列表列表项的引用,以便我们可以操作它们的样式。 这个例子只是一个简单的示例,你可以根据实际需要进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值