HTML+CSS好看的小黄人网页制作（首页部分）

效果如下：

整体效果：

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);
}

本次网页的制作参考了一些外网的网页作品，并且制作了一定的改进，首页部分的全部代码已附上，仅供大家参考，代码部分已经作出了小部分的解释，在此不再赘述。

这里就是小黄人网站首页的全部内容啦！谢谢观看！

敬请期待小黄人网页的人物介绍部分！

HTML+CSS好看的小黄人网页制作（首页部分）相关推荐

HTML+CSS好看的小黄人网页制作（人物介绍部分，附全部代码）
效果如下: 整体效果: 动态部分: 人物介绍部分通过缩放增强视觉冲击效果,使得网页更加灵动. 代码部分: HTML代码: <!DOCTTYPE html> <html lang=&q ...
python制作小黄人唱歌_小黄人音效制作方法图文教程
最近网上疯传小黄人唱歌的音效,带感的节奏和小黄人贱贱可爱的声音真是忍俊不禁,让小编都无法自拔了,想必很多口耐的同学都想下载下来当铃声吧!其实这个并非小黄人真实的声音,我想很多人也知道了~~片尾唱的歌才 ...
微信小程序相关三、css写小黄人
小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人都是用的css,基 ...
php和javascript的get和post方式有人串口转wifi模块httpdclient网页交互通信成功源码2 wifi继电器小黄人软件ypnr
全部源码下载:链接: http://pan.baidu.com/s/1qXxr0i4 密码: 有人串口转wifi模块 httpd client通信示例-用户使用网页通过服务器收发串口数据get 功能: ...
html设计动画小黄人,【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器
仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我 ...
css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
css实现小黄人图像的制作与动画效果的实现
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html设计动画小黄人,用纯css3画一个小黄人并实现动画效果
[摘要] 本文用纯css3画出一个动态的小黄人页面,代码简洁高效,是一个非常实用的CSS3学习案例. 不得不说CSS3的出现让网页更加绚丽生动,以前需要用图片来实现的效果现在完全可以通过几段css来解 ...
CSS3实现小黄人动画
转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿. 自己也想说搞 ...

HTML+CSS好看的小黄人网页制作（首页部分）

HTML+CSS好看的小黄人网页制作（首页部分）相关推荐

最新文章

热门文章