乐鱼电竞

    • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    运用定义列表实现页面图文混排和列表嵌套

    更新时间:2022年04月18日17时28分 来源:乐鱼电竞 浏览次数:

    图文混排

    在网页设计中，定义列表常用于实现图文混排效果，其中<dt></dt>标记中插入图片，<dd></dd>标记中放入对图片解释说明的文字。如图5-8所示的“讲师简介”�？榫涂梢酝üㄒ辶斜砝词迪�。

    通过定义列表实现�？�

    图文混排结构图

    列表嵌套

    在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项。要想在列表项中定义子列表项就需要将列表进行嵌套，下面对列表嵌套的方法做具体演示，如【demo5-3】所示。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表嵌套</title>
</head>
<body>
<h2>饮品</h2>
<ul>
   <li>咖啡
       <ol>           <!--有序列表的嵌套-->
          <li>拿铁</li>
          <li>摩卡</li>
       </ol>
   </li>
   <li>茶
      <ul>             <!--有序列表的嵌套--> 
         <li>碧螺春</li>
         <li>龙井</li>
      </ul>
   </li>
</ul>
</body>
</html>

    在【demo5-3】中，首先定义了一个包含两个列表项的无序列表，然后在第一个列表项中嵌套一个有序列表，在第二个列表项中嵌套一个无序列表，方法为在<li></li>中定义有序或无序列表。
    运行【demo5-3】，效果如图5-9所示。

    无序列表

    列表嵌套效果展示

    在图5-9中，咖啡和茶两种饮品又进行了第二次分类，“咖啡”分类为“拿铁”和“摩卡”，“茶”分类为“龙井”和“碧螺春”。



    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】