文章目录
一、网站主题
美团外卖网站、企业官方网站、仿做美团官网、外卖网页设计、企业宣传网页、学生网页
二、网站描述
网页简介:此作品为学生企业官网网页设计制作题材,运用html+css布局制作,jquery完成网页滚动效果。美团外卖品类包括附近美食、水果、蔬菜、超市、鲜花、蛋糕等,无论是早午晚餐、下午茶、宵夜,还是中餐、西餐、家常菜、小吃、快餐、海鲜、火锅、川菜、蛋糕、烤肉、水果、饮料、甜点等。
网页模块:头部板块,LOGO制作、导航条制作、导航条顶部吸附效果、banner图展示、网站首页(服务介绍、合作案例、媒体新闻)、入住加盟(图文并茂)、底部版权等。
知识运用:实战项目运用网页所需技术知识点,div+css布局、float(浮动布局)、flex(弹性布局),js(轮播图效果、tab切换效果)。
网页文件:html(超文本标记语言)、css(层叠样式表)、js(脚本语言)、img(网页所有图片资源)。
开发工具:网页作品代码简单工整纯手工敲写,可使用任意HTML网页编辑器软件(如:Dreamweaver、HBuilder、Vscode 、Sublime Text 、Webstorm、Text 、Notepad++ 等任意html编辑器开发工具进行运行及修改编辑等操作)。
三、网站演示
1、网站首页
2、视频欣赏
美团外卖企业平台官网html网页成品源码div+css网页布
四、网站源码
代码如下(示例):以下展示部分代码仅供参考~~
1、HTML结构源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美团外卖,送啥都快</title>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
<div class="header">
<div class="hnav">
<div class="center">
<div class="logo"><a href="index.html"></a></div>
<div class="nav">
<ul>
<li class="on"><a href="index.html">首页</a></li>
<li><a href="joinin.html">入驻加盟</a></li>
<li><a href="#">开放平台</a></li>
<li><a href="#">社会责任</a></li>
</ul>
</div>
</div>
</div>
<div class="hbanner">
<div class="thumb"><img src="img/b.png" alt=""></div>
<div class="item">
<ul>
<li><a href="#"><h2><img src="img/icon_01.png" alt="" class="img_01"> <font>我要入住</font> <img src="img/icon_04.png" alt=""></h2><p>商家、配送、城市代理、服务市场</p></a></li>
<li><a href="#"><h2><img src="img/icon_02.png" alt="" class="img_01"> <font>开发者接入</font> <img src="img/icon_04.png" alt=""></h2><p>开放平台</p></a></li>
<li><a href="#"><h2><img src="img/icon_03.png" alt="" class="img_01"> <font>我要点外卖</font> <img src="img/icon_04.png" alt=""></h2><p>快捷下单,一键点餐</p></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
2、CSS层叠样式表
* {
padding: 0;
margin: 0;
outline: none;
border: none;
}
a {
text-decoration: none;
color: #000;
}
ul,
li {
list-style-type: none;
}
body {
font-size: 14px;
font-family: '微软雅黑';
}
.header {
width: 100%;
height: auto;
overflow: hidden;
}
.header .hnav {
width: 100%;
height: 70px;
position: fixed;
top: 0;
z-index: 999;
transition: all 0.4s;
}
.header .hnav .center {
width: 990px;
height: 70px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header .hnav .logo a {
width: 163px;
height: 48px;
display: block;
background: url(../img/logo.png) no-repeat left center;
background-size: 163px 48px;
}
.header .hnav .nav ul li {
float: left;
padding: 0 20px;
}
.header .hnav .nav ul li a {
display: block;
height: 67px;
line-height: 67px;
border-bottom: 3px solid none;
color: #fff;
font-size: 16px;
}
.header .hnav .nav ul li.on a,
.header .hnav .nav ul li a:hover {
border-bottom: 3px solid #ffbd27;
font-weight: bold;
color: #fff;
}
.header.sticky .hnav .logo a {
width: 163px;
height: 48px;
display: block;
background: url(../img/logoed.png) no-repeat left center;
background-size: 163px 48px;
}
.header.sticky .hnav {
background: #fff;
}
.header.sticky .hnav ul li a {
color: #000;
}
.header.sticky .hnav .nav ul li.on a,
.header.sticky .hnav .nav ul li a:hover {
color: #000;
}
.header .hbanner {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
padding-bottom: 120px;
}
.header .hbanner .thumb img {
display: block;
width: 100%;
}
.header .hbanner .item {
width: 100%;
height: 175px;
position: absolute;
bottom: 10px;
}
.header .hbanner .item ul {
font-size: 0px;
height: 175px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.header .hbanner .item ul li {
display: inline-block;
background: #658ff7;
}
.header .hbanner .item ul li:nth-child(2) {
background: #f54c45;
}
.header .hbanner .item ul li:nth-child(3) {
background: #ffbd27;
}
.header .hbanner .item ul li a {
display: block;
width: 330px;
overflow: hidden;
padding: 56px 0;
}
.header .hbanner .item ul li a h2 {
font-size: 26px;
height: 30px;
color: #fff;
font-weight: normal;
display: flex;
align-items: center;
justify-content: center;
}
.header .hbanner .item ul li a h2 img.img_01 {
width: 30px;
height: 30px;
display: block;
}
.header .hbanner .item ul li a h2 img {
width: 10px;
height: 14px;
}
.header .hbanner .item ul li a h2 font {
margin: 0 10px;
}
.header .hbanner .item ul li a p {
font-size: 16px;
line-height: 16px;
margin-top: 10px;
color: #fff;
}
.header .hbanner .item ul li a:hover {
padding: 60px 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
五、学习理念
前端学习是一个既充满挑战又极具成就感的过程,它要求学习者不断掌握新技术、提升设计思维与用户体验意识。
1、持续学习与社区参与
持续学习:前端技术更新迅速,保持学习的热情和动力至关重要。关注行业动态、参加技术会议、阅读技术博客和书籍,都是提升自我的有效途径。让学习成为一种习惯,你将永远走在技术的前沿。
社区参与:加入前端社区,与同行交流心得、分享经验,可以拓宽视野、激发灵感。同时,参与社区建设、贡献开源项目,也能提升你的影响力和知名度。社区是成长的沃土,珍惜每一次交流的机会。
2、项目实践与项目经验
动手实践:理论知识是基础,但真正将知识转化为技能还需通过大量的实践。参与开源项目、自己搭建博客、开发小工具等,都是很好的实践方式。实践过程中遇到的问题和解决方案,将是你最宝贵的财富。动手实践:理论知识是基础,但真正将知识转化为技能还需通过大量的实践。参与开源项目、自己搭建博客、开发小工具等,都是很好的实践方式。实践过程中遇到的问题和解决方案,将是你最宝贵的财富。
项目经验:通过参与实际项目,可以学习到团队协作、项目管理、需求分析等技能。同时,项目经验也是求职时的重要加分项。尽量找机会参与真实项目,哪怕是从简单的功能模块开始。
六、更多干货
1、如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!
2、❤️【关注我 | 获取更多HTML源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等!「在这里有好多前端开发者,一起探讨前端技术知识,互相学习」!
3、以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬