👨🎓静态网站的编写主要是用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结构代码🧱
<!DOCTYPE html><html><head><title>用户登录</title><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" type="text/css" href="css/less.css"><link rel="stylesheet" type="text/css" href="css/basic.css"><link rel="stylesheet" type="text/css" href="css/style.css"><script src="css/jquery.js" language="javascript"></script></head><body><div class="wrapper" style="background-color: white;"><div class="login-top"><div style="height: 60px;background-color: white;"><div style=";margin-left: 160px;"><img src="images/log_1.jpg" /></div><div style="float:right;margin-top: -34px;width: 360px;font-size: 12px;"><span>返回首页</span><span>|</span><span>忘记密码</span><span>|</span><span>在线客服</span></div></div><div class="login-topBg"><div class="login-topBg1"><div class="login-topStyle"><div class="login-topStyle3" id="jqk" style="display:block;margin-top: 75px;"><div style="float:left; width:50%; height:50px"><h3>用户登录</h3></div><div style="float:right;margin-top: 12px;cursor:pointer;" onclick="f_test()">员工登陆</div><div class="ui-form-item loginUsername"><input type="username" placeholder="用户名/手机号/密码"></div><div class="ui-form-item loginPassword"><input type="password" placeholder="请输入密码"></div><div class="ui-form-item loginPassword"><input type="text" style="width:130px" placeholder="验证码"><img src="images/yzm.jpg" style="height:33px;float:right;"></div><div class="login_reme"><input type="checkbox"><a class="reme1" style="color:#ffffff;">记住账号</a> <a class="reme2" href="#">忘记密码?</a></div><span class="error_xinxi" style="display:none;">您输入的密码不正确，请重新输入</span><a class="btnStyle btn-register" href="#"> 立即登录</a></div><div class="login-topStyle3" id="jql" style="display:none;margin-top: 75px;"><div style="float:left; width:50%; height:50px"><h3>员工登录</h3></div><div style="float:right;margin-top: 12px;cursor:pointer;" onclick="f_test()">用户登陆</div><div class="ui-form-item loginUsername"><input type="username" placeholder="请输入您的工号"></div><div class="ui-form-item loginPassword"><input type="password" placeholder="请输入密码"></div><span class="error_xinxi" style="display:none;">您输入的密码不正确，请重新输入</span><a class="btnStyle btn-register" href="#"> 员工登录</a></div></div></div></div></div><div class="loginCen" style="margin-top: 55px;"><div class="login-center"><div class="loginCenter-moudle"><div class="loginCenter-moudleLeft" style="margin-right: 60px;"> </div><div class="loginCenter-moudleRight" style=" width: 100%;"><div class="main_news"><div class="news_01"><div class="news_title"><h2>大闸蟹</h2><b><a href="#" title="大闸蟹">更多>></a></b></div><ul><li><a href="#" title="大闸蟹的10种做法">大闸蟹的10种做法</a></li><li><a href="#" title="如何做出美味的大闸蟹">如何做出美味的大闸蟹</a></li><li><a href="#" title="购买大闸蟹注意事项">购买大闸蟹注意事项</a></li><li><a href="#" title="大闸蟹为什么要捆草绳呢">大闸蟹为什么要捆草绳呢</a></li><li><a href="#" title="如何分辨大闸蟹的好坏">如何分辨大闸蟹的好坏</a></li><li><a href="#" title="海鲜市场有多大">海鲜市场有多大</a></li><li><a href="#" title="大闸蟹的营养价值">大闸蟹的营养价值</a></li><li><a href="#" title="大闸蟹的养殖方法">大闸蟹的养殖方法</a></li><li><a href="#" title="这几类人不适合吃大闸蟹">这几类人不适合吃大闸蟹</a></li><li><a href="#" title="不宜食用大闸蟹的时间段">不宜食用大闸蟹的时间段</a></li></ul><div class="news_bot"></div></div><div class="news_01"><div class="news_title"><h2>小龙虾</h2><b><a href="#" title="小龙虾">更多>></a></b></div><ul><li><a href="#" title="大闸蟹的10种做法">小龙虾的10种做法</a></li><li><a href="#" title="如何做出美味的大闸蟹">如何做出美味的小龙虾</a></li><li><a href="#" title="购买大闸蟹注意事项">购买小龙虾注意事项</a></li><li><a href="#" title="大闸蟹为什么要捆草绳呢">小龙虾为什么要捆草绳呢</a></li><li><a href="#" title="如何分辨大闸蟹的好坏">如何分辨小龙虾的好坏</a></li><li><a href="#" title="海鲜市场有多大">海鲜市场有多大</a></li><li><a href="#" title="大闸蟹的营养价值">小龙虾的营养价值</a></li><li><a href="#" title="大闸蟹的养殖方法">小龙虾的养殖方法</a></li><li><a href="#" title="这几类人不适合吃大闸蟹">这几类人不适合吃小龙虾</a></li><li><a href="#" title="不宜食用大闸蟹的时间段">不宜食用小龙虾的时间段</a></li></ul><div class="news_bot"></div></div><div class="news_01"><div class="news_title"><h2>鱼类</h2><b><a href="#" title="鱼类">更多>></a></b></div><ul><li><a href="#" title="草鱼的10种美味做法">草鱼的5种美味做法</a></li><li><a href="#" title="黄鳝的10种美味做法">黄鳝的7种美味做法</a></li><li><a href="#" title="鲤鱼的10种美味做法">鲤鱼的3种美味做法</a></li><li><a href="#" title="鲫鱼的10种美味做法">鲫鱼的6种美味做法</a></li><li><a href="#" title="泥鳅的10种美味做法">泥鳅的10种美味做法</a></li><li><a href="#" title="草鱼的10种美味做法">草鱼的营养价值</a></li><li><a href="#" title="黄鳝的10种美味做法">黄鳝的营养价值</a></li><li><a href="#" title="鲤鱼的10种美味做法">鲤鱼的营养价值</a></li><li><a href="#" title="鲫鱼的10种美味做法">鲫鱼的营养价值</a></li><li><a href="#" title="泥鳅的10种美味做法">泥鳅的营养价值</a></li></ul><div class="news_bot"></div></div><div class="news_01" id="news_011"><div class="news_title"><h2>海鲜公告</h2><b><a href="#" title="本站公告">更多>></a></b></div><ul><li class="r"><a href="#" title="中秋节放假通知">中秋节放假通知</a></li><li><a href="#" title="企业员工中秋节福利领取">企业员工中秋节福利领取</a></li><li><a href="#" title="企业员工中秋节福利领取">企业员工中秋节福利领取</a></li><li><a href="#" title="企业员工中秋节福利领取">企业员工中秋节福利领取</a></li><li><a href="#" title="企业员工中秋节福利领取">企业员工儿童节福利领取</a></li><li><a href="#" title="企业员工中秋节福利领取">企业员工教师节福利领取</a></li><li><a href="#" title="企业员工中秋节福利领取">企业员工国庆节福利领取</a></li><li><a href="#" title="企业员工中秋节福利领取">企业员工劳动节福利领取</a></li><li><a href="#" title="企业员工中秋节福利领取">企业单身员工情人节福利领取</a></li><li><a href="#" title="企业员工中秋节福利领取">企业员工春节福利领取</a></li></ul><div class="news_bot"></div></div></div></div></div></div></div><div class="footer"> <span class="footerText">Copyright © 1995- 北京市某某海鲜城 ICP备: 12345678号</span> </div></div></body></html>
CSS样式代码💒
@charset "utf-8";/* CSS Document *//*ҳ湫Ԫʽʼ*//*¼ҳʽʼ*/.wrapper {background-color: #f5f5f5;width: 100%;min-width: 1190px;color: #666;}.login-top {height: 480px;width: 100%;}.login-topBg {background: url(../images/login_img.jpg) center center no-repeat #fff;height: 480px;min-width: 1190px;}.login-topBg1 {height: 480px;}.login-topTab {height: 84px;width: 100%;text-align: center;}.login-topTabBg {width: 1190px;margin: 0px auto;}.login-topTab-logo {float: left;padding: 18px 0px;}.login-topTab-logo img {display: inline-block;}.login-topTab-right {float: right;padding: 35px 0px;}span.login_text_right_language {padding-right: 2px;padding-left: 15px;color: #ffffff;font-size: 14px;cursor: pointer;}span.login_text_right_language img {vertical-align: middle;margin-left: 5px;display: inline-block;}.login-topStyle {color: #ffffff;font-family: ;width: 1190px;position: relative;margin: 0px auto;}.login-topStyle1 {display: inline-block;padding-top: 90px;padding-left: 172px;}span.loginStyle1 {font-size: 16px;line-height: 24px;display: block;font-family: "ź";}span.loginStyle2 {display: inline-block;font-size: 72px;font-family: "ź";}.login-topStyle2 {text-align: center;padding: 34px 0px;}a.btnStyle {font-size: 20px;line-height: 30px;width: 300px;border-radius: 5px;display: inline-block;}a.btnStyle.btnLogin {background-color: #3598db;padding: 10px 0px;margin-right: 120px;}a.btnStyle.btnLogin:hover {background-color: #3ea1e3;}a.btnStyle.btnregister {border: 1px solid #ffffff;padding: 8px 0px;color: #ffffff;}a.btnStyle.btnregister:hover {background-color: rgba(255, 255, 255, 0.3);}/*¼ʽʼ*/.login-topStyle3 {background: url(../images/login_bg_white.png) center center repeat;width: 228px;height: auto;overflow: hidden;top: 34px;right: 50px;position: absolute;border-radius: 5px;padding: 22px 30px;}.login-topStyle3 h3 {font-size: 22px;line-height: 33px;color: #ffffff;padding-bottom: 22px;font-family: "ź";}.ui-form-item {margin-bottom: 10px;font-size: 12px;line-height: 18px;}.ui-form-item.loginUsername input[type="username"],.ui-form-item.loginPassword input[type="password"],.ui-form-item.loginPassword input[type="text"] {width: 100%;border: none;border: 1px solid #ffffff;padding: 8px 0px 8px 5px;}.ui-form-item.loginPassword {}.ui-form-item.loginPassword input[type="password"] {}.login_reme {padding-bottom: 8px;margin-top: 20px\0;}.login_reme a.reme1 {font-size: 12px;line-height: 18px;vertical-align: top;}.login_reme a.reme2 {font-size: 12px;vertical-align: top;margin-left: 97px;color: #ffffff;}span.error_xinxi {font-size: 14px;line-height: 22px;}a.btn-Login,a.btn-register {width: 228px;font-size: 14px;line-height: 22px;text-align: center;padding: 8px 0px;margin: 10px 0px 0px 0px;cursor: pointer;}a.btn-Login {color: #3598db;background-color: #ffffff;}a.btn-Login:hover {opacity: 0.8;}a.btn-register {color: #ffffff;background-color: #3598db;}a.btn-register:hover {background-color: #3ea1e3;}.loginCen {width: 100%;}.login-center {background: url(../images/login-center-bg.png) center center no-repeat;width: 100%;/*height: 140px;*/margin: 20px auto 0px auto;position: relative;}.loginCenter-moudle {padding: 0px 0px 30px 0px;overflow: hidden;/*height: 140px;*/}.loginCenter-moudleLeft {float: left;margin-top: 9px;margin-right: 28px;font-weight: bold;}.loginCenter-moudleLeft span {display: block;}.loginCenter-moudleLeft span.number {color: #fb5016;font-size: 48px;line-height: 72px;}.loginCenter-moudleLeft span.text {font-size: 14px;line-height: 22px;color: #4c4c4c;}.loginCenter-moudleRight {overflow: hidden;float: left;width: 992px;/*height: 140px;*/}.loginCenter-moudleRight a.loginCenter-mStyle {width: 335px;position: relative;top: 50%;margin-top: -35px;}.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle1 {width: 312px;-moz-width: 312px;float: left;margin-right: 5px;}.loginCenter-moudleRight a span.moudle-img {height: 64px;width: 64px;float: left;padding-right: 5px;}.loginCenter-moudleRight a span.moudle-img img {}.loginCenter-moudleRight a span.moudle-text {display: inline-block;-moz-width: 242px;-webkit-width: 262px;text-align: left;position: relative;top: 50%;margin-top: 8px;}.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle3 span.moudle-text {margin-top: 4px;}.loginCenter-moudleRight a span.moudle-text .moudle-text1 {font-size: 18px;line-height: 26px;display: block;color: #767676;text-align: left;font-family: ź;}.loginCenter-moudleRight a span.moudle-text .moudle-text2 {font-size: 14px;font-family: ź;line-height: 18px;color: #969696;}.loginCenter-moudleRight a span.moudle-text .moudle-text3 {font-size: 12px;line-height: 22px;display: block;}.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle2 {float: left;margin-right: 5px;}.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle1.moudle1 span.moudle-text {top: -19px;left: -60px;}.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle2.moudle2 span.moudle-text {top: -37px;left: -40px;}.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle3.moudle3 span.moudle-text {top: -19px;left: -56px;}.loginCenter-moudleRight a.loginCenter-mStyle.loginCenter-moudle3 {float: left;}/*ʾϢʽ*/.error-information {color: #d02e50;font-size: 12px;padding-bottom: 3px;}/*¼ҳģʽ*//*¼ҳʽ*//*footerʽ*/.footer {height: 60px;background-color: #e1e1e1;width: 100%;text-align: center;margin-top: 20px;line-height: 60px;min-width: 1190px;}.footer span.footerText {font-size: 14px;font-family: ;color: #606060;display: inline-block;}
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
