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>

页面结果:

相关推荐
CherishTaoTao7 分钟前
Vue3 keep-alive核心源码的解析
前端·vue3
关爱的眼神63724 分钟前
html练习2
前端·css·html
laocooon52385788636 分钟前
代码之玫瑰。C++
前端·算法
小牛itbull1 小时前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
GDAL1 小时前
npm入门教程13:npm workspace功能
前端·npm·node.js
荆州克莱2 小时前
VUE2升级成VUE3的优化与区别
spring boot·spring·spring cloud·css3·技术
呼叫69452 小时前
为什么说vue是双向数据流
前端·javascript·vue.js
我命由我123452 小时前
CesiumJS 案例 P20:监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
开发语言·前端·javascript·前端框架·html·css3·html5
wumu_Love2 小时前
npm 和 node 总结
前端·npm·node.js
顾辰呀2 小时前
css 文字一行没有放满不进行换行
前端·javascript·css·vue.js·css3