HTML基础（二）

最新推荐文章于 2025-02-22 21:25:33 发布

原创最新推荐文章于 2025-02-22 21:25:33 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

前端开发、java web、数据库专栏收录该内容

71 篇文章

订阅专栏

本文提供了HTML中有序列表(ol)、无序列表(ul)和数据列表(dl)的使用示例，展示了如何创建嵌套列表及自定义列表样式。

列表标签
有序列表 ol
无序列表 ul
数据列表 dl
范例：有序列表

<!doctype html>
<html>
<head>
<title>有序列表</title>
<meta charset="utf-8">
</head>
<body>
   <h4>实时热点</h4>
   <ol>
     <li>她花200块钱买沙发 赚了200万
      <ol>
      	<li>第二层列表1</li>
      	<li>第二层列表2</li>
      	<li>第二层列表3</li>
      </ol>
     </li>
     <li>隔着屏幕我都听到的啪嗒的响声</li>
     <li>全球最美的几棵树惊艳了千年</li>
   </ol>

</body>


</html>

在这里插入图片描述
范例：无序列表

<!doctype html>
<html>
<head>
 <title>无序列表</title>
 <meta charset="utf-8">
</head>
<body>
    <div>
      <ul>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递
               <ul>
               	<li>子项1</li>
               	<li>子项2</li>
               	<li>子项3</li>
               	<li>子项4</li>
               	<li>子项5</li>
               </ul>
         </li>
      </ul>
    </div>
</body>
</html>

在这里插入图片描述

<!doctype html>
<html>
<head>
 <title>无序列表</title>
 <meta charset="utf-8">
 <style type="text/css">
   #school>li{
   	/*去除点*/
   	list-style: none;
   	list-style-image: url(./q.png);
   	border: 1px solid red;
   	height: 30px;
   	width: 600px;
   	font-size: 18px;
   	color: #666;
   }
   #school>li:hover{
   	color: red;
   }
</style>
</head>
<body>
    <div>
      <ul id="school">
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
         <li>【录取快讯第9期】我校除西藏地区外所有通知书已全部投递</li>
      </ul>
    </div>
</body>
</html>

在这里插入图片描述
范例：数据列表

<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
	<title>数据标签</title>
	<meta charset="utf-8">
	<style type="text/css">
         /**{
         	margin: 0;
         	padding: 0
         	/*去除缩进*/
         }*/
    </style>
</head>
<body id="school">
	<h2>数据列表</h2>
   <dl>
      <dt>校内实时热点</dt>
      <dd>大鸟降落</dd>
      <dd>我爱我的祖国</dd>
      <dd>中国机长</dd>
      <dd>好好学习，天天向上</dd>

   </dl>


</body>
</html>

在这里插入图片描述