683.大学生HTML期末大作业 —【营养早餐美食主题网页(7页)】 Web前端网页制作 html5+css3+js

一只小小的眠羊

840人浏览 · 2025-11-26 23:16:02

一只小小的眠羊 · 2025-11-26 23:16:02 发布

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...

【建议收藏】40种主题网页案例大集合 Web前端大学生期末大作业 HTML+CSS+JS-CSDN博客

一、网页简介

本实例应用html5+css3+js：导航菜单、图片轮翻、三级页面、jQuery滑动特效、登录等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含9个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="js/swiper.min.js"></script>
   <script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="css/css1.css" />
   <title>老八营养早餐</title>
   <link href="css/swiper.min.css" rel="stylesheet" type="text/css" />
</head>

</div>
               
               <div class="swiper-pagination"></div>
               
               <div class="swiper-button-next"></div>
               <div class="swiper-button-prev"></div>
           </div>

<script>
               var swiper = new Swiper('.swiper-container', {
                   slidesPerView: 1,
                   spaceBetween: 30,
                   loop: true,
                   pagination: {
                       el: '.swiper-pagination',
                       clickable: true,
                   },
                   navigation: {
                       nextEl: '.swiper-button-next',
                       prevEl: '.swiper-button-prev',
                   },
               });
           </script>

       </div>
   </div>
   <hr />

   <div class="welcome-text">
       <h1>美好的一天       从营养的早餐开始</h1>
       <h3> </h3>
       <h3>俗话说，早餐要吃好，午餐要吃饱，晚餐要吃少。营养专家指出，每天吃一顿营养早餐对身体健康非常重要。能使激素分泌很快进入正常直达高潮，给嗷嗷待哺的脑细胞提供饥渴的能量，给亏缺待摄的身体补以必需的营养，一下子带给我们身体精力、活力和健康。
       </h3>
   </div>

...

2.CSS

代码如下（节选示例）：

* {
           margin: 0;
           padding: 0;
       }

       .menus.menus1 h1 {
           vertical-align: sub;
           float: left;
           margin-top: 30px;
           font-size: 54px;
           text-transform: none;
           font-family: "华文行楷";
           font-weight: lighter;
           color: #F89165;
       }

       .banenr {
           height: 80px;
           width: auto;
           background-color: #eb4537;
       }

       .banenr .banner-bg h3 {
           font-size: 36px;
           font-weight: lighter;
           float: left;
           margin-top: 20px;
           color: #f1f1f1;
           margin-left: -30px;
       }

       .banner-bg {
           margin: auto;
           width: 1100px;
           height: 80px;
           padding-left: 0px;
       }

       a {
           color: #000;
           text-decoration: none;
       }

       li {
           list-style: none;
       }

       .clear {
           clear: both;
       }

       .menus {
           width: 1100px;
           margin-top: 0px;
           margin-right: auto;
           margin-bottom: 0px;
           margin-left: auto;
           height: 100px;
       }

       .menus ul {
           width: 700px;
           position: relative;
           float: right;
           margin-top: 20px;
           font-style: italic;
           border-bottom-width: 2px;
           border-bottom-style: solid;
           border-bottom-color: #ff5a5a;
       }

       .menus li {
           float: left;
           width: 100px;
           height: 40px;
           line-height: 40px;
           text-align: center;
           cursor: pointer;
           -webkit-transition: all 0.5s;
           -moz-transition: all 0.5s;
           -ms-transition: all 0.5s;
           -o-transition: all 0.5s;
           transition: all 0.5s;
           font-size: 24px;
       }

...

3.JS

代码如下（节选示例）：

$(function(){
//无点击效果
$('.menus0 li').each(function(){
$('.menus0 li').mouseover(function(){
var index = $(this).index();
$('.menus0 .bg').css('left',(index-1)*100+'px');
$('.menus0 li').css('color','#000');
$(this).css('color','#fff');
});
$('.menus0 li').mouseout(function(){
$('.menus0 li').css('color','#000');
$('.menus0 .bg').css('left','0');
$('.menus0 li').eq(0).css('color','#fff');
});
})

//菜单形式
$('.menus1 li').each(function(){
var flag = 0;
var i = 0;
$('.menus1 li').mouseover(function(){
var index = $(this).index();
$('.menus1 .bg').css('left',(index-1)*100+'px');
$('.menus1 li').css('color','#000');
$(this).css('color','#fff');
$('.menus1 li').click(function(){
$('.menus1 .bg').css('left',(index-1)*100+'px');
flag = (index-1)*100;
i=$(this).index()-1;
$(this).css('color','#fff');
})
$('.menus1 li').mouseout(function(){
$('.menus1 .bg').css('left',flag+'px');
$('.menus1 li').css('color','#000');
$('.menus1 li').eq(i).css('color','#fff');
});
});
})

//点击选项卡形式
$('.menus2 li').each(function(){
var flag = 0;
var i = 0;
$('.menus2 li').mouseover(function(){
var index = $(this).index();
$('.menus2 .bg').css('left',(index-1)*100+'px');
$('.menus2 li').css('color','#000');
$(this).css('color','#fff');
$('.menus2 li').click(function(){
$('.menus2 .bg').css('left',(index-1)*100+'px');
flag = (index-1)*100;
i=$(this).index()-1;
$(this).css('color','#fff');
$('.menus2 .menus-list').removeClass('show')
$('.menus2 .menus-list').eq(index-1).addClass('show')
$('.tab1').removeClass('show')
$('.tab1').eq(index-1).addClass('show')
})
$('.menus2 li').mouseout(function(){
$('.menus2 .bg').css('left',flag+'px');
$('.menus2 li').css('color','#000');
$('.menus2 li').eq(i).css('color','#fff');
});
});
})

//移入型选项卡
$('.menus3 li').each(function(){
$('.menus3 li').mouseover(function(){
var index = $(this).index();
$('.menus3 .bg').css('left',(index-1)*100+'px');
$('.menus3 li').css('color','#000');
$(this).css('color','#fff');
$('.tab2').removeClass('show')
$('.tab2').eq(index-1).addClass('show')
});
})
})

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责