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

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

文章目录


一、作品介绍

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

二、作品演示





三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<!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>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!

🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

💙2.想要获取本文源码,点击前往吧

相关推荐
Lupino5 分钟前
被 React “玩弄”的 24 小时:为了修一个不存在的 Bug,我给大模型送了顿火锅钱
前端·react.js
米丘11 分钟前
了解 Javascript 模块化,更好地掌握 Vite 、Webpack、Rollup 等打包工具
前端
Heo13 分钟前
深入 React19 Diff 算法
前端·javascript·面试
滕青山14 分钟前
个人所得税计算器 在线工具核心JS实现
前端·javascript·vue.js
小怪点点15 分钟前
手写promise
前端·promise
国思RDIF框架24 分钟前
RDIFramework.NET Web 敏捷开发框架 V6.3 发布 (.NET8+、Framework 双引擎)
前端
Mintopia25 分钟前
如何在有限的时间里,活出几倍的人生
前端
炫饭第一名25 分钟前
速通Canvas指北🦮——变形、渐变与阴影篇
前端·javascript·程序员
Neptune126 分钟前
让我带你迅速吃透React组件通信:从入门到精通(上篇)
前端·javascript
阿懂在掘金27 分钟前
Vue 表单避坑(一):为什么 v-model 绑定对象属性会偷偷修改父组件数据?
前端·vue.js