基本页面布局（一级和二级导航栏）

最新推荐文章于 2023-07-18 01:12:41 发布

OUC_lkc

最新推荐文章于 2023-07-18 01:12:41 发布

阅读量7.4k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/daoshen1314/article/details/102796092

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			
		    #header{height: 112px;background-color: gray;}
			header{height:80px;background-color: rgba(255,0,0,0.5);}
			header h2{text-align: center; line-height: 80px;}
			/* 一级导航栏 */
			#nav{text-align: center;}
			#nav li{display: inline-block; position: relative; width: 120px; text-align: center;line-height: 32px; font-size: 1.2em;}
			#nav li:hover{color:white;background-color:black;}
			/* 二级导航栏 */
			#example,#doc{display:none; position: absolute; background-color: red;}
			#nav li:hover ul{display: block; z-index: 1; color:back}
			
			#mainframe{width: 100%; height: 500px;border: none;}
			#footer{background-color:blue; text-align: center;}
		</style> 
	</head>
	<body>
		<div id="header">
			<header><h2>学习网站</h2></header>
			<nav>
				<ul id="nav">
					<a href=""><li>课程内容</li></a>
					<a href=""><li>实验手册</li></a>
					<li>HTML文档
					    <ul id="doc"><li>文档1</li><li>文档2</li><li>文档3</li></ul>
					</li>
				    <li>课程表</li>
					<li>精彩实例
						<ul id="example"><li>实例1</li><li>实例2</li><li>实例3</li></ul>
					</li>
				</ul>
			</nav>
		</div>
		<div id="middle" style="background-color: #CCC;">
			<iframe name="mainframe" id="mainframe" src=""></iframe>
		</div>
		<div id="footer">
			版权所有
		</div>
	</body>
</html>

显示效果：

OUC_lkc

关注

1
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
0
评论
基本页面布局（一级和二级导航栏）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{margin: 0; padding: 0;} #header{height: ...
复制链接

扫一扫