网易mumu模拟器顶部布局

3 篇文章 0 订阅

网易mumu模拟器顶部布局实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mumu模拟器</title>
		<link rel="stylesheet" type="text/css" href="css/unset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!--用一个大的容器来包裹整个页面-->
		<div class="container">
			<!--1200*38-->
			<div class="nav-box">
				<div class="logo"><a href="#"></a></div>
				<nav>
					<ul class="clearfix">
						<li><a href="#">首页</a></li>
						<li><a href="#">新闻活动</a></li>
						<li><a href="#">常见问题</a></li>
						<li><a href="#">商务合作</a></li>
						<li><a href="#">玩红部落</a></li>
						<li>
							<div class="hover_box">
								关注我们
								<div class="public_box">
									<a href="#">
										<img src="images/bilibili_bdfb1b5.png" >
										<p>B站号<br>MuMu模拟器-Mu酱</p>
									</a>
									<a href="#"> 
										<img src="images/qq_33d47ee.png" >
										<p>B站号<br>MuMu模拟器-Mu酱</p>
									</a>
									<a href="#">
										<img src="images/weibo_50e809e.png" >
										<p>B站号<br>MuMu模拟器-Mu酱</p>
									</a>
									<a href="#">
										<img src="images/qrcode_06eb552.png" >
										<p>B站号<br>MuMu模拟器-Mu酱</p>
									</a>
								</div>
							</div>
						</li>
						<li><a href="#">开发者需知</a></li>
						<li><a href="#">论坛</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</body>
</html>

导入常规unset.css方法

html{
	font: normal normal 16px "微软雅黑";
}
*{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;/*取出列表的项目符号*/
}

a{
	text-decoration: none;
	color: #2A1D11;
}
ul li{
	float: left;
}

.clearfix::after{
	content: '';
	display: block;
	clear: both;
}
img{
	width: 100%;
}

导入index.css方法

.container .nav-box{
	width: 1200px;
	margin: 0 auto;
	padding-top: 42px;
	display: flex;
	justify-content: space-between;
}
.nav-box .logo{
	display: block;
	width: 149px;
	height: 28px;
	background: url(../images/logo_25ac37c.png) no-repeat;
}
.nav-box nav ul li a,.hover_box{
	cursor: pointer;/*鼠标悬浮后的指针是手型*/
	display: block;
	line-height: 38px;
	padding: 0 16px;
	margin: 0 10px;
	border-radius: 19px;
	color: #2A1D11;
	transition: all 0.5s ease;
	/*设置相对定位*/
	position: relative;
}
.nav-box nav ul li>a:hover,.hover_box:hover{
	color: #ffc49a;
	background-color: #FFF;
	box-shadow: 0 8px 20px rgb(255 179 108 / 30%)
}
.hover_box:hover .public_box{
	display: flex;
	justify-content: space-between;
}
.public_box{
	width: 656px;
	height: 220px;
	padding-top: 30px;
	background: url(../images/public_bg_4f1f214.png) no-repeat;
	position: absolute;
	left: -355px;
	top: 36px;
	display: none; /*在页面中隐藏*/
}
.public_box a {
	display: block;
	width: 153px;
	text-align: center;
}
.public_box a img{
	width: 107px;
}
.public_box p{
	font-size: 14px;
	height: 44px;
	line-height: 20px;
}

最终实现效果当鼠标放在关注我们上的时候出现多个图片和超连接,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值