1：有序列表、无序列表与定义列表

 

<!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>
   <h3>无序列表</h3>
   <ul>
      <li>奔驰</li>
      <li>通用</li> 
      <li>丰田</li>       
   </ul>
   <h3>有序列表:NBA得分榜</h3>
   <ol>
      <li>贾巴尔</li>
      <li>卡尔-马龙</li>
      <li>迈克尔-乔丹</li>
   </ol>
   <h3>定义列表:Web相关术语</h3>
   <dl>
      <dt>CSS</dt>
      <dd>Cascading Style Sheet:层叠样式表</dd>
      
      <dt>HTML</dt>
      <dd>Hypertext Markup Language:超文本标记语言</dd>
      
   </dl>
</body>
</html>

效果图：

 

 2：更改布局

    更改每个li元素的float为left，li元素向左浮动，换行被取消，li元素依旧保持块级元素的特性，但是浮动控制起来比较复杂，有时元素嵌套过多会产生新的问题

 

<!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>
<style type="text/css">
   ul {
      margin: 0;
      padding: 0;
      list-style: none;
   }
   
   ul li {
      display: inline;
   }
</style>
</head>

<body>
   <ul>
     <li>首页</li>
     <li>新闻</li>
     <li>产品</li>
     <li>论坛</li>
   </ul>
</body>
</html>

效果图：