首页技术文章正文

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

更新时间: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所示。

无序列表