0
点赞
收藏
分享

微信扫一扫

通讯:单片机串口和电脑通讯

田妞的读书笔记 2024-06-27 阅读 8
htmlcsscss3

效果图:

二级导航:

源码:


<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
		<link rel="stylesheet" href="./css/000.css" /><!-- 初始化样式 -->
		<title>博物馆</title>
		<style>
			*{
				transition: all 0.5s;
			}
			header {
background-color: rgb(157, 58, 32);
			}
			body{
				background-color: #6778811;
			}
			#nav {
				display: flex;
				/*横向排布*/
				justify-content: space-between;
				list-style-type: none;
			}

			#nav li {
				flex: 1;
				box-sizing: border-box;
				height: 60px;
				line-height: 60px;
				position: relative;
				/* border: 2px solid #000; */
				/* width: 320px; */
				text-align: center;
				position: relative;
			}

			#nav li:hover {
				transition: all 0.35s;
				
				background-color: rgb(177, 58, 32);
			}

			#nav li a {
				text-decoration: none;
				color: #fff;
			}

			.wrap {
				width: 1280px;

				margin: 0 auto;
			}

			#nav li .seclist {
			width: 100%;
				position: absolute;
				top: 60px;
				left: 0;
				background-color: brown;
				opacity: 0;
			
				overflow: hidden;
				/* 其他样式保持不变 */
				transition: opacity  1s;
				/* 添加过渡效果 */

			}

			#nav li:hover .seclist {
				/* display: block; */
				/* 				animation: navlist 1s; */
				opacity: 1;
			

			}

			#nav li .seclist :hover {
				background-color: aqua;
			}

			#nav li .seclist :hover a {
				color: orange;

			}

		

			.banner {
				height: 100%;
			}

			@keyframes navlist {
				from {
					display: none;
				}

				to {
					display: block;
				}
			}

			#main .wrap img {
				height: 100%;
				width: auto;
			}


			.left,
			.banner {
				margin: 50px auto;
				float: left;
			}

			#main .left {
				width: 200px;
				height: 100%;
				background-color: antiquewhite;
			}

			#main .wrap {
				height: 700px;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="wrap">
				<ul id="nav">
					<li><a href="./index.html">首页</a></li>
					<li>
						<a href="./index.html">
							博物馆历史
							<ul class="seclist">
								<li><a href="./index.html">明清时期</a></li>
								<li><a href="./index.html">民国时期</a></li>
							</ul>
						</a>
					</li>
					<li>
						<a href="./index.html">
							展览品概览
							<ul class="seclist">
								<li><a href="./index.html">青铜器</a></li>
								<li><a href="./index.html">农具</a></li>
							</ul>
						</a>
					</li>
					<li>
						<a href="./index.html">
							线上订票
							<ul class="seclist">
								<li><a href="./index.html">A区</a></li>
								<li><a href="./index.html">B区</a></li>
							</ul>
						</a>
					</li>
				</ul>
			</div>
		</header>
		<div id="main">
			<div class="wrap">
				<div class="left"></div>

				<div class="banner">
					<img src="https://fd.co188.com/group2/M01/3B/A8/rBJhbGXwYDWAUUqDAAHZTr0PwYY72.jpeg" alt="" />
				</div>
			</div>
		</div>
	</body>
</html>
举报

相关推荐

0 条评论