初学HTML5——手风琴样式

最新推荐文章于 2024-03-30 08:58:24 发布

原创

最新推荐文章于 2024-03-30 08:58:24 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#手风琴样式

本文介绍了如何使用HTML5创建手风琴样式的效果，展示了最终的视觉呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			width: 800px;
			height: 400px;
			background: yellow;
			margin: 0 auto;

		}
		li{
			float: left;
			list-style: none;
			width: 200px;
			height: 400px;
			overflow: hidden;
		}
		.spring{
			background: green;
		}
		.summer{
			background: red;
		}
		.autumn{
			background: black;
		}
		.winter{
			background: blue;
		}
		p{
			color: white;
			text-align: center;
			text-indent: 2em;
			line-height: 2;
		}
		h3{
			color: white;
			text-align: center;
			line-height: 50px;
		}
		ul:hover li{
			width: 50px;
		}
		ul:hover li:hover{
			width: 650px;
		}

		ul:hover p{
			display: none;
		}
		ul:hover h3{
			display: none;
		}
		ul:hover li:hover p{
			display: block;
		}
		ul:hover li:hover h3{
			display: block;
		}


	</style>
</head>
<