Web前端第二次作业

作业要求:制作带有下拉悬停菜单的导航栏

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height: 1000px;
			}
			*{
				margin: 0;
				padding: 0;
			}
			#menu{
				background-color: #0c2374;
				width: 100%;
				height: 50px;
			}
			#container{
				background-color: #0c2374;
				width: 100%;
				height: 50px;
				
			}
			.item{
				/* 浮动属性可以让块标签,处在同一行 */
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				position: relative;
				color: white;
			}
			.item:hover{
				background-color: steelblue;
			}
			#container{
				width: 800px;
				margin: auto;
			}
			.down_meun>div{
				color: white;
				
			}
			.down_meun{
				background-color: steelblue;
				display: none;
				position: absolute;
				
			}
			.item:hover>.down_meun{
				display: block;
				width: 100px;
			}
			
			#ding{
				width: 90px;
				height: 50px;
				border: 2px solid #0c2374;
				text-align: center;
				line-height: 50px;
				position: fixed;
				right: 0px;
				bottom: 0px;
				color: steelblue;
				
				
				border-radius: 30px;
				font-size: 1.25rem;
				line-height: 50px;
				text-align: center;
				color: #64c09B;
				font-weight: bolder;
			}
			#ding:hover{
				background-color: #64c09B;
				color: aliceblue;
				text-shadow: 7px 4px 2px seagreen;
				box-shadow: 5px 5px 1px green;
				transition: 2s;
			}
			
		</style>
	</head>
	<body>
			<div id="menu">
				<div id="container">
					<div class="item">游戏1
						<div class="down_meun">
							<div>游戏下载</div>
							<div>游戏交易</div>
							<div>游戏外挂</div>
							<div>游戏攻略</div>	
						</div>
						
					</div>
					<div class="item">游戏2
						<div class="down_meun">
							<div>游戏mod1</div>
							<div>游戏mod2</div>
							<div>游戏mod3</div>
							<div>游戏mod4</div>
							
						</div>
					</div>
					
					<div class="item">游戏3</div>
					<div class="item">游戏4
						<div class="down_meun">
							<div>商学院</div>
							<div>土木与工程</div>
							<div>艺术与传媒</div>
							<div>信息工程学院</div>
							<div>文理学院</div>
							<div>大数据与人工智能</div>
							<div>马克思主义</div>
							
							
						</div>
					</div>
					<div class="item">游戏5</div>
					<div class="item">游戏6</div>
					<div class="item">游戏7</div>
					<div class="item">游戏8</div>
				</div>
			<div id="ding">
				<a href="#menu" >
					回到顶部
				</a>
			</div>
			
		</body>
	</html>

页面结果:

相关推荐
活宝小娜6 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点8 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow9 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o11 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder3 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727573 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter