首頁技術(shù)文章正文

運(yùn)用定義列表實(shí)現(xiàn)頁面圖文混排和列表嵌套

更新時(shí)間:2022年04月18日17時(shí)28分來源:傳智教育瀏覽次數(shù):

圖文混排

在網(wǎng)頁設(shè)計(jì)中，定義列表常用于實(shí)現(xiàn)圖文混排效果，其中<dt></dt>標(biāo)記中插入圖片，<dd></dd>標(biāo)記中放入對圖片解釋說明的文字。如圖5-8所示的“講師簡介”模塊就可以通過定義列表來實(shí)現(xiàn)。

通過定義列表實(shí)現(xiàn)模塊

圖文混排結(jié)構(gòu)圖

列表嵌套

在網(wǎng)上購物商城中瀏覽商品時(shí)，經(jīng)常會(huì)看到某一類商品被分為若干小類，這些小類通常還包含若干的子類，同樣，在使用列表時(shí)，列表項(xiàng)中也有可能包含若干子列表項(xiàng)。要想在列表項(xiàng)中定義子列表項(xiàng)就需要將列表進(jìn)行嵌套，下面對列表嵌套的方法做具體演示，如【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】中，首先定義了一個(gè)包含兩個(gè)列表項(xiàng)的無序列表，然后在第一個(gè)列表項(xiàng)中嵌套一個(gè)有序列表，在第二個(gè)列表項(xiàng)中嵌套一個(gè)無序列表，方法為在<li></li>中定義有序或無序列表。
運(yùn)行【demo5-3】，效果如圖5-9所示。

無序列表