CSS列表的相关知识

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>

效果图:

CSS列表的相关知识_第1张图片


 

 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>


效果图:

 

你可能感兴趣的:(html,XHTML,css,测试,语言,float)