HTML+CSS大作业:餐饮美食网页设计与实现——下午茶甜点美食带psd(6页)

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示

F73JP-下午茶甜点美食带psd(6页)

🧩 2.图片演示

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


四、💒 网站代码

🧱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/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="in-box01">
<div class="in-box01-tit">我的DIY菜单</div>
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="sous">搜索<input class="inpu" /></div>
<div class="jies">
<p>工作休闲的方式有很多种</p>
<p>一份甜点,一杯冷饮,可以</p>
<p>令你心情愉悦</p>
<div class="anniu">专注下午茶品质</div>
</div>
<div class="jis"></div>
<div class="daohang">
<ul>
<li><a href="index.html">官网首页</a></li>
<li><a href="jieshao.html">关于我们</a></li>
<li><a href="fuwu.html">关于服务</a></li>
<li><a href="xianchang.html">产品中心</a></li>
<li><a href="wenhua.html">下午茶文化</a></li>
</ul>
</div>
</div>
<div class="in-box2">
<div class="in-box2-tit">品味轻奢魅力无限</div>
<div class="in-box2-fenlei">
<div class="bx1">
<div class="bx1-lef"><img src="images/in03.jpg" /></div>
<div class="bx1-rig"><h1>缤纷系列 </h1><p>每日新鲜水果,为健康而生,</p><p>为吃货而省!</p><img src="images/iny03.jpg" /></div>
</div>

<div class="bx1">
<div class="bx1-lef"><img src="images/in04.jpg" /></div>
<div class="bx1-rig"><h1>当红小曲 </h1><p>各种精美糕点由你选择,新鲜制作,</p><p>当天配送,为繁忙的工作带来一丝悠闲</p><img src="images/iny04.jpg" /></div>
</div>

<div class="bx1">
<div class="bx1-lef"><img src="images/in05.jpg" /></div>
<div class="bx1-rig"><h1>西式甜点 </h1><p>补充身体能量,热情工作每一天</p><img src="images/iny05.jpg" /></div>
</div>
<div class="bx1"><img src="images/in06.jpg" /></div>

</div>
</div>
<div class="in-box3">
<div class="in-box3-ner">
<ul>
<li><img src="images/in07.jpg" /><h1>品质保障</h1><p>水果每天鲜切点心</p><p>每天定制生产每天</p><p>按时送达</p></li>
<li><img src="images/in08.jpg" /><h1>优质服务</h1><p>专业人员全程一对</p><p>一服务贴心呵护</p></li>
<li><img src="images/in09.jpg" /><h1>每周上新</h1><p>由专业的营养师为你精心</p><p>搭配制各类食材,每周上新</p></li>
</ul>
</div>
<div class="in-box3-jiange"></div>
</div>
<div class="in-foot">
<div class="in-foot-ner">
<div class="shang">
<div class="shang-box">
<h1>我们的服务</h1>
<a href="xianchang.html"><p>下午茶现场</p></a>
<p>DIY下午茶</p></a>
<p>下午茶精品套餐</p>
<a href="wenhua.html"><p>下午茶文化</p></a>
</div>
<div class="shang-box">
<h1>使用指南</h1>
<p>如何DIY下午茶</p>
<p>如何购买套餐</p>
<p>如何支付定金</p>
<p>如何申请发票</p>
</div>
<div class="shang-box">
<a href="jieshao.html"><h1>关于我们</h1></a>
<a href="jieshao.html"><p>关于不错</p></a>
<p>联系我们</p>
<a href="hezuo.html"><p>品牌合作</p></a>
<p>帮助中心</p>
</div>
<div class="shang-box2">
<img src="images/in12.jpg" />
<p>400-118-1217</p><p>139-1060-6951</p>
</div>
</div>
<div class="xia">2020-2029 bucuo100.com, All Rights Reserved.</div>
</div>
</div>

</div>
</body>
</html>




🏠CSS样式代码


li {
	list-style: none;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

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

a:link {
	color: #333;
}

a:hover {
	color: #629705;
	text-decoration: none;
	overflow: hidden;
}

.main {
	width: 1200px;
	height: auto;
	overflow: hidden;
	min-height: 1000px;
	margin: 0 auto;
	background: #FFF;
}

.in-box01 {
	width: 1200px;
	height: 897px;
	background: url(../images/in01.jpg) no-repeat;
}

.in-box01-tit {
	font-size: 17px;
	color: #FFF;
	width: 130px;
	height: 28px;
	margin-left: 710px;
}

.logo {
	width: 95px;
	height: 344px;
	position: relative;
	top: 84px;
	left: 122px;
}

.sous {
	width: 263px;
	height: 45px;
	background: #9ea5ab;
	line-height: 45px;
	color: #FFF;
	font-size: 18px;
	padding-left: 10px;
	position: relative;
	left: 230px;
	top: -240px;
	line-height: 40px;
}

.inpu {
	width: 210px;
	height: 34px;
	margin-left: 10px;
}

.jies {
	width: 330px;
	height: 160px;
	margin-left: 220px;
	margin-top: -200px;
	padding-top: 20px;
}

.jis {
	width: 33px;
	height: 33px;
	background: url(../images/yinhao.jpg) no-repeat right;
	margin-left: 550px;
	margin-top: -190px;
}





五、🎁更多源码

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

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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,下面我会为你介绍一下如何使用 HTMLCSS 设计一个简单的点餐系统静态面。 首先,我们需要确定面的布局和功能。一个简单的点餐系统静态面包括以下几个部分: 1. 头部:包括网站的 Logo、导航栏和搜索框等; 2. 菜单:包括菜品的图片、名称、描述和价格等; 3. 购物车:显示用户已选菜品和总价; 4. 底部:包括网站的版权信息、联系方式和社交媒体链接等。 接下来,我们就可以开始编写 HTMLCSS 代码了。 HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>点餐系统</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <div class="logo">点餐系统</div> <nav> <ul> <li><a href="#">首</a></li> <li><a href="#">菜单</a></li> <li><a href="#">购物车</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <div class="search"> <input type="text" placeholder="请输入菜品名称"> <button>搜索</button> </div> </header> <main> <div class="menu-item"> <img src="menu1.jpg"> <h3>招牌红烧肉</h3> <p>这是一道非常美味的红烧肉</p> <span class="price">¥30</span> <button class="add-to-cart">加入购物车</button> </div> <div class="menu-item"> <img src="menu2.jpg"> <h3>麻辣香锅</h3> <p>这是一道非常辣的香锅</p> <span class="price">¥40</span> <button class="add-to-cart">加入购物车</button> </div> <div class="menu-item"> <img src="menu3.jpg"> <h3>清炒时蔬</h3> <p>这是一道非常健康的时蔬</p> <span class="price">¥20</span> <button class="add-to-cart">加入购物车</button> </div> <div class="cart"> <h3>购物车</h3> <ul> <li>招牌红烧肉 ¥30</li> <li>麻辣香锅 ¥40</li> <li>清炒时蔬 ¥20</li> <li>总价:¥90</li> </ul> <button class="checkout">结算</button> </div> </main> <footer> <div class="contact"> <p>联系我们</p> <p>地址:xxxxxx</p> <p>电话:xxxxxx</p> <p>邮箱:xxxxxx</p> </div> <div class="social-media"> <p>关注我们</p> <a href="#"><img src="weibo.png"></a> <a href="#"><img src="wechat.png"></a> <a href="#"><img src="qq.png"></a> </div> <p class="copyright">© 2021 点餐系统</p> </footer> </body> </html> ``` CSS 代码: ``` body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 10px; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 28px; font-weight: bold; } nav ul { list-style: none; display: flex; } nav li { margin-right: 20px; } nav a { color: #fff; text-decoration: none; } .search { display: flex; } .search input { padding: 5px; border: 1px solid #ccc; border-right: none; } .search button { padding: 5px 10px; background-color: #ccc; color: #fff; border: none; cursor: pointer; } main { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } .menu-item { width: calc(33.33% - 20px); margin-bottom: 20px; text-align: center; background-color: #f3f3f3; padding: 10px; box-shadow: 0 0 5px #ccc; } .menu-item img { max-width: 100%; } .menu-item h3 { font-size: 20px; margin-top: 10px; margin-bottom: 5px; } .menu-item p { font-size: 14px; color: #666; margin-bottom: 10px; } .menu-item .price { display: block; font-size: 18px; color: #f00; margin-bottom: 10px; } .menu-item .add-to-cart { padding: 5px 10px; background-color: #f00; color: #fff; border: none; cursor: pointer; } .cart { width: 30%; background-color: #f3f3f3; padding: 10px; box-shadow: 0 0 5px #ccc; } .cart h3 { font-size: 20px; margin-top: 0; margin-bottom: 10px; } .cart ul { list-style: none; padding: 0; margin: 0; } .cart li { margin-bottom: 10px; } .cart .checkout { padding: 5px 10px; background-color: #f00; color: #fff; border: none; cursor: pointer; } footer { background-color: #333; color: #fff; padding: 10px; display: flex; justify-content: space-between; align-items: center; } .contact { font-size: 14px; } .social-media { display: flex; align-items: center; } .social-media img { max-width: 30px; margin-right: 10px; } .social-media p { font-size: 14px; margin-right: 10px; } footer p { margin: 0; } footer a { color: #fff; text-decoration: none; } footer a:hover { text-decoration: underline; } ``` 以上就是一个简单的点餐系统静态面的 HTMLCSS 代码。你可以根据自己的需要进行修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

web学生网页设计

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

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

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

打赏作者

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

抵扣说明:

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

余额充值