CSS列表学习2

之前学习了列表;继续熟悉;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

    <style>
	ul.a
	{
		list-style-image:url('yuan2.png');
	}
    </style>

</head>
<body>

<ul>
  <li>AAAA</li>
  <li>BBBB</li>
  <li>CCCC</li>
</ul>

<ol>
  <li>AAAA</li>
  <li>BBBB</li>
  <li>CCCC</li>
</ol>

<ul class="a">
  <li>EEEE</li>
  <li>FFFF</li>
  <li>GGGG</li>
</ul>

</body>
</html>

ul形成无序列表;
ol形成有序列表;有序列表就是前面带有数字1、2、3的;

如果要改变列表条目之前的标记为自己的图片,使用list-style-image属性;

list-style-image属性在不同浏览器显示略有差别;

浏览器兼容性的解决方案是,
    ul设置列表类型为没有列表项标记, 即 list-style-type: none;
    ul中的所有li设置图像的url,使用background-image属性,并设置图像no-repeat;
    然后再调整边距和填充属性;

 

相关推荐

  1. Vue2学习笔记(列表渲染)

    2024-02-22 18:24:02       50 阅读
  2. 【前端学习——css篇】2.css选择器的优先级

    2024-02-22 18:24:02       47 阅读
  3. 前端学习-CSS基础-Day2

    2024-02-22 18:24:02       38 阅读
  4. CSS-2

    2024-02-22 18:24:02       46 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-22 18:24:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-22 18:24:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-22 18:24:02       82 阅读
  4. Python语言-面向对象

    2024-02-22 18:24:02       91 阅读

热门阅读

  1. 逻辑回归的输出值为什么可以作为概率?

    2024-02-22 18:24:02       57 阅读
  2. spring事务失效(疑难杂症)

    2024-02-22 18:24:02       49 阅读
  3. 计算机视觉初探--LeNet原理与实践

    2024-02-22 18:24:02       44 阅读
  4. C++(12) 模板类、模板继承(严格模式和自由模式)

    2024-02-22 18:24:02       40 阅读
  5. 企业为什么需要数字化转型?

    2024-02-22 18:24:02       48 阅读
  6. vue+element下日期组件momentjs转换赋值问题

    2024-02-22 18:24:02       44 阅读
  7. 内存泄漏与内存溢出

    2024-02-22 18:24:02       46 阅读
  8. centos安装扩展

    2024-02-22 18:24:02       38 阅读
  9. 2023年10月CCAA认证通用基础真题

    2024-02-22 18:24:02       100 阅读
  10. python中websockets与主线程传递参数

    2024-02-22 18:24:02       45 阅读