前言

此为美食博客，虽然简洁但我会在后面一点点不断完善。相遇即是缘分，在此祝大家天天开心

一、网页效果

下面是美食博客主页

二、使用步骤

1.HTML的代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta  charset="utf-8"><title>中华美食博客</title><link rel="stylesheet" href="../css/123.css"></head><body><div id="box">  <div id="banner"><img src="../img/banner.jpg" alt="banner"></div><div id="menu"><ul><li><img src="../img/1.jpg" alt="aaa"><a href="index.html">网站首页</a></li><li><img src="../img/1.jpg" alt="aaa"><a href="js/1.美食介绍.html">美食介绍</a></li><li><img src="../img/1.jpg" alt="aaa"><a href="js/2.中华菜系.html">中华菜系</a></li><li><img src="../img/1.jpg" alt="aaa"><a href="js/3.美食图片.html">美食图片</a></li><li><img src="../img/1.jpg" alt="aaa"><a href="js/4.满汉全席.html">满汉全席</a></li><li><img src="../img/1.jpg" alt="aaa"><a href="js/5.在线留言.html">在线留言</a></li></ul></div><div id="main"><div id="left"><div id=zuozhe><img src="../img/baby.jpg" alt="小图标"><span>Chinese food</span></div><div id="huoli"><h2 class="biaoti">活力地带</h2><ul><li><img src="../img/2.jpg" alt="aaa"><a href="index.html">个人首页</a></li><li><img src="../img/3.jpg" alt="aaa"><a href="https://home.meishichina.com/recipe.html">菜谱大全</a></li><li><img src="../img/4.jpg" alt="aaa"><a href="https://baike.baidu.com/item/%E9%A5%AE%E9%A3%9F%E5%81%A5%E5%BA%B7/3939706">饮食健康</a></li><li><img src="../img/5.jpg" alt="aaa"><a href="https://home.meishichina.com/recipe-menu.html">美食菜单</a></li><li><img src="../img/6.jpg" alt="aaa"><a href="https://www.gpbctv.com/rjjc/202104/150175.html">各地小吃</a></li><li><img src="../img/7.jpg" alt="aaa"><a href="https://www.meishij.net/chufang/diy/guowaicaipu1/">外国菜谱</a></li></ul></div><div id="fenlei"><h2 class="biaoti">文章分类</h2><ul><li><a href="#">&nbsp;&nbsp;&nbsp;热菜</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;凉菜</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;汤羹</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;主食</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;小吃</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;西餐</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;甜品</a></li></ul></div> <div id="liebiao"><h2 class="biaoti">文章列表</h2><ul><li><a href="js/1.美食介绍.html">&nbsp;&nbsp;&nbsp;冰糖葫芦</a></li><li><a href="js/2.中华菜系.html">&nbsp;&nbsp;&nbsp;八大菜系</a></li><li><a href="js/3.美食图片.html">&nbsp;&nbsp;&nbsp;各类美食</a></li><li><a href="https://www.xiachufang.com/category/1000250/">&nbsp;&nbsp;&nbsp;番茄牛腩</a></li><li><a href="https://home.meishichina.com/recipe-497397.html">&nbsp;&nbsp;&nbsp;半熟芝士</a></li><li><a href="https://www.bilibili.com/video/BV1k3411y7rn/">&nbsp;&nbsp;&nbsp;宫廷花生酪</a></li><li><a href="https://www.bilibili.com/video/BV1gZ4y1K7t5/">&nbsp;&nbsp;&nbsp;彩虹千层酥蛋糕</a></li><li><a href="https://baijiahao.baidu.com/s?id=1710685345783326805">&nbsp;&nbsp;&nbsp;家庭版杨枝甘露</a></li><li><a href="https://www.meishichina.com/mofang/jiuniangtangyuan/">&nbsp;&nbsp;&nbsp;酒酿汤圆</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;银耳红枣南瓜羹</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;迷迭香烤小羊排</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;牛肉番茄意面</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;西冷牛排</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;奶油蘑菇汤</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;巧克力榛子蛋糕</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;哈根达斯冰淇淋</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;蜜汁烤五花肉</a></li><li><a href="#">&nbsp;&nbsp;&nbsp;花式糖醋里脊</a></li></ul></div></div><div id="right"><div id="right-1"><h3>家常番茄牛腩</h3><span>time：2022.10.23</span><p>强悍的牛肉与柔美的番茄在一起，散发着无穷的魅力，时间为媒，一刚一柔，终成绝配。红红的汤头香浓四溢，令人垂涎欲滴，牛腩鲜美软糯，粒粒挑逗食客的味蕾，忍不住食指大动，大快朵颐。外面是寒风凛冽的冰冷世界，里面站着饥肠辘辘冻得哆嗦的你，这个时候，家人为你端上热气蒸腾的番茄炖牛腩，连吃肉带喝汤，吃得心满意足，吃得浑身暖和，怎么吃怎么喝都不会长肉，只会为你增能量长力气，还有比它更好的贴膘菜吗？！
</p><p>汤底清寡不香浓？炒制番茄汤底是关键
</p><p>1、先煸炒洋葱，炒至透明状，香气四溢再下番茄；
</p><p>2、番茄要求炒至软烂起沙出汁，这是汤汁香浓的关键。
</p><p>番茄炖牛腩是道汤菜，菜和汤的比例各自为半，最美的就是牛腩刚好浸在浓汤中，连吃带喝风味无穷。汤底清寡不香浓？炒制番茄洋葱的汤头是关键！洋葱翻炒至透明逼出香气，番茄炒得起沙汁水丰盈，做对了这步，你的这道菜就成了。本就冲着吃肉来的，不必在意番茄颗粒消融，散于汤中，如果您喜欢保持番茄形不散，那也无法兼得香浓的汤头，这点像极了我们的人生，懂得选择，有舍有得。
</p><img src="img/10.jpg" alt="番茄牛腩"><p>1.牛腩肉在常温水中浸泡1小时，泡出血水，用厨房用纸把牛腩肉擦干。热锅冷油，放入牛腩块煎。</p><p>Tips：煎牛腩的方法可以锁住牛肉中间的水分，不会越煮越老，也不会越煮越小，炖的时间就算再长，也会Q嫩。
</p><p>2.煎至金黄之后，放在炖锅中备用。
</p><p>3.煎锅不用清洗，用牛腩析出的油脂来炒番茄。番茄切块，在锅中炒到起沙，用筷子挑出脱掉的番茄皮。（也可以提前烫掉番茄皮。）</p><p>4.Tips：番茄牛腩浓汤的秘诀就是番茄要炒起“沙”（如图）之后再加水炖。</p><p>5.加入少许白糖，加水煮沸。</p><p>6.倒入炖锅中，加入生抽酱油，盖上锅盖小火煮1个小时。
</p><p>7.牛肉已经软烂之后，加入切好块的土豆，在土豆上面加一勺番茄酱，继续焖煮半小时即可。</p><p>8.如果口味较重，可以出锅前再加一点盐来调味。
想吃到Q嫩的牛肉一定按照步骤来，千万不要煎好好的热牛肉中倒入冷水，一定会老！</p><p>9.上述步骤完了可以拌饭啦！</p><p>浏览[2046] | 评论[162]</p><p class="zhu">注：文字摘自网络</p></div><div id="right-2"><h3>港式杨枝甘露</h3><span>time：2022.10.23</span><p>主料：芒果3个(约1000g) 西米100g 西柚半个 椰浆180g 牛奶100g 白糖50g</p><img src="img/11.jpg" alt="杨枝甘露"><p>制作工艺：
</p><p>1、煮锅中坐水，大火煮沸后，加入西米，沸腾后转中火，煮大约15分钟，其间不断搅拌，防止黏锅底；</p><p>2、15分钟后盖上锅盖，关火焖5到10分钟，至西米基本没有白点，如果还有白点，可以再开火煮一会儿、焖一会儿；</p><p>3、捞出西米，用流动的水冲洗干净粘液；
</p><p>4、泡入冰开水中备用；</p><p>5、将牛奶、椰浆和白糖放进煮锅，小火加热至白糖融化，关火冷却备用；</p><p>6、将西柚剥去外皮，再撕去内层薄皮，剥出果肉，冷藏备用；</p><p>7、芒果去核取果肉，方法：横刀沿果核片下两片厚肉，在果肉上打花刀，从果皮一面往上一推，果肉丁立即成花状散开，再片下果肉丁即可;</p><p>8、留出一些整齐漂亮的芒果丁，冷藏以备装饰;</p><p>9、其余全部果肉放入料理机的搅拌缸，再加入冷却的椰浆牛奶糖液;
</p><p>10、搅打到均匀顺滑;
</p><p>11、将西米捞出，沥干水分，与芒果果浆混合，如果一时不吃，可以密封冷藏；</p><p>12、吃的时候，取适量芒果西米浆放入容器，再撒上西柚粒和芒果丁，即可。</p><p>浏览[2046] | 评论[162]</p><p class="zhu">注：文字摘自网络</p></div></div></div><div id="footer"><span>最终所有权归本人所有，如有侵权请第一时间联系我们&nbsp;&nbsp;&nbsp;邮箱：245******52@qq.com</span></div></div></body>
</html>

2.css代码

代码如下（示例）：

@charset "utf-8";
/* CSS Document */
*{margin: 0; padding: 0;}
body{background-color: skyblue;}
#box {width: 1024px;height: 1339px;margin: 0 auto;
}
#banner{width: 1024px;height: 209px;
}
#menu{height: 50px;line-height: 50px;width: 1024px;background-color: lightblue;
}
a{text-decoration: none;font-size: 16px;color: cornflowerblue;
}
#menu ul{list-style: none;width: 530px;height: 50px;line-height: 50px;margin-right: 5px;float: right;
}
#menu ul li{float: left;font-size: 36px;margin-left: 1px;list-style-type: none;
}
#main{height: 1000px;
}
#left{height: 1000px;width: 185px;background-color: aliceblue;float:left;
}
#left #zuozhe{text-align: center;margin-top: 20px;}
#left #zuozhe img{border: 3px solid royalblue;border-radius: 8px;padding: 10px;}
#left #zuozhe span{display: block;margin-top: 10px;border-top: 1px dashed darkblue;border-bottom: 1px dashed darkblue;
}
#left #huoli{margin-top: 10px;}
.biaoti{background-color: lightblue;color: lightcoral;font-family: 华文行楷;border-radius: 0px 5px 5px 0px;}
#left #huoli ul {list-style-type: none;float: left;
}
#left #huoli ul li{float: left;background-color: aliceblue;}
#left #fenlei ul li{list-style-type: none;background-image: url("../img/9.jpg");background-repeat: no-repeat;background-position: left center;margin-left: 5px;border-bottom: 1px dashed steelblue;}
#left #liebiao ul li{list-style-type: none;background-image: url("../img/9.jpg");background-repeat: no-repeat;background-position: left center;margin-left: 5px;border-bottom: 1px dashed steelblue;}
#liebiao li a{font-size: 16px;color: cornflowerblue;text-decoration: none;
}
#right{height:1000px;width:839px;background-color: azure;float: left;overflow: scroll;
}
#right h3{font-family: "微软雅黑";color: lightcoral;border-bottom: 3px dashed skyblue;padding-top: 12px;padding-bottom: 8px;text-shadow: 6px 6px 6px mediumaquamarine;padding-left: 30px;
}
#right #right-1 span{display: block;text-align: right;font-size: 12px;color: #999;
}
#right #right-2 span{display: block;text-align: right;font-size: 12px;color: #999;
}
p{text-indent: 2em;
}
#right #right-1 img{display: block;margin: auto;
}
#right #right-2 img{display: block;margin: auto;
}
p.zhu{font-size: 10px;color: #999;text-indent: 3em;
}
#footer{height: 80px;width: 1024px;line-height: 80px;background-color: lightsteelblue;clear: left;text-align: center;
}

总结

提示：在导入相关软件时候要对css进行链接。

结语：此美食博客，是将老师上课所讲的内容，进行美化和自定义，也希望大家借鉴的过程中，加入自己的思考，将这个博客完善更好，也是对自己的一种锻炼。

喜欢作者的可以一键三连，点个小关注，期待作者其他作品。

HTML+css前段美食博客（期末大作业）内有源代码相关推荐

html期末作业代码网页设计——云南民族文化(8页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
HTML5期末大作业:家乡文化网站设计--云南民族文化(8页) HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业常见网页设计作业题材有个人. 美食. 公司. ...
HTML+CSS+JS`管理系统网站设计——学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:管理系统网站设计--学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：管理系统网站设计——学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:管理系统网站设计--学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业常见网页设计作业题材有个人. 美食. ...
学生DW静态网页设计——代码质量好-家乡广州 (5页) HTML+CSS+JavaScript web网页制作期末大作业
HTML5期末大作业:家乡广州网站设计--代码质量好-家乡广州 (5页) HTML+CSS+JavaScript web网页制作期末大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游 ...
HTML5期末大作业：XXX 网站设计——电影请以你的名字呼唤我(4页)HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
HTML5期末大作业:XXX 网站设计--电影请以你的名字呼唤我(4页)HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：小礼品购物网站设计——小礼品购物商城网站(12页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:小礼品购物网站设计--小礼品购物商城网站(12页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业常见网页设计作业题材有个人. 美食. ...
html静态页面作业家乡介绍-南京(7页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:家乡介绍网站设计--家乡介绍-南京(7页) HTML+CSS+JavaScript html 文章目录 HTML5期末大作业:家乡介绍网站设计--家乡介绍-南京(7页) HTML ...
DIV布局——电影请以你的名字呼唤我(4页)HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
HTML5期末大作业:--电影请以你的名字呼唤我(4页)HTML+CSS+JavaScript html 文章目录 HTML5期末大作业:--电影请以你的名字呼唤我(4页)HTML+CSS+JavaS ...
js个人博客设计大作业
视频演示: 大作业演示图片看效果: 网站规划设计 1.结构设计共设计3个HTML界面:一个登陆界面,一个注册界面,以及主页面: 2.内容规划登陆界面包含logo,输入用户名,输入密码和登陆按 ...

HTML+css前段美食博客（期末大作业）内有源代码

文章目录

前言

一、网页效果

二、使用步骤

1.HTML的代码

2.css代码

总结

HTML+css前段美食博客（期末大作业）内有源代码相关推荐

最新文章

热门文章