网易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;
}
最终实现效果当鼠标放在关注我们上的时候出现多个图片和超连接,