甜品美食蛋糕网页设计期末课程设计(html+css+js)

最新推荐文章于 2024-05-23 22:43:43 发布
最新推荐文章于 2024-05-23 22:43:43 发布
阅读量1k 收藏 19
点赞数 6
分类专栏： web前端 文章标签： css dreamweaver html javascript 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73081085/article/details/127139912
版权

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言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代码）。

三、🔗网站效果

▶️1.视频演示

F61JP- 面包蛋糕 (9页)HTML+CSS

🧩 2.图片演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE HTML>
<html>
<head>
<title>面包蛋糕网</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>


a.cnet:hover
{
    color: #000000
}
a.cnet:unknown
{
    color: #000000
}
a:link
{
    color:#000000;
    font-family: Arial;
    text-decoration: none
}
a:visited
{
    color: #000000;
     font-family: Arial;
    text-decoration: none
}
a:active
{
    color: #000000;
    font-family: Arial;
    text-decoration: none;
}
a:hover
{
    font-family: Arial;
    text-decoration: underline;
}
td img {display: block;}
td img {display: block;}
</style>
<link href="css.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
<style type="text/css">
body,td,th {
	font-size: 12px;
	margin:0;
}
body{background:#EBEBEB  left bottom; MARGIN: 0px 0px 0px;font-family:"微软雅黑",Arial, Helvetica, sans-serif;}
#top{
	height:350px;
	background-image: url(images/top.jpg);
	background-repeat: repeat;
	background-position: left top;
	text-align:left;
	padding:0;
}
#bottom{
	height:60px;
	background-image: url(images/bottom.jpg);
	background-repeat: repeat;
	background-position: left top;
	text-align:left;
	padding:0;
}
</style>
<bgsound src=bg.mp3 loop="-1"><body topmargin="0">
<div id="top">
<table width="990" border="0" align="center" cellpadding="0" cellspacing="0" background="images/logo.png">
  
  <tr valign="middle">
    <td height="292" colspan="3" class="css"><div align="center"> </div></td>
  </tr>
  <tr>
    <td width="373" height="56" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      
      <tr>
        <td width="373" height="56" valign="middle" class="css"><div align="center">
          <table border="0" cellpadding="0" cellspacing="0" width="321">
            <tr>
              <td><img src="images/spacer.gif" width="104" height="1" border="0" ></td>
              <td><img src="images/spacer.gif" width="4" height="1" border="0" ></td>
              <td><img src="images/spacer.gif" width="103" height="1" border="0" ></td>
              <td><img src="images/spacer.gif" width="4" height="1" border="0" ></td>
              <td><img src="images/spacer.gif" width="106" height="1" border="0" ></td>
              <td><img src="images/spacer.gif" width="1" height="1" border="0" ></td>
            </tr>
            <tr>
              <td><a href="index.htm"><img name="button1_r1_c1" src="images/button1_r1_c1.gif" width="104" height="25" border="0" ></a></td>
              <td><img name="button1_r1_c2" src="images/button1_r1_c2.gif" width="4" height="25" border="0" alt=""></td>
              <td><a href="index2.htm"><img name="button1_r1_c3" src="images/button1_r1_c3.gif" width="103" height="25" border="0" ></a></td>
              <td><img name="button1_r1_c4" src="images/button1_r1_c4.gif" width="4" height="25" border="0" ></td>
              <td><a href="index3.htm"><img name="button1_r1_c5" src="images/button1_r1_c5.gif" width="106" height="25" border="0" ></a></td>
              <td><img src="images/spacer.gif" width="1" height="25" border="0" ></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table></td>
    <td width="249">&nbsp;</td>
    <td width="368" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="368" height="56" valign="middle"><table border="0" cellpadding="0" cellspacing="0" width="321">
          <tr>
            <td><img src="images/spacer.gif" alt="" name="undefined_2" width="104" height="1" border="0"></td>
            <td><img src="images/spacer.gif" alt="" name="undefined_2" width="4" height="1" border="0"></td>
            <td><img src="images/spacer.gif" alt="" name="undefined_2" width="103" height="1" border="0"></td>
            <td><img src="images/spacer.gif" alt="" name="undefined_2" width="4" height="1" border="0"></td>
            <td><img src="images/spacer.gif" alt="" name="undefined_2" width="106" height="1" border="0"></td>
            <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0"></td>
          </tr>
          <tr>
            <td><a href="index4.htm"><img name="button2_r1_c1" src="images/button2_r1_c1.gif" width="104" height="25" border="0"></a></td>
            <td><img name="button2_r1_c2" src="images/button2_r1_c2.gif" width="4" height="25" border="0"></td>
            <td><a href="index5.htm"><img name="button2_r1_c3" src="images/button2_r1_c3.gif" width="103" height="25" border="0" alt=""></a></td>
            <td><img name="button2_r1_c4" src="images/button2_r1_c4.gif" width="4" height="25" border="0"></td>
            <td><a href="index6.htm"><img name="button2_r1_c5" src="images/button2_r1_c5.gif" width="106" height="25" border="0"></a></td>
            <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="25" border="0"></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="57">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="990" border="0" align="center">
  <tr>
    <td width="500"><table width="100%" border="0">
      <tr>
        <td class="css3"><div align="center"><strong><a href="https://baike.so.com/doc/7259950-7489267.html">法国蛋糕面包</a></strong></div></td>
      </tr>
      <tr>
        <td class="css3"><div align="center"><strong><a href="index7.html">英国蛋糕面包</a></strong></div></td>
      </tr>
      <tr>
        <td class="css3"><div align="center"><strong><a href="index8.html">中国蛋糕面包</a></strong></div></td>
      </tr>
      <tr>
        <td class="css3"><div align="center"><strong><a href="index9.html">美国蛋糕面包</a></strong></div></td>
      </tr>
    </table></td>
    <td width="480"><div align="center">
	<img src="images/image018.jpg" width="400" height="269">
	</div></td>
  </tr>
  <tr>
    <td colspan="2" class="css2">蛋糕是一种古老的西点，一般是由烤箱制作的，蛋糕是用鸡蛋、白糖、小麦粉为主要原料。以牛奶、果汁、奶粉、香粉、色拉油、水，起酥油、泡打粉为辅料。经过搅拌、调制、烘烤后制成一种像海绵的点心。<br>
    蛋糕是一种面食，通常是甜的，典型的蛋糕是以烤的方式制作出来。蛋糕的材料主要包括了面粉、甜味剂(通常是蔗糖)、黏合剂(一般是鸡蛋，素食主义者可用面筋和淀粉代替)、起酥油（一般是牛油或人造牛油，低脂肪含量的蛋糕会以浓缩果汁代替），液体（牛奶，水或果汁），香精和发酵剂（例如酵母或者发酵粉）。</td>
  </tr>
  <tr>
    <td><div align="center"><img src="images/image009.jpg" width="400" height="269"></div></td>
    <td><div align="center"><img src="images/image011.jpg" width="400" height="269"></div></td>
  </tr>
  <tr>
    <td colspan="2"><span class="css2">  所谓面包，就是以黑麦、小麦等粮食作物为基本原料，先磨成粉，再加入水、盐、酵母等和面并制成面团坯料，然后再以烘、烤、蒸、煎等方式加热制成的食品。<br>
      通常，我们提到面包，大都会想到欧美面包或日式的夹馅面包、甜面包等。其实，世界上还有许多特殊种类的面包。世界上广泛使用的制作面包的原料除了黑麦粉、小麦粉以外，还有荞麦粉、糙米粉、玉米粉等。有些面包经酵母发酵，在烘烤过程中变得更加蓬松柔软；还有许多面包恰恰相反，用不着发酵。尽管原料和制作工艺不尽相同，它们都被称为面包。<br>
      面包又被称为人造果实，品种繁多，各具风味。<br>
      面包是高热量碳水化合物食品，多吃容易肥胖。<br>
    温度高时较为松软好吃，低温的状态下会变硬，风味口感都会差很多。</span></td>
  </tr>
</table>
<div class="css" id="bottom">
  <div align="center"><font color="purple" size="4"><br><a href="index2.htm">
    面包蛋糕网</a></font></div>
</div>
</body>
</html>

🏠CSS样式代码

.css {
	font-size: 12px;
	line-height: 180%;
}
.css1 {
	font-size: 13px;
	line-height: 180%;
}
.css2 {
	font-size: 14px;
	line-height: 180%;
}
.css3 {
	font-size: 24px;
	line-height: 200%;
}
.Tboder01 {
	border: 1px solid #e54e5b;
}
.input01 {
	background-color: #FFFFFF;
	border: 1px solid #CDCDCD;
	height: 20px;
}
.tdline23 {
	font-size: 12px,BORDER-TOP: #ebe6d3 1px solid
}
.tabline {
	font-size: 14px;BORDER-RIGHT: #d1d6c4 1px solid; BORDER-TOP: #d1d6c4 1px solid; BORDER-LEFT: #d1d6c4 1px solid; BORDER-BOTTOM: #d1d6c4 1px solid; BACKGROUND-COLOR: #f7f9f3
}
.tdline7 {
	BORDER-RIGHT: #d1d6c4 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: #d1d6c4 1px solid; BACKGROUND-COLOR: #fcfdfb
}
.tdline27 {
	BORDER-TOP: #ffffff 1px solid; BORDER-BOTTOM: #e1ccaf 1px solid; BACKGROUND-COLOR: #f2ebe3
}
.b_space3 {
	TEXT-INDENT: 0.5em
}
.tabline2 {
	BORDER-TOP: #ffffff 1px solid; BACKGROUND-COLOR: #ebf7f9
}
.sbutton {
	BORDER-RIGHT: #7b9ebd 1px solid; 
   PADDING-RIGHT: 2px; 
   padding-top:2px;
   BORDER-TOP: #7b9ebd 1px solid; 
   PADDING-LEFT: 2px; 
   FONT-SIZE: 10pt; 
   FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); 
   BORDER-LEFT: #7b9ebd 1px solid; 
   CURSOR: hand; 
   BORDER-BOTTOM: #7b9ebd 1px solid
}
.rbutton {
	BORDER-RIGHT: 1px solid #CCCCCC; BORDER-TOP: 1px solid #CCCCCC; BORDER-LEFT: 1px solid #CCCCCC; COLOR: #333333; BORDER-BOTTOM: 1px solid #CCCCCC; BACKGROUND-COLOR: #FFFFFF
}
.READNEWSTITLE	{font-size: 18px; line-height: 150%; color: #000000; filter:DropShadow(Color=#cccccc, OffX=1, OffY=1, Positive=1)}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web学生网页设计
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
五色花.doc
09-19
五色花.doc
基于jsp+mysql+Spring的SSM在线蛋糕商城销售网站项目设计和实现_eclipse蛋糕商城(1)
2401_83977705的博客
05-02 311
简介：Java领域优质创作者、【】公号作者 简历模板、学习资料、面试题库、技术互助【关注我，都给你】
242. 清新的甜品蛋糕网页设计实例 大学生期末大作业 Web前端网页制作 html+css
最新发布
A240307的博客
05-23 785
清新的甜品蛋糕网页设计实例，应用html+css+js： Div、导航栏、购物车、注册登录页面等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
响应式鲜花礼品商城网站源码|鲜花商城网站建设
05-22
响应式鲜花商城源码是基于易优cms进行开发的商城系统，商城开发初衷主要要服务员少量货物需要销售的小型商城购物系统 演示地址：https://www.eyoucms.com/buy/special/
使用HTML制作静态网站 中国传统文化 丝绸之路 (学生网页设计作业源码)
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
五色超级创意合集—扁平网页风CH016(1).doc
12-07
五色超级创意合集—扁平网页风CH016(1).doc
学生网页课程设计期末作业 HTML+CSS+JavaScript甜品蛋糕网页设计(5页)
08-10
- **DIV+CSS布局**: 通过使用`div`元素配合CSS进行定位和样式设置，可以灵活地创建多列布局、固定或流体布局等。本项目的网页设计采用了这种布局方式，使得页面既美观又易于维护。 - **响应式设计**: 为了适应不同...
静态网页设计期末作业课程设计基于HTML的蛋糕网页源码.zip
06-18
静态网页设计期末作业课程设计基于HTML的蛋糕网页源码，静态网页，HTML，大学生期末作业必过，90分以上，代码含有注释，自己操作就好，不求人。 包含功能如下： //注册 滑动验证 验证码 //登录 //首页 轮播 样式 ...
计算机毕业设计 基于HTML+CSS+JavaScript 大气的甜品奶茶美食餐饮文化网页设计与实现23页面
08-10
- **项目名称**: 计算机毕业设计 - 基于HTML+CSS+JavaScript的大气甜品奶茶美食餐饮文化网页设计与实现 - **目标**: 开发一套适用于展示美食、甜品、奶茶及相关文化的网页设计。该项目旨在满足大学生网页设计课程的...
web网页设计期末课程大作业：美食餐饮文化主题网站设计——HTML+CSS+JavaScript美食餐厅网站设计与实现 11页面
08-10
- **适用场景**: 作为大学生的期末课程大作业 - **目标**: 设计一个具有11个页面的美食餐厅网站，展示各种美食、文化及相关信息。 #### 2. 技术要点详解 ##### 2.1 HTML5 结构与语义化 - **结构化标签**: 使用`...
HTML5 Javascript 五彩连珠 源码
03-19
HTML5 Javascript 五彩连珠 源码
thinkphp鲜花水草花卉网站模板+前后端源码
07-08
thinkphp鲜花水草花卉网站模板+前后端源码，本模板自带eyoucms内核，无需再下载eyou系统，原创设计、手工书写DIV+CSS，完美兼容IE7+、Firefox、Chrome、360浏览器等；主流浏览器；结构容易优化；多终端均可正常预览。
php 花店系统，数据库是mysqli，比较简单的代码
06-26
php 花店系统（包含添加到购物车，购物车，提交订单，订单详情等），数据库是mysqli，比较简单的代码
DW网页设计HTML+CSS+JAVASCRIPT（西式甜品网）
06-07
这个名为“DW网页设计HTML+CSS+JAVASCRIPT（西式甜品网）”的项目，显然是一个使用这些技术来创建一个以西式甜品为主题的网站的作业或示例。下面将详细介绍这三个核心技术及其在网页设计中的应用。 **HTML ...
基于php鲜花花卉销售网站
q_1262330535的博客
08-07 1324
本系统是为传统经营的花店开通网上销售渠道而开发的，主要满足传统花店运营模式的需求，将销售渠道扩展到网上。通过简单的管理，提供该最终消费者产品的展示、购物、订单处理等。 在线购物操作简单，节约时间，大大的见擒了商家的工作量，降低成本。商家可以发布鲜花产品，以供客户查看；实现简单的鲜花查询功能；客户能比较方便地订购鲜花产品和管理自己的产品；管理员能比较方便的管理所有的订单。 主要设计内容：本课题是实现一个网上实现花卉销售一个系统。课题的具体研究内容如下： 1.个人登录注册 登录注册：使用网站的人可以通过注册登录
html5鲜花网页代码,JS制作漂亮的鲜花完整代码
weixin_35600835的博客
06-07 4853
摘要：看这朵鲜花多漂亮，一开始感觉是一张图片，审查元素后发现是用js写的，学习一下，我在这里分享给大家。代码：...看这朵鲜花多漂亮，一开始感觉是一张图片，审查元素后发现是用js写的，学习一下，我在这里分享给大家。代码：JS鲜花varb=document.body;varc=document.getElementsByTagName('canvas')[0];vara=c.get...
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现
HTML网页设计
08-08 3983
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS......
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值