html标签(2)--有序列表与无序列表

最新推荐文章于 2022-12-08 14:32:49 发布

weixin_30652491

最新推荐文章于 2022-12-08 14:32:49 发布

阅读量137

点赞数

原文链接：http://www.cnblogs.com/atubaibai/archive/2013/03/20/2971319.html

版权

有一些内容形式，用div来实现非常麻烦，也不适合

例如一些表格形式

无序列表

ul 代表列表

li 代表列表中的项

list-style 控制列表的样式

有序列表

ol 代表列表

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=gb2312" />
<title>无标题文档</title>

<style title="text/css">

* {
   margin:0ox;
   border:0px;
   padding:0px;
}

ul {
list-style:none;
}

li {
   float:left;
   background:gray;
   padding:5px;
   margin:5px;
}

</style>

</head>

<body>
   <div>
       <ul>
           <li>梅</li>
           <li>兰</li>
           <li>竹</li>
           <li>菊</li>
       </ul> /*无序列表*/

       <ol>
           <li>刘备</li>
           <li>关羽</li>
           <li>张飞</li>
           <li>赵云</li>
       </ol> /*有序列表*/

       <p>用无序列表做导航</p>
       <div>
           <ul>
               <li><a href="#">首页</a></li>
               <li><a href="#">业务介绍</a></li>
               <li><a href="#">联系我们</a></li>
               <li><a href="#">留言</a></li>
           </ul>
       </div>


   </div>


</body>
</html>

/**
燕十八公益PHP培训
课堂地址:YY频道88354001
学习社区:www.zixue.it
**/

转载于:https://www.cnblogs.com/atubaibai/archive/2013/03/20/2971319.html

weixin_30652491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html标签(2)--有序列表与无序列表

有一些内容形式，用div来实现非常麻烦，也不适合例如一些表格形式无序列表ul 代表列表li 代表列表中的项list-style 控制列表的样式有序列表ol 代表列表li 代表列表中的项<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x...
复制链接

扫一扫