初识HTML元素——列表

初识HTML元素——列表

1.有序列表

<!-- 1.有序列表  很少用，可以使用ul+css代替-->
<h3>东京奥运会奖牌榜</h3>
<ol>
  <li>美国：113</li>
  <li>中国：88</li>
  <li>日本：58</li>
</ol>

2.无序列表

<!-- 2.无序列表 -->
<h3>购物车</h3>
<ul>
  <li>手机</li>
  <li>U盘</li>
  <li>笔记本电脑</li>
</ul>

导航

<!-- 导航    -->
<!-- ul+li+a  -->
<ul class="menu" style="display: flex; place-content: space-around">
  <li class="item"><a href="">首页</a></li>
  <li class="item"><a href="">视频</a></li>
  <li class="item"><a href="">问答</a></li>
  <li class="item"><a href="">资源</a></li>
  <li class="item"><a href="">关于</a></li>
</ul>
<!-- nav+a  -->
<nav class="menu" style="display: flex; place-content: space-around">
  <a href="">首页</a>
  <a href="">视频</a>
  <a href="">问答</a>
  <a href="">资源</a>
  <a href="">关于</a>
</nav>

图像列表

<h2>动物世界</h2>
<ul class="box">
  <li class="course">
    <!-- 可点击图片链接 -->
    <a href=""><img src="img/dog.png" alt="" /></a>
    <!-- 文字链接 -->
    <a href="">小狗</a>
  </li>
  <li class="course">
    <!-- 可点击图片链接 -->
    <a href=""><img src="img/dark.png" alt="" /></a>
    <!-- 文字链接 -->
    <a href="">鸭子</a>
  </li>
</ul>

• CSS

<style>
  .box {
    display: inline-flex;
    background-color: lightcyan;
    box-shadow: 0 0 8px #888;
  }
  .box .course {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }
  .box .course a {
    text-decoration: none;
    color: #666;
    transition: 0.5s;
  }
  .box .course a:hover {
    color: coral;
  }
  .box img {
    opacity: 0.8;
  }
  .box img:hover {
    opacity: 1;
    border-radius: 1em;
    transition: 0.5s;
  }
</style>

3.自定义列表

<!-- 3.自定义列表 -->
<dl style="display: grid; grid-template-columns: 3em 16em">
  <dt>地址：</dt>
  <dd>山东省青岛市黄岛区</dd>
  <dt>邮编：</dt>
  <dd>266555</dd>
</dl>