利用CSS制作北大官网导航栏

 

详细代码如下: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
			margin: 0;
			padding: 0;
		
			}
			#menu{
			background-color: darkred;
				width: 100%;
				height: 50px;
				
			}
			.item{
				
				/* 浮动属性可以让块标签,处于同一行 */
				float:left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				/* border: 1px solid red; */
			    text-align: center;
				color:white;
				position: relative;
			}
			.item:hover{
				background-color: red;
				
			}
			#container{
				width:720px;
				margin: auto;
			}
			.down_menu>div{
				color:black;
			}
			.down_menu{
				background-color: #cccccc;
				position: absolute;
				display: none;
				
			}
			.item:hover>.down_menu{
				display: block;
				width:100px;
				/* left:100px; */
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="container">
			<div class="item">北大概况
			    <div class="down_menu">
					<div>北大简介</div>
					<div>组织机构</div>
					<div>现任领导</div>
					<div>历任领导</div>
					<div>历史名人</div>
					<div>信息公开</div>
					<div>标识系统</div>
				</div>
			</div>
			<div class="item">招生
			<div class="down_menu">
				<div>本科生</div>
				<div>研究生</div>
				<div>留学生</div>
				<div>继续教育</div>
				<div>学生奖助信息</div>
				<div>暑期学校</div>
			</div>
			</div>
			<div class="item">学院与院系
			<div class="down_menu">
				<div>理学部</div>
				<div>信息与工程科学部</div>
				<div>人文学部</div>
				<div>社会科学学部</div>
				<div>经济与管理学部</div>
				<div>医学部</div>
				<div>跨学科类</div>
				<div>深圳研究生院</div>
			</div>
			</div>
            <div class="item">教育教学
			<div class="down_menu">
				<div>师资队伍</div>
				<div>部门管理</div>
				<div>课程设置</div>
				<div>海外学习</div>
				<div>课表查询</div>
				<div>华文慕课</div>
				<div>教学网</div>
				<div>证书验证</div>
				<div>燕云直播</div>
			</div>
			</div>	
			<div class="item">科学研究
			<div class="down_menu">
				<div>科研成果</div>
				<div>研究机构</div>
				<div>学术期刊</div>
				<div>游管理部门</div>
			</div>
			</div>	
			<div class="item">交流合作
			<div class="down_menu">
				<div>国际交流</div>
				<div>国内合作</div>
				<div>教育基金会</div>
				<div>港澳台交流</div>
				<div>北京论坛</div>
				<div>孔子学院</div>
			</div>
			</div>	
			<div class="item">校园生活
			<div class="down_menu">
				<div>菁菁校园</div>
				<div>讲座演出</div>
				<div>艺术生活</div>
				<div>体育健康</div>
				<div>社团活动</div>
				<div>档案馆藏</div>
				<div>管理服务</div>
				<div>校历</div>
			</div>
			</div>
		</div>
	</body>
</html>

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部