提示：参考时，可加入自己的想法，可在评论区给我留言。
前言
此为美食博客，虽然简洁但我会在后面一点点不断完善。相遇即是缘分，在此祝大家天天开心
一、网页效果
下面是美食博客主页
二、使用步骤
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="#"> 热菜</a></li> <li><a href="#"> 凉菜</a></li> <li><a href="#"> 汤羹</a></li> <li><a href="#"> 主食</a></li> <li><a href="#"> 小吃</a></li> <li><a href="#"> 西餐</a></li> <li><a href="#"> 甜品</a></li> </ul> </div> <div id="liebiao"> <h2 class="biaoti">文章列表</h2> <ul> <li><a href="js/1.美食介绍.html"> 冰糖葫芦</a></li> <li><a href="js/2.中华菜系.html"> 八大菜系</a></li> <li><a href="js/3.美食图片.html"> 各类美食</a></li> <li><a href="https://www.xiachufang.com/category/1000250/"> 番茄牛腩</a></li> <li><a href="https://home.meishichina.com/recipe-497397.html"> 半熟芝士</a></li> <li><a href="https://www.bilibili.com/video/BV1k3411y7rn/"> 宫廷花生酪</a></li> <li><a href="https://www.bilibili.com/video/BV1gZ4y1K7t5/"> 彩虹千层酥蛋糕</a></li> <li><a href="https://baijiahao.baidu.com/s?id=1710685345783326805"> 家庭版杨枝甘露</a></li> <li><a href="https://www.meishichina.com/mofang/jiuniangtangyuan/"> 酒酿汤圆</a></li> <li><a href="#"> 银耳红枣南瓜羹</a></li> <li><a href="#"> 迷迭香烤小羊排</a></li> <li><a href="#"> 牛肉番茄意面</a></li> <li><a href="#"> 西冷牛排</a></li> <li><a href="#"> 奶油蘑菇汤</a></li> <li><a href="#"> 巧克力榛子蛋糕</a></li> <li><a href="#"> 哈根达斯冰淇淋</a></li> <li><a href="#"> 蜜汁烤五花肉</a></li> <li><a href="#"> 花式糖醋里脊</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>最终所有权归本人所有，如有侵权请第一时间联系我们 邮箱：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进行链接。
结语：此美食博客，是将老师上课所讲的内容，进行美化和自定义，也希望大家借鉴的过程中，加入自己的思考，将这个博客完善更好，也是对自己的一种锻炼。
喜欢作者的可以一键三连，点个小关注，期待作者其他作品。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
