- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

Web前端大作业—— 饮食餐饮网站咖啡网站pc端带轮播(5个页面)HTML+CSS+JavaScript 学生美食网页设计作品

IT司马青衫发表于 2022/08/13 16:39:35 2022/08/13

【摘要】 👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对...

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

@TOC

一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、网站描述✍️

🍧美食主题网站主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

三、网站介绍📚

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

📓网站程序方面：计划采用最新的网页编程语言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>
<html>
<head>
	<meta charset="UTF-8"> 
	<title>咖啡</title>	
	<link rel="stylesheet" href="css/style.css">	
</head>
<body>
<div class="content">
    <div class="header">
        <div class="logo"><a href="#"><img class=pic src="images/logo.png"></a></div>
        <div class="nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="kafei.html">咖啡及文化</a></li>
                <li><a href="meishi.html">美食与饮品</a></li>
                <li><a href="xinwen.html">美食新闻</a></li>
                <li><a href="liuyan.html">留言板</a></li>
            </ul>
        </div>
    </div>
    <div class="lunbo">   
        <div class="flashbox">
            <div id=SwitchBigPic>
                <div><a href="#"><img class="pic" src="images/01.jpg"></a></div>
				<div><a href="#"><img class="pic" src="images/02.jpg"></a></div>
                <div><a href="#"><img class="pic" src="images/03.jpg"></a></div>
				<div><a href="#"><img class="pic" src="images/04.jpg"></a></div>
                <div><a href="#"><img class="pic" src="images/05.jpg"></a></div>                           
            </div>
            <ul id=SwitchNav>
                <li><a href="#"><img src="images/01.jpg"><b>夏天是什么味道？</b></a> </li>
                <li><a href="#"><img src="images/02.jpg"><b>夏季甜点</b></a> </li>
                <li><a href="#"><img src="images/03.jpg"><b>美味香槟</b></a> </li>
                <li><a href="#"><img src="images/04.jpg"><b>各式点心</b></a> </li>
                <li><a href="#"><img src="images/05.jpg"><b>店长推荐</b></a> </li>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="tuijian">
        	<div class="title">原色咖啡新品推荐 </div>
			<ul>
            	<li><a href="#"><img src="images/tuijian1.jpg"><p>夏季饮品</p></a></li>
                <li><a href="#"><img src="images/tuijian2.jpg"><p>夏季饮品</p></a></li>
                <li><a href="#"><img src="images/tuijian3.jpg"><p>夏季饮品</p></a></li>
            </ul>
        </div>
        <div class="share">
        	<div class="title">分享到 <a  href="#"><img class=pic src="images/shrae.png" ></a></div>
            <p>QQ：12345678</p>
            <p>E-mail：<a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="05343736313033323d4574742b6666">[email&#160;protected]</a><script data-yjshash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></p>
        </div>
    </div>
    <div class="footer">
        <p> <a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="d83f51503e455b3e51583e4451983d7c573d757b3f4c443f5a61f53d564730516a3d4a4e3d4d79">[email&#160;protected]</a><script data-yjshash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> </p>
        <p> 京ICP备12345678号</p>
    </div>
	  <script src="js/changimages.js" type=text/javascript></script>
      <script src="js/prototype.js" type=text/javascript></script>
      <script>
        var bigswitch = new SwitchPic(
            {
                bigpic:"SwitchBigPic",
                switchnav:"SwitchNav",
                selectstyle:"selected",
                objname:"bigswitch"
            }
        ) ;
        bigswitch.goSwitch(bigswitch,0);
        bigswitch.autoSwitchTimer = setTimeout("bigswitch.autoSwitch(bigswitch) ;", 3000);
    </script>
</body>
</html>

CSS样式代码💒

@charset "utf-8";
* {
	padding:0;
	margin:0;
}
body {
	font-size:12px;
	font-family:arial;
	color:#595959;
}
img {
	border:none;
}
ul,li {
	list-style-type:none;
}
a {
	color:#333;
	text-decoration:none
}
a:hover {
	color:#ff0000;
	text-decoration:underline
}
.content {
	width:960px;
	height:auto;
	margin:auto;
	padding:20px;
	background:#fafafa;
}
.header {
	width:960px;
	height:80px;
	margin:10px auto;
}
.logo {
	width:120px;
	height:80px;
	float:left;
}
.logo img {
	display:block;
	height:72px;
	margin-top:4px;
}
.nav {
	height:80px;
	line-height:80px;
}
.nav li {
	float:left;
	padding:5px 20px;
}
.nav li a {
	font-size:24px;
	color:#333;
	font-weight:bold
}
.nav li a:hover {
	font-size:24px;
	color:#900;
	text-decoration:none;
}
/*轮播*/
.lunbo {
	width:960px;
	height:430px;
	margin:auto;
	margin-bottom:30px;
}
.flashbox {
	overflow:hidden;
	position:relative;
	width:100%;
	height:430px;
}
.flashbox .pic {
	width:760px;
	height:430px;
	position:absolute;
	left:0;
	top:0;
}
.flashbox ul {
	width:200px;
	height:340px;
	position:absolute;
	left:760px;
	top:0;
}
.flashbox li {
	margin-bottom:1px;
	overflow:hidden;
	line-height:24px;
	height:85px
}
.flashbox li a {
	display:block;
	padding-left:5px;
	padding-top:10px;
	padding-bottom:10px;
	background:#fff;
	color:#333;
	position:relative;
	height:65px
}
.flashbox li.selected a {
	background:#fff;
	color:#333;
	text-decoration:none
}
.flashbox li a:hover {
	background:#74685b;
	color:#333;
	text-decoration:none
}
.flashbox li img {
	width:100px;
	height:65px;
	float:left;
	margin-right:5px;
}
/*内容*/
.main {
	width:960px;
	margin:auto;
	overflow:hidden;
}
.tuijian {
	width:620px;
	height:180px;
	float:left;
}
.tuijian .title {
	height:30px;
	line-height:30px;
	border-bottom:2px solid #222;
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px;
}
.tuijian  li {
	width:190px;
	height:140px;
	float:left;
	margin-left:8px;
	margin-right:8px;
}
.tuijian  li img {
	width:190px;
	height:116px;
	display:block;
}
.tuijian  li p {
	height:24px;
	line-height:24px;
	background:#222;
	text-align:center;
}
.tuijian  li a {
	color:#fff;
}
.tuijian  li a:hover {
	text-decoration:underline;
}
.share {
	width:300px;
	height:180px;
	float:right;
}
.share .title {
	height:30px;
	line-height:30px;
	border-bottom:2px solid #222;
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px;
}
.share p {
	font-size:14px;
	line-height:26px;
	color:#666;
	text-align:left;
}
/*底部*/
.footer {
	width:960px;
	height:60px;
	margin:auto;
	border-top:6px solid #ff0000;
	background:#282828;
	color:#fff;
	padding-top:20px;
	margin-top:20px;
}
.footer p {
	text-align:center;
}
/*咖啡文化*/
.kafei {
	overflow:hidden;
}
.kafei .title {
	height:30px;
	line-height:30px;
	border-bottom:2px solid #222;
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px;
}
.kafei p {
	line-height:2;
	text-indent:24px;
}
.kafei img {
	display:block;
	width:100%;
	margin:10px 0;
}
/*美食饮品*/
.meishi {
	overflow:hidden;
}
.meishi .title {
	height:30px;
	line-height:30px;
	border-bottom:2px solid #222;
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px;
}
.meishi li {
	width:290px;
	float:left;
	margin:10px;
	border:5px solid #fff;
}
.meishi li img {
	width:290px;
	height:200px;
}
/*美食新闻*/
.xinwen .title {
	height:30px;
	line-height:30px;
	border-bottom:2px solid #222;
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px;
}
.xinwen li {
	height:40px;
	line-height:40px;
	border-bottom:1px dashed #ccc;
}
.xinwen li p {
	width:800px;
	float:left;
}
.xinwen li span {
	float:right;
}
/*留言*/
.liuyan .title {
	height:30px;
	line-height:30px;
	border-bottom:2px solid #222;
	font-size:16px;
	font-weight:bold;
	margin-bottom:8px;
}
.liuyan .input-box {
	width:600px;
	margin:auto;
	line-height:30px;
	margin-top:30px;
}
.liuyan .input-box input {
	width:500px;
	height:30px;

}
.liuyan .input-box textarea {
	width:500px;
	height:100px;
}
.liuyan .btn {
	width:600px;
	margin:auto;
	margin-top:30px;
	text-align:center;
}
.liuyan .btn input {
	width:100px;
	height:30px;
	margin:10px;
}

八、更多干货🎁

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

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

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

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

Web前端大作业—— 饮食餐饮网站咖啡网站pc端带轮播(5个页面)HTML+CSS+JavaScript 学生美食网页设计作品

一、网站题目👨‍🎓

二、网站描述✍️

三、网站介绍📚

四、网站效果🌐

五、代码实现 🪓

HTML结构代码🧱

CSS样式代码💒

八、更多干货🎁

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

Web前端大作业—— 饮食餐饮网站 咖啡网站pc端带轮播(5个页面)HTML+CSS+JavaScript 学生美食网页设计作品

一、网站题目👨‍🎓

二、网站描述✍️

三、网站介绍📚

四、网站效果🌐

五、代码实现 🪓

HTML结构代码🧱

CSS样式代码💒

八、更多干货🎁

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

Web前端大作业—— 饮食餐饮网站咖啡网站pc端带轮播(5个页面)HTML+CSS+JavaScript 学生美食网页设计作品