Day02-3 常用标签04 列表

最新推荐文章于 2024-06-14 11:39:10 发布

吃蜡笔的小新

最新推荐文章于 2024-06-14 11:39:10 发布

阅读量55

点赞数

分类专栏： Javaweb 文章标签： html5

本文链接：https://blog.csdn.net/Ningmengyouzhi/article/details/127744672

版权

Javaweb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

有序列表

 <!-- 有序列表通过 type属性进⾏ 列表序号的设置 有 1，a,A ,i,I -->
 <!-- 通过 start属性 来确定起始序号是什么数字 -->
 <!-- reversed是⼀个布尔型属性 控制列表的倒序输出 当起始序号小于子项的数目时，无论序号是什么
类型一旦小于零时序号将以数字的形式输出-->
 <ol type="1" start="1" reversed = "reversed">
 <li>我是 个⼦项1</li>
 <li>我是⼀个⼦项2</li>
 <li>我是⼀个⼦项3</li>
 <li>我是⼀个⼦项4</li>
 <li>我是⼀个⼦项5</li>
 <li>我是⼀个⼦项6</li>
 <li>我是⼀个⼦项7</li>
 <li>我是⼀个⼦项8</li>
 <li>我是⼀个⼦项9</li>
 </ol>

 <ol type="a" reversed = "reversed">
 <li>我是 个⼦项1</li>
 <li>我是⼀个⼦项2</li>
 <li>我是⼀个⼦项3</li>
 <li>我是⼀个⼦项4</li>
 <li>我是⼀个⼦项5</li>
 <li>我是⼀个⼦项6</li>
 <li>我是⼀个⼦项7</li>
 <li>我是⼀个⼦项8</li>
 <li>我是⼀个⼦项9</li>
 </ol>

在这里插入图片描述

无序列表

 <h1>⽆序列表</h1>
 <!-- type⽤来控制序号形式，circle表示空⼼圆 disc表示实⼼圆 square表示⽅块 默认是disc-->
 <ul type="square">
 <li>这是⼀个⼦项&</li>
 <li>这是⼀个⼦项&</li>
 <li>这是⼀个⼦项&</li>
 <li>这是⼀个⼦项&</li>
 <li>这是⼀个⼦项&</li>
 <li>这是⼀个⼦项&</li>
 <li>这是⼀个⼦项&</li>
 <li>这是⼀个⼦项&</li>
 <li>这是⼀个⼦项&</li>
 </ul>

在这里插入图片描述

数据列表

 <!-- 数据列表允许多个⼩标题的出现，并且跟ol和ul⼀样可以通过css来改写样式 -->
 <h1>数据列表</h1>
 <dl>
	 <dt>百度热搜</dt>
		 <dd>这是⼀个数据列表的⼦项</dd>
		 <dd>这是⼀个数据列表的⼦项</dd>
		 <dd>这是⼀个数据列表的⼦项</dd>
		 <dd>这是⼀个数据列表的⼦项</dd>
	 <dt>google热搜</dt>
		  <dd>这是⼀个数据列表的⼦项</dd>
		  <dd>这是⼀个数据列表的⼦项</dd>
		  <dd>这是⼀个数据列表的⼦项</dd>
		  <dd>这是⼀个数据列表的⼦项</dd>
	  <dt>微博热搜</dt>
		  <dd>这是⼀个数据列表的⼦项</dd>
		  <dd>这是⼀个数据列表的⼦项</dd>
		  <dd>这是⼀个数据列表的⼦项</dd>
		  <dd>这是⼀个数据列表的⼦项</dd>
  </dl>

在这里插入图片描述

作业(涉及鼠标样式、悬浮变大、块级标签该行级标签)

<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
	 *{
		 margin: 0;
		 padding: 0;
	 }
	 .navigation li{
		 list-style: none;
		 display: inline-block;
		 margin-right: 50px;
	 }
	 div{
		 width: 280px; 
		 height: 350px; 
		 text-align: center;
		 padding-top: 20px;
	 }
	 dl dd{
		 display: inline-block;
	 }
	 dl dd div:hover {
	 		 transform: scale(1.1);  
         	/*
         	用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表示缩放倍数；
			1. 一个参数时：表示水平和垂直同时缩放该倍率
			2. 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
             悬浮变成原来的1.1倍
             */
			 cursor: pointer;   /*鼠标停放时样式*/
			 color: red;
	 }
	 ul li:hover {
	 		color: red;
			cursor: pointer;
	 }
 </style>
 </head>
 <body>
	<h1>热门电影板块</h1>
	<hr>
	<ul class='navigation'>
		<li><b>最近热门电影</b></li>
		<li>热门</li>
		<li>最新</li>
		<li>豆瓣高分</li>
		<li>冷门佳片</li>
		<li>华语</li>
		<li>欧美</li>
		<li>韩国</li>
		<li>日本</li>
		<li style="margin-left: 100px;">更多>></li>
	</ul>
 <dl>
		  <dd>
			  <div>
				  <img src="1.png" title="独行月球" height="300px" width="auto">
				  <br>
				  <span>独行月球</span>
			  </div>
		  </dd>
		  <dd>
			  <div>
				  <img src="2.png" title="天才不能承受之重" height="300px" width="auto">
				  <br>
				  <span>独行月球</span>
			  </div>
		  </dd>
		  <dd>
			  <div>
				  <img src="3.png" title="乌龙院" height="300px" width="auto">
				  <br>
				  <span>独行月球</span>
			  </div>
		  </dd>
		  <dd>
			  <div>
				  <img src="4.png" title="怪物岛" height="300px" width="auto">
				  <br>
				  <span>独行月球</span>
			  </div>
		  </dd>
		  <dd>
		  			  <div>
		  				  <img src="1.png" title="独行月球" height="300px" width="auto">
		  				  <br>
		  				  <span>独行月球</span>
		  			  </div>
		  </dd>
		  <dd>
		  			  <div>
		  				  <img src="2.png" title="天才不能承受之重" height="300px" width="auto">
		  				  <br>
		  				  <span>独行月球</span>
		  			  </div>
		  </dd>
		  <dd>
		  			  <div>
		  				  <img src="3.png" title="乌龙院" height="300px" width="auto">
		  				  <br>
		  				  <span>独行月球</span>
		  			  </div>
		  </dd>
		  <dd>
		  			  <div>
		  				  <img src="4.png" title="怪物岛" height="300px" width="auto">
		  				  <br>
		  				  <span>独行月球</span>
		  			  </div>
		  </dd>
		  
  </dl>
 </body>
</html>