html学生网页作业 | 美团外卖企业平台官网实战经验项目

文章目录

网站主题

网站描述

网站介绍

网站演示

学习理念

更多干货

一、网站主题

美团外卖网站、企业官方网站、仿作美团官网、外卖网页设计、企业宣传网页、学生网页作业

二、网站描述

网页简介：此作品为学生企业官网网页设计制作题材，运用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、视频欣赏

美团外卖网页

四、网站源码

代码如下(示例)：以下展示部分代码仅供参考~~

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、项目实践与项目经验

动手实践‌：理论知识是基础，但真正将知识转化为技能还需通过大量的实践。参与开源项目、自己搭建博客、开发小工具等，都是很好的实践方式。‌实践过程中遇到的问题和解决方案，将是你最宝贵的财富。动手实践‌：理论知识是基础，但真正将知识转化为技能还需通过大量的实践。参与开源项目、自己搭建博客、开发小工具等，都是很好的实践方式。‌实践过程中遇到的问题和解决方案，将是你最宝贵的财富。‌

项目经验‌：通过参与实际项目，可以学习到团队协作、项目管理、需求分析等技能。同时，项目经验也是求职时的重要加分项。‌尽量找机会参与真实项目，哪怕是从简单的功能模块开始。