HTML静态网页成品作业(HTML+CSS)——西点蛋糕介绍(5个页面)

2025/1/18 12:36:16 来源：https://blog.csdn.net/2301_78945238/article/details/141603552 浏览: 次关键词：HTML静态网页成品作业(HTML+CSS)——西点蛋糕介绍(5个页面)

🎉不定期分享源码，关注不丢失哦

文章目录

一、作品介绍
二、作品演示
三、代码目录
四、网站代码
- HTML部分代码
五、源码获取

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有5个页面。

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body><div class="main"><div class="logo"><a href="index.html"><img src="./images/logo.png"></a></div><div class="nav"><ul><li class="on"><a href="index.html">首页</a></li><li><a href="jianjie.html">西点简介</a></li><li><a href="fenlei.html">西点分类</a></li><li><a href="zhanshi.html">西点展示</a></li><li><a href="zuofa.html">西点做法</a></li></ul></div><div class="banner"><img src="./images/banner.jpeg"></div><div class="whitebg"><div class="type"><h3>SWEETY SWEET</h3><div class="type_list"><div class="type_item"><img src="./images/1.png"><div>提拉米苏</div></div><div class="type_item"><img src="./images/2.png"><div>布丁</div></div><div class="type_item"><img src="./images/3.png"><div>芝士蛋糕</div></div><div class="type_item"><img src="./images/4.png"><div>泡芙</div></div><div class="type_item"><img src="./images/5.png"><div>马卡龙</div></div></div></div><div class="desc"><div class="desc_text">西式的甜品花团锦簇，尤以意、法为盛。提拉米苏（Tiramisu）和萨芭雍（Sabayon）这种华丽的甜点一出场，餐桌就变成了春装发布会的天桥。</div></div><div class="img_list"><img src="./images/i1.jpg"><img src="./images/i2.jpg"><img src="./images/i3.jpg"></div></div><div class="footer"><div><img src="./images/logo.png"></div><div class="footer_text">据说品尝一块自己钟爱甜品的幸福感相当于得到心仪汉子的十个熊抱~现在马上就到了春暖花开季节，春季旅游也被许多妹子提上了行程，<br>
某甜品站推荐超级有特色甜品咖啡屋，想一想如果来一个甜品之旅是多么幸福，快到甜品店体验甜蜜如初恋的滋味吧~放松心情的时候到了，你还在等什么呢?</div></div></div>
</body>
</html>