1500字范文 > 大二学生Web课程设计美食主题网页制作(HTML+CSS+JavaScript)

大二学生Web课程设计美食主题网页制作(HTML+CSS+JavaScript)

时间：2021-11-20 21:17:47

⛵源码获取文末联系✈
Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 精彩专栏推荐美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 | 餐饮文化 | 等网站的设计与制作 | 美食主题网站 | HTML期末大学生网页设计作业

HTML：结构

CSS：样式

在操作方面上运用了html5和css3，

采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

JavaScript：做与用户的交互行为

文章目录

前端学习路线网页基本结构网页演示HTML结构代码学的反而越迷茫学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；

（2）css文件：css全部页面样式,文字滚动, 图片放大等；

（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个

(2)二级页面：从首页点击进入之后的页面叫做二级页面

(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的

首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名

导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.

网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

HTML结构代码

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>美食之家</title><link rel="stylesheet" href="css/swiper.min.css"><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><script src="js/jquery.min.js"></script><script src="js/swiper.min.js"></script></head><body><header class="top"><div class="container"><div class="logo fontsize5 pull-left"><img src="images/logo (1).png" width="240" /></div></div><div class="search pull-right mes" onclick="op(this)"></div><div class="menu clearfix"><ul class="container" style="width: 1000px"><li class=" first"><a href="index.html" target="_self">首页</a></li><li class=""><a class="noborder " href="jinkou.html" target="_self">菜谱</a></li><li class=""><a class="noborder " href="guonei.html" target="_self">食材</a></li><li><a href="news.html" target="_self">健康</a></li><li class=""><a class="noborder " href="remai.html" target="_self">推荐</a></li><li class=""><a class="noborder " href="reg.html" target="_self">注册</a></li></ul></div></header><script>function op(ele){var pDiv=ele.parentNode;if(pDiv.classList.contains("tdiv")){pDiv.classList.remove("tdiv");}else{pDiv.classList.add("tdiv");}}</script><div class="clearfix"></div><div class="swiper-container"><div class="navigation"><ul class="container title"><li class=" first"><a href="index.html" target="_self">首页</a></li><li class=""><a class="noborder " href="jinkou.html" target="_self">菜谱大全</a></li><li class=""><a class="noborder " href="guonei.html" target="_self">食材大全</a></li><li><a href="news.html" target="_self">健康健身</a></li><li class=""><a class="noborder " href="remai.html" target="_self">最新推荐</a></li><li class=""><a class="noborder " href="reg.html" target="_self">注册</a></li></ul></div><div class="swiper-wrapper"><div class="swiper-slide" style="background:#0182de"> <img src="images/a.jpg"> </div><div class="swiper-slide"> <img src="images/b.jpg"> </div><div class="swiper-slide" style="background:#0182de"> <img src="images/c.jpg"> </div></div><div class="swiper-pagination"></div><i class="ic_arr visible-xs"></i> </div><script>var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',paginationClickable: '.swiper-pagination',nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',autoplay: 5000,spaceBetween: 0});</script><div class="clearfix"></div><div class="section container"><div class="imgs"><div class="text-center name"><h2 class="fontsize3">美食图片</h2><div><span></span></div></div><div class="cp row text-center"><div class="col-sm-3 col-xs-6"><a href="info.html"><img src="images/cp1.jpg"><p>精品美食</p></a> </div><div class="col-sm-3 col-xs-6"><a href="info.html"><img src="images/cp2.jpg"><p>精品美食</p></a> </div><div class="col-sm-3 col-xs-6"><a href="info.html"><img src="images/cp3.jpg"><p>精品美食</p></a> </div><div class="col-sm-3 col-xs-6"><a href="info.html"><img src="images/cp4.jpg"><p>精品美食</p></a> </div><div class="col-sm-3 col-xs-6"><a href="info.html"><img src="images/cp5.jpg"><p>精品美食</p></a> </div><div class="col-sm-3 col-xs-6"><a href="info.html"><img src="images/cp6.jpg"><p>精品美食</p></a> </div><div class="col-sm-3 col-xs-6"><a href="info.html"><img src="images/cp7.jpg"><p>精品美食</p></a> </div><div class="col-sm-3 col-xs-6"><a href="info.html"><img src="images/cp8.jpg"><p>精品美食</p></a> </div></div><div class="hei30"></div></div><div class="clearfix"></div><div class="hh"><div class="text-center name"><h2 class="fontsize3">健康健身</h2><div><span></span></div></div><div class=""><div class="pad10"><div><div><ul class="clearfix"><li class="col-sm-6"><a href="newsinfo.html">盘点青少年睡眠不足的5大危害</a></li><li class="col-sm-6"><a href="newsinfo.html">益气补血气色好，面色红润有光泽！</a></li><li class="col-sm-6"><a href="newsinfo.html">感冒横行,如何预防？</a></li><li class="col-sm-6"><a href="newsinfo.html">秋天养生，重在滋阴降火!</a></li><li class="col-sm-6"><a href="newsinfo.html">调整饮食，帮助孩子增高！</a></li><li class="col-sm-6"><a href="newsinfo.html">产后便秘吃什么好？</a></li></ul></div></div></div></div><div class="hei30"></div></div></div><footer class="Footer-wrapper"><div class="fcr">网页底部 </div></footer></body></html>