首頁技術文章正文

運用定義列表實現頁面圖文混排和列表嵌套

更新時間: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所示。

無序列表