html学习（二）--列表-优快云博客

本文通过一个关于普通话考试通知的实例，详细展示了如何使用HTML进行列表的嵌套，包括无序列表和有序列表的混合使用，以及如何设置列表样式。

html学习（二）--列表

- - 实现效果![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fa8136a9b7e465961215516903c8cee3.jpeg)
  - 源代码

实现效果

源代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>列表嵌套</title>
</head>
<style>
  h2{
    text-align: center;
  }
  #order{
    list-style-type:decimal;
  }
  span{
    font-weight: bold;
  }
  #singUp{
    list-style-type: upper-alpha;
  }
  #care{
    list-style-type: lower-alpha;
  }
</style>
<body>
   <h2>普通话考试通知</h2>
   <p>我院今年3月份的普通话水平测试开始接受报名，具体事项通知如下：</p>
   <ol id="order">
      <li ><span>报名</span>
        <ol id="singUp">
          <li>报名时间：3月16—21 日，逾期不予受理。</li>
          <li>报名地点：所在院系办公室。</li>
          <li>报名费用：按物价局规定85元/人/次（含培训费用），报名时交齐。</li>
          <li>
              提交资料及注意事项：
            <ol id="care">
              <li>参加测试的学生须填写《普通话水平测试报名表》一份（准考证号码不用填写）；</li>
              <li>填写准考证一份（编号不用填写），所填姓名和出生年月等须与身份证一致；</li>
              <li>提交小一寸彩色证件照3张（照片不能是打印版、不能是生活照， 3张照片必须统一底片），其中两张照片贴在报名表和准考证上，另一张用钢笔在背面写上校名、系别和姓名，与表格一起上交。</li>
            </ol >
          </li>
        </ol>
      </li>
      <li  class="orderli"><span>培训</span></li>
      <li  class="orderli"><span>测试</span></li>
   </ol>
</body>
</html>