HTML+CSS美食静态网页设计——简单牛排美食餐饮(9个页面)公司网站模板企业网站实现

创始人

2024-04-15 17:43:20

0次

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

🎀 精彩专栏推荐👇🏻👇🏻👇🏻

🧡 【作者主页——🔥获取更多优质源码】
🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录📂

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📚
四、网站效果🌐
五、代码实现 🪓
- HTML结构代码🧱
- CSS样式代码💒
八、更多干货🎁

一、网站题目👨‍🎓

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

二、网站描述✍️

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

三、网站介绍📚

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

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


首页首页
品牌故事
美食系列
店面展示
新闻资讯
关于我们
新品推荐
茶漱海鲜汤
玉米海螺沟
芝士蛋糕卷
芝士大虾
西冷牛排
草莓布丁杯
黑椒牛排
茶漱海鲜汤
西冷牛排
草莓布丁杯
黑椒牛排
茶漱海鲜汤
茶漱海鲜汤
玉米海螺沟
芝士蛋糕卷
芝士大虾
芝士蛋糕卷
芝士大虾
茶漱海鲜汤
玉米海螺沟
黑椒牛排
西冷牛排
草莓布丁杯
茶漱海鲜汤
公司简介
贵族食代牛排是昔日的台湾首富、台湾知名企业贵族食代集团董事长王永庆先生招待贵宾的知名私房料理。严选一头牛的第六至第八对肋骨这六块牛排。是以“一头牛仅供6客”的贵族食代牛排为招牌菜的中高价位直营连锁西餐厅，独具中国口味，全熟牛排，鲜嫩多汁，适合中国人口味，以菜色精致、好吃、服务好、风格高雅、管理专业着称。
何谓经典，可能就是在品鉴无数美食后，其绝妙的滋味仍旧不能被替代。再次品味时，仍能激起内心的波澜与感动。如此经典，我们将为您重新诠释。全新的摆盘，搭配特制爽口的配菜，全熟风味，您不可辜负的舌尖美味。
2003年登陆大陆，截至目前，贵族食代牛排在上海、北京、深圳、广州、南京、武汉、成都、重庆等地已经有40余家直营店，成为高端连锁牛排的领导品牌。
新闻资讯
贵族食代牛排东莞厚街万达餐厅开业
2016-09-28贵族食代牛排无锡大成巷餐厅开业
2016-09-23贵族食代牛排武汉黄陂广场餐厅开业
2016-09-20贵族食代牛排福州永嘉天地餐厅开业
2016-09-17贵族食代牛排网络大学第一批“学霸”亮相
2016-09-14华南市场2016半年度餐厅经理营运会召开
2016-09-05浙江大区召开餐厅经理营运会议
2016-09-238月15日 贵族食代牛排武汉武商众圆餐厅开业
2016-09-15
友情链接
CopyRight©2003-2015 www.91cy.cn All rigt rederved
版权所有：贵族食代牛排有限公司  来源:源码之家
ICP备案号：京ICP备16047255号-3本站信息由会员自主添加，如信息涉及隐私等，网站不承担任何责任！

CSS样式代码💒

@charset "utf-8";
html{min-width: 1280px;
}
.nav{width: 1080px;margin: 0 auto;
}
.logo{display: block;background: url(../img/logo.png) no-repeat center;width: 234px;height: 80px;float: left;padding: 4px;
}
.nav-wrap{float: right;
}
.nav-wrap>li,.nav-item{float: left;line-height: 88px;width: 138px;text-align: center;color: #533336;font-size: 18px;
}
.nav-item:hover{background-color: #533336;color: #fff;
}
.nav-wrap .nav-active{background-color: #533336;color: #FFFFFF;
}
/*banner*/
#container { border-top: 10px solid #533336;max-width: 1920px; height:500px; overflow: hidden; position: relative;background:url(../img/banner1.jpg) no-repeat 50% 0px;
}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 80px; left: 50%;margin-left: -36px;
}
#buttons span {cursor: pointer; float: left; border: 2px solid #fff; width: 18px; height: 18px; border-radius: 50%; background: #333; margin-right: 8px;
}
#buttons .on {  background: #fff;
}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 50%; color: #fff;
}