网易mumu模拟器顶部布局

网易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="data:images/bilibili_bdfb1b5.png" ><p>B站号<br>MuMu模拟器-Mu酱</p></a><a href="#"> <img src="data:images/qq_33d47ee.png" ><p>B站号<br>MuMu模拟器-Mu酱</p></a><a href="#"><img src="data:images/weibo_50e809e.png" ><p>B站号<br>MuMu模拟器-Mu酱</p></a><a href="#"><img src="data: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;
}

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

网易mumu模拟器顶部布局相关推荐

mac环境下搭建frida环境并连接网易mumu模拟器
一. frida概述 frida是基于Hook的动态分析工具.是一款基于 python+javascript 的 hook 框架,核心是用C编写的,可运行在 android.ios.linux.win ...
mumu显示连接服务器超时,网易mumu模拟器安装不了网易mumu模拟器安装好久解决方法...
网易mumu模拟器安装不了解决方法 1.错误代码 1 .2.100 解决方法:临时关闭杀毒软件和安全防护类软件(360管家等)后重装. 2.错误代码 101.108 解决方法: A. 确保当前系统账号 ...
计算机模拟需要什么配置电脑,网易MuMu模拟器对电脑配置的最低要求介绍
网易MuMu模拟器是一款由网易推出的电脑安卓模拟器 ,今天我们就来讲讲网易MuMu模拟器电脑配置要求 ,下面通过这篇文章给大家讲解一下,希望能帮助到你. MuMu模拟器最低配置一览操作系统要求 ...
android 模拟器网易,网易MuMu全游戏平台网易mumu模拟器
原标题:网易MuMu全游戏平台网易mumu模拟器网易MuMu Mac是目前最好用最流畅的手游模拟器软件,一款可以让Mac用户在电脑上轻松玩手游的安卓模拟器.网易MuMu安装后可在电脑上运行各类游戏 ...
android官方模拟器下载安装,网易MuMu模拟器
功能介绍: 一.电脑玩手游神器网易MuMu模拟器已兼容全部网易手游和市面其它99%手游,让你能畅玩<王者荣耀>.<梦幻西游手游>.<阴阳师>等多款热门游戏. 网易 ...
mumu模拟器cpu设置_网易MuMu模拟器CPU虚拟化怎么设置？
网易MuMu模拟器CPU虚拟化怎么设置?网易MuMu模拟器CPU虚拟化如何开启?今天小编就为大家带来网易MuMu模拟器CPU虚拟化设置方法,一起来看看网易MuMu模拟器CPU虚拟化怎么设置吧! 网易M ...
MAC下网易MuMu模拟器调试ReactNative
首先下载并安装好网易MuMu模拟器: https://mumu.163.com/mac/index.html 运行网易MuMu,打开后在首页打开设置->开发者选项->打开USB调试模式 ...
网易mumu模拟器去广告纯净版 v1.26.1.1
网易mumu模拟器是专门为喜欢玩手机游戏玩家们提供的一款电脑安卓模拟器,使用该模拟器用户就能在电脑上体验各种手机游戏了,同时软件虽然功能强大,但是使用简单且操作流畅,并通过它不仅可以完美兼容市面上90 ...
mumu模拟器崩坏3分辨率_网易mumu模拟器设置崩坏3不卡的方法
亲们或许不知道网易mumu模拟器设置崩坏3不卡的方法,那么今天绿软吧就讲解网易mumu模拟器设置崩坏3不卡的操作步骤哦,希望能够帮助到大家. 网易mumu模拟器设置崩坏3不卡的方法 1.分辨率可选择满 ...

网易mumu模拟器顶部布局

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

网易mumu模拟器顶部布局相关推荐

最新文章

热门文章