效果如下：
整体效果：
body部分动图：
导航栏二级菜单跳转：
代码部分：
首页HTML代码：
<!DOCTTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>爱吃香蕉的小黄人</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
<link rel="stylesheet" type="text/css" href="web2顶部导航栏.css">
<link rel="stylesheet" type="text/css" href="web2body.css">
</head>
<body>
<div class="container">
<div class="menu-bar">
<div class="logo"><h1>Millions</h1></div>
<ul class="ullist">
<li class="libt"><a href="#">探寻<i class="fas fa-caret-down"></i></a>
<div class="dropdown-menu">
<ul>
<li class="down"><a href="web3.html" target="_blank">小黄人</a></li>
<li class="down"><a href="#">香蕉派</a></li>
<li class="down"><a href="#">苹果派 </a> </li>
</ul>
</div>
</li>
<li class="libt"><a href="#">商城<i class="fa fa-solid fa-gift"></i></a></li>
<li class="libt"><a href="#">影视<i class="fa fa-video"></i></a></li>
<li class="libt"><a href="#">数码<i class="fa fa-camera-retro"></i></a></li>
</ul>
<ul class="righ">
<li class="libt"><a href="#" >用户<i class="fa fa-user"></i></a></li>
<li class="libt"><a href="#" >消息<i class="fa fa-bell"><span class="message">8</span></i></a>
<div class="dropdown-menu2">
<div class="item">
<div class="photo1"><img src="头像2.jpg" ></div>
<div class="content-box">
<div class="content">
<div class="name">艾格尼斯</div>
<div class="text">我的独角兽呢？</div>
</div>
<div class="action">
<div class="time">21:23</div>
<div class="unread"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo1"><img src="头像1.jpg" ></div>
<div class="content-box">
<div class="content">
<div class="name">鲍勃</div>
<div class="text">今天你吃香蕉了吗</div>
</div>
<div class="action">
<div class="time">17:16</div>
<div class="unread"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo1"><img src="格鲁1.jpg" ></div>
<div class="content-box">
<div class="content">
<div class="name">格鲁</div>
<div class="text">我的冰冻枪呢？</div>
</div>
<div class="action">
<div class="time">8:56</div>
<div class="unread"></div>
</div>
</div>
</div>
<div class="view">view all</div>
</div>
</li>
<li class="libt"><a href="#" >邮箱<i class="fa fa-envelope"></i></a></li>
</ul>
</div>
<div class="row">
<div class="col">
<h1>Despicable Me</h1>
<p>The cute villain Gru is willing to change his mind and he becomes the at-home dad for the three little girls.
He cares a lot about the girls' education things. It seems that this thief begins to like the comfortable and warm family life, however, it is not too easy for him to retire.
Gru meets the president of the union Mr Silas Pigu. The union gives Gru who used to be a villain a mission to attack some villains.
Let's see how the at-home dad level villain becomes a spy hero to save the world. </p>
<button type="button">Explore</button>
</div>
<div class="col">
<div class="card1 card"></div>
<div class="card2 card"></div>
<div class="card3 card"></div>
<div class="card4 card"></div>
</div>
</div>
</div>
</body>
</html>顶部导航栏css代码：
/* 通用选择器 */
* {
/* 去掉导航栏周围没用的边距 */
margin: 0;
padding: 0;
/* 去掉不必要的样式 */
text-decoration: none;
list-style: none;/* 去掉a元素前面的小点点 */
box-sizing: border-box;/* 标准盒子 */
}
.menu-bar{
/* 设置长条导航栏 */
height: 60px;
width: 100%;
}
.logo{
float: left;
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
position: relative;
top: 5px;
left: 5px;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: white;
}
.libt{
float: left;
width: 80px;
height: 40px;
text-align: center;
line-height: 60px;
}
/* 设置超链接样式 */
.libt a{
color: rgba(255, 255, 255, 0.5);
display: block;/* 块状点击 */
}
.libt a:hover{
color:white ;
font-size: 19px;
transition: 0.5s;
}
/* 二级菜单栏设置 */
.dropdown-menu{
width: 100px;
background-color: white ;
/* 隐藏下拉菜单栏 */
display: none;/* 不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到 */
border-radius: 5px;
position: relative;
top: -10px;
left: 6px;
}
.down a{
color: rgba(0, 0, 0, 0.7);
}
.down a:hover{
color:black ;
font-size: 19px;
transition: 0.5s;
}
/* 这里设置显示下拉菜单栏 */
.libt:hover .dropdown-menu {
display: block;
}
/* transition: 0.3s; */
/* border-radius: 15px; */
.righ{
float: right;
margin-right: 10px;
}
.message{
width: 15px;
height: 15px;
display: block;/* 将行内元素变为块级元素 */
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 15px;
color: white;
position: relative;
font-size: small;
float: right;
right: 5px;
bottom: 8px;
}
/* 消息编辑栏 */
.dropdown-menu2{
width: 230px;
height: 300px;
background:white;
border-radius: 5px;
position: relative;
right: 100px;
top: -10px;
display: none;
/* 使得信息列表位于最高层 */
z-index:9999;
}
.libt:hover .dropdown-menu2{
display: block;
}
.item{
/* 弹性盒布局 */
height:80px;
display: flex;
justify-content: space-between; /* 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 */
align-items: center; /* 居中排列 */
padding:5px 10px;
position: relative;
top: 10px;
left: 5px;
}
.photo1 img{
width: 60px;
height: 60px;
border-radius: 50%;
float: left;
margin:0;
}
.content-box{
margin-top: 10px;
margin-left: 10px;
flex: 1;/* flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写，将内容区flex：1，内容区则会自动放大占满剩余空间 */
display: flex;
justify-content: space-between;
align-items: center;
}
.name{
width: 80px;
height: 20px;
padding: 0px;
text-align: start;
line-height: 20px;
position: relative;
top: -8px;
}
.text{
width: 110px;
height: 20px;
padding: 0px;
text-align: start;
line-height: 20px;
font-size: small;
}
.view{
width: 170px;
margin:15px auto auto;
height: 20px;
text-align: center;
line-height: 20px;
color: rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px;
cursor: pointer;
}
/* 加上发送信息的时间和小红点 */
.action{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
right: 8px;
top:-3px;
}
.time{
width: 30px;
height: 10px;
color: rgba(0, 0, 0, 0.5);
font-size: 5px;
text-align: center;
line-height: 10px;
margin:0 10px 10px 0;
}
.unread{
width:8px;
height: 8px;
border-radius: 50%;
background-color: red;
margin-top: 8px;
}
body部分css代码：
.container{
width: 100%;
height: 100vh;
/* 渐变色 */
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)),url(合照1.jpg);
background-position: left;
background-repeat: no-repeat;
}
.row{
display: flex;
height: 88%;
align-items: center;
}
.col{
flex-basis: 50%; /* 相对于主轴取50% */
margin: 80px;
}
.col h1{
font-size: 40px;
color: white;
margin-bottom: 10px;
}
p{
color: white;
font-family:'Poppins',sans-serif;
font-size: 11px;
line-height: 15px;
}
button{
width: 180px;
color: black;
font-size: 12px;
padding: 12px 0;
background: white;
border: 0;
border-radius: 20px;
margin-top: 30px;
cursor: pointer;/* 光标变成一只手 */
}
.card{
width: 250px;
height: 230px;
display: inline-block;/* 可以设置宽度，而且不会像block那样霸占整一行 */
border-radius: 10px;
box-sizing: border-box;
cursor: pointer;/* 光标变成一只手 */
margin: 10px 15px;
background-position: center;
/* 图片填满整个盒子 */
background-size: cover;
}
.card1{
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url(小1.jpg);
}
.card2{
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url(小2.jpg);
}
.card3{
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url(小3.jpg);
}
.card4{
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url(小4.jpg);
}
.card:hover{
transform: translateY(-10px);
transition: 0.5s;
}
.card1:hover {
background-image: url(小1.jpg);
}
.card2:hover {
background-image: url(小2.jpg);
}
.card3:hover {
background-image: url(小3.jpg);
}
.card4:hover {
background-image: url(小4.jpg);
}
本次网页的制作参考了一些外网的网页作品，并且制作了一定的改进，首页部分的全部代码已附上，仅供大家参考，代码部分已经作出了小部分的解释，在此不再赘述。
这里就是小黄人网站首页的全部内容啦！谢谢观看！
敬请期待小黄人网页的人物介绍部分！