-
大学生川菜网页制作教程 学生HTML静态美食菜品网页设计作业成品 简单网页制作代码 学生美食网页作品免费设计
🎀 精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🦄 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
一、👨🎓网站题目
🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。
二、✍️网站描述
🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。
👨🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、🌐网站效果
五、🪓 代码实现
🧱HTML结构代码
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>美食之家title> <link href="css/public.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> head> <body> <div class="main"> <div class="top"> <div class="logo"><img src="images/logo.jpg" />div> <div class="nav"> <ul class="nav_menu"> <li class="nav_menu-item"><a href="index.html" >首页a>li> <li class="nav_menu-item"><a href="caixi.html" >菜系介绍a> <ul class="nav_submenu"> <li class="nav_submenu-item"> <a href="caixi.html" >川菜a>li> <li class="nav_submenu-item"> <a href="caixi.html" >闽菜a>li> <li class="nav_submenu-item"> <a href="caixi.html" >粤菜a>li> <li class="nav_submenu-item"> <a href="caixi.html" >鲁菜a>li> <li class="nav_submenu-item"> <a href="caixi.html" >湘菜a>li> <li class="nav_submenu-item"> <a href="caixi.html" >苏菜a>li> <li class="nav_submenu-item"> <a href="caixi.html" >浙菜a>li> <li class="nav_submenu-item"> <a href="caixi.html" >徽菜a>li> ul> li> <li class="nav_menu-item"><a href="meishi.html" >美食大全a>li> <li class="nav_menu-item"><a href="jiankang.html" >健康养身a>li> <li class="nav_menu-item"><a href="about.html" >关于我们a>li> <li class="nav_menu-item"><a href="lianxi.html" >联系我们a>li> ul> div> div> <div class="banner"> <div class="box" id="box"> <div class="inner"> <ul> <li><a href="#"><img src="images/banner1.jpg" alt="">a>li> <li><a href="#"><img src="images/banner2.jpg" alt="">a>li> <li><a href="#"><img src="images/banner3.jpg" alt="">a>li> ul> <ol class="bar"> ol> <div id="arr"> <span id="left"> < span> <span id="right"> > span> div> div> div> div> <script src="js/banner.js" type="text/jscript">script> <div class="box1"> <div class="bx"> <h2><a href="#">迷你蔬菜，营养大不同？a>h2> <ul> <li><a href="#">xiao龟龟的菜单 a>li> <li><a href="#">很多迷你蔬菜兼有水果口感，食用方便。a>li> <li><a href="#">而且迷你食材个头小，适应不同需求，一起来看看a>li> ul> div> <div class="bx"> <h2><a href="#">八大菜系，新推出菜品？a>h2> <ul> <li><a href="#">萌萌虾球的菜单a>li> <li><a href="#">椒盐虾、香辣虾、油焖大虾……a>li> <li><a href="#">各种虾的做法，爱吃虾的人赶紧拿走咯！a>li> ul> div> <div class="bx"> <h2><a href="#">划重点！食物降血脂这些更有效？a>h2> <ul> <li><a href="#">现代人生活水平提高了，从过去 a>li> <li><a href="#">的"咸鱼青菜"到了如今的"大鱼大肉"，高脂、a>li> <li><a href="#">高糖、高热量食物，长此以往，容易导致血脂升高。a>li> ul> div> div> <div class="box2"> <div class="title"><a href="meishi.html">美食推荐<span>更多>>span>a>div> <ul> <li> <a href="#"><img src="images/img01.jpg" /> <h2>水煮白菜h2> <p>1.白菜水煮也具有一定的养身功效，p> <p>2.可以对小便有一定的帮助p> <p>3.可治疗小便不利p> <p>4.烦热口渴消化不良等症。p> a> li> <li> <a href="#"> <img src="images/img08.jpg" /> <h2>佛跳墙h2> <p>1、促进发育p> <p>2、降胆固醇软化血管p> <p>3、提高免疫力调经润肠促进生长发育p> <p>4、降血压、降血脂、降胆固醇治疗疾病p> a> li> <li> <a href="#"> <img src="images/img09.jpg" /> <h2>聚贤八宝汤h2> <p>1.竹笙有补气养阴p> <p>2.润肺止咳，清热利湿之效p> <p>3.搭配素食人参之称的牛蒡p> <p>4.体内环保，减排低碳！ p> a> li> <li class="mar0"> <a href="#"> <img src="images/img10.jpg" /> <h2>宫廷菜汁翅h2> <p>1.具有滋阴润肺，滋补养颜的作用p> <p>2.促进人体的新陈代谢燕窝性质p> <p>3.可以促进细胞分化p> <p>4.损皮肤起到快速修复的效果p> a> li> ul> div> <div class="box3"> <div class="title"><a href="difang.html">地方风味<span>更多>>span>a>div> <ul> <li><a href="ms01.html"><img src="images/img05.jpg" /><h2>水煮牛肉h2>a>li> <li><a href="ms02.html"><img src="images/img11.jpg" /><h2>火爆腰花h2>a>li> <li><a href="ms03.html"><img src="images/img12.jpg" /><h2>东坡肘子h2>a>li> <li class="mar0"><a href="#"><img src="images/img13.jpg" /><h2>梅菜扣肉h2>a>li> <li><a href="#"><img src="images/img14.jpg" /><h2>麻婆豆腐h2>a>li> <li><a href="#"><img src="images/img15.jpg" /><h2>麻辣沸腾鱼h2>a>li> <li><a href="#"><img src="images/img16.jpg" /><h2>夫妻肺片h2>a>li> <li class="mar0"><a href="#"><img src="images/img17.jpg" /><h2>白切鸡h2>a>li> ul> div> <div class="box4"> <div class="bx"> <div class="b-title"><a href="shicai.html">食材大全<span>更多>>span>a>div> <div class="shic"> <ul> <li class="hos"><a href="#">肉类a>li> <li><a href="#">鸡a>li> <li><a href="#">鸭a>li> <li><a href="#">猪a>li> <li><a href="#">羊a>li> <li><a href="#">牛a>li> ul> div> <div class="shic"> <ul> <li class="hos"><a href="#">蔬菜类a>li> <li><a href="#">白菜a>li> <li><a href="#">萝卜a>li> <li><a href="#">生菜a>li> ul> div> <div class="shic"> <ul> <li class="hos"><a href="#">水果a>类li> <li><a href="#">苹果a>li> <li><a href="#">香蕉a>li> <li><a href="#">榴莲a>li> <li><a href="#">桃子a>li> ul> div> <div class="shic"> <ul> <li class="hos"><a href="#">海鲜类a>li> <li><a href="#">龙虾a>li> <li><a href="#">螃蟹a>li> <li><a href="#">扇贝a>li> <li><a href="#">生蚝a>li> ul> div> <div class="shic"> <ul> <li class="hos"><a href="#">豆制类a>li> <li><a href="#">豆腐a>li> <li><a href="#">豆皮a>li> <li><a href="#">大白豆a>li> ul> div> <div class="shic"> <ul> <li class="hos"><a href="#">香料类a>li> <li><a href="#">香叶a>li> <li><a href="#">桂皮a>li> <li><a href="#">山药a>li> <li><a href="#">草果a>li> ul> div> <div class="shic"> <ul> <li class="hos"><a href="#">药食类a>li> <li><a href="#">燕窝a>li> <li><a href="#">阿胶a>li> <li><a href="#">百合a>li> <li><a href="#">当归a>li> ul> div> div> <div class="jiange">div> <div class="bx"> <div class="b-title"><a href="zhuanti.html">最新专题<span>更多>>span>a>div> <div class="shang"> <img src="images/img06.jpg" /> <p>1.猪尾冼净焯水，再用清水冲洗干净！洗干净<br /> 后放入锅中，加入水、调料煮烂！<br /> 2.猪尾巴煮熟后捞出掠凉、切成段！<br /> 3.调汁：蒸鱼豉油、耗油、芝麻油、橄榄油、<br /> 糖、少许盐、姜蒜末、香菜碎拌匀！<br /> 4.将调好的汁倒入盘中拌匀即可！p> div> <div class="xia"> <p>1.准备生姜片和大葱<br /> 2.鸡洗净<br /> 3.先冷水下锅，绰水后捞起用冷水洗净<br /> 4.加入汤锅，倒入调料<br /> 5.加入料酒<br /> 6.盖上大火煮开转中火至煮熟<br /> 7.煮熟后捞起p> <img src="images/img07.jpg" /> div> div> div> <div class="foot">版权@13546546545232132div> div> body>