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

news2024/12/23 5:54:50

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2080229.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MyBatis缓存机制 ▎特殊符号处理

前言: MyBatis 的缓存机制通过一级缓存和二级缓存显著提升系统性能。一级缓存在 SQL 会话中减少重复查询&#xff0c;二级缓存跨会话共享查询结果&#xff0c;但引入了数据一致性和内存管理的挑战。开发者需平衡性能与数据准确性。此外&#xff0c;MyBatis 还提供了多种方法来…

力扣经典题目之->二叉树的前序遍历

一&#xff1a;题目 解释&#xff1a; 1&#xff1a; 题目的要求就是我们return 一个数组&#xff0c;该数组里面的元素及其顺序就是 前序遍历二叉树 的元素及其顺序 比如&#xff1a;示例1的树&#xff0c;前序遍历的顺序应该是1 2 3&#xff0c;那么return 的数组里面的元素…

Java面试题--JVM大厂篇之JVM大厂面试题及答案解析(8)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的博…

Linux开发环境搭建,虚拟机安装

开发环境搭建 一、VMware Workstation Pro软件简介 VMware Workstation Pro 是 VMware &#xff08;威睿公司&#xff09;发布的一代虚拟机软件&#xff0c;中文名称一般称 为 "VMware 工作站 ". 它的主要功能是可以给用户在单一的桌面上同时运行不同的操作系统…

安装WMware和Ubuntu并使用xShell连接

0、我的电脑配置 设备名称 hello 处理器 Intel(R) Core(TM) i7-10700K CPU 3.80GHz 3.79 GHz 机带 RAM 16.0 GB (15.9 GB 可用) 设备 ID 541EC230-9910-418C-9043-5FBBF8ED320C 产品 ID 00330-80000-00000-AA846 系统类型 64 位操作系统, 基于 x64 的处理器 笔和触控 没有可…

秃姐学AI系列之:残差网络 ResNet

目录 残差网络——ResNet 残差块思想 ResNet块细节 ResNet架构 总结 代码实现 残差块 两种 ResNet 块的情况 ResNet 模型 QA 由上图发现&#xff0c;只有当较复杂的函数类包含较小的函数类时&#xff0c;才能确保提高它们的性能。 对于深度神经网络&#xff0c;如果…

QGIS制图流程

在之前我们推送了QGIS的软件安装、插件安装、数据导入等基础操作&#xff0c;今天我们介绍一下QGIS的制图功能。QGIS的制图与ArcGIS Pro存在一定的区别&#xff0c;但是思路上相似。我们教程内容主要是参考QGIS官方文档&#xff1a; https://docs.qgis.org/3.34/en/docs/user_…

Android 中ebpf 的集成和调试

1. BPF 简介 BPF&#xff0c;是Berkeley Packet Filter的简称&#xff0c;最初构想提出于 1992 年。是一种网络分流器和数据包过滤器&#xff0c;允许早操作系统级别捕获和过滤计算机网络数据包。它为数据链路层提供了一个原始接口&#xff0c;允许发送和接收原始链路层数据包…

安卓中回调函数的使用

在Android开发中&#xff0c;回调函数是一种常见的编程模式&#xff0c;用于在某个任务完成时异步接收通知或数据。它们通常用于处理用户界面事件、完成网络请求、数据库操作或其他长时间运行的任务。回调&#xff08;Callback&#xff09;是一种允许某段代码通知另一段代码执行…

机器人学——机械臂轨迹规划-2

直线轨迹 线段转折点速度不连续 加速度状态讨论 double dot 多段直线轨迹&#xff0c;转折点利用二次方程转为圆弧 关键步骤 第一个线段处理 Vt V0 at , 此处的V0 0 , 利用函数连续性&#xff0c;左右速度相等&#xff0c;联立求解 sgn(x):符号函数 最后一个线段…

dubbo:dubbo服务负载均衡、集群容错、服务降级、服务直连配置详解(五)

文章目录 0. 引言1. dubbo负载均衡1.1 负载均衡算法1.2. dubbo负载均衡使用1.3 自定义负载均衡策略 2. dubbo服务容错2.1 8种服务容错策略2.2 自定义容错策略 3. dubbo服务降级&#xff08;mock&#xff09;4. dubbo服务直连5. 总结 0. 引言 之前我们讲解了dubbo的基本使用&am…

内部类java

内部类就是定义在一个类里面的类&#xff0c;里面的类可以理解成&#xff08;寄生&#xff09;&#xff0c;外部类可以理解成&#xff08;寄主&#xff09;。 //外部类 public class people{//内部类public class heart{} } 内部类的使用场景、作用 1.当一个事物的内部&…

STM32学习笔记3---ADC,DMA

目录 ADC模拟数字转换器 规则组的四种转换模式 AD单通道 AD多通道 常用代码函数相关 DMA直接存储器 存取&#xff08;访问&#xff09; 两个应用 DMA存储器到存储器的转运 ADCDMA ADC模拟数字转换器 stm32数字电路&#xff0c;只有高低电平&#xff0c;无几V电压的概念…

MySQL:常用函数

MySQL&#xff1a;常用函数 日期时间函数字符串函数数学函数加密函数 在MySQL中&#xff0c;存在许多现成的函数&#xff0c;可以简化部分操作&#xff0c;本博客讲解MySQL中的常用函数。 日期时间函数 current_date current_date函数用于输出当前的日期&#xff1a; curren…

一道关于php文件包含的CTF题

一、源码 这是index.php的页面。 点击login后会发现url里多了action的参数&#xff0c;那么我们就可以通过它来获取源码。 ?actionphp://filter/readconvert.base64-encode/resourcelogin.php 再通过base64的解码可以查看源码。 index.php源码&#xff1a; <?php erro…

【编码解码】CyberChef v10.18.9

下载地址 【编码解码神器】CyberChef v10.18.9 在线地址 CyberChef (gchq.github.io) 简介 CyberChef 是一个简单易用的网页应用&#xff0c;&#xff0c;包含了四百多种在线编解码工具。它在浏览器中执行各种“网络安全”操作。这些操作包括简单的 XOR 和 Base64 编码、复…

基于单片机的无线空气质量检测系统设计

本设计以STC89C52单片机为核心&#xff0c;其中包含了温湿度检测模块、光照检测模块、PM2.5检测模块、报警电路、LCD显示屏显示电路、按键输入模块和无线传输模块来完成工作。首先&#xff0c;系统可以通过按键输入模块设置当前的时间和报警值&#xff1b;使用检测模块检测当前…

spring boot(学习笔记第十九课)

spring boot(学习笔记第十九课) Spring boot的batch框架&#xff0c;以及Swagger3(OpenAPI)整合 学习内容&#xff1a; Spring boot的batch框架Spring boot的Swagger3&#xff08;OpenAPI&#xff09;整合 1. Spring boot batch框架 Spring Batch是什么 Spring Batch 是一个…

个人网站免费上线

声明一下&#xff0c;小科用的是natapp&#xff0c;进行的 1.起步-下载安装 去浏览器搜索" natapp "&#xff0c;在官网下载&#xff0c;或者直接 点击下列网站 NATAPP-内网穿透 基于ngrok的国内高速内网映射工具https://natapp.cn/ 打开后下滑找到下载&#xff…

JMeter Plugins之内网插件问题解决

JMeter Plugins之内网插件问题解决 背景 在我司内部进行JMeter工具进行性能脚本开发时&#xff0c;为了提高测试效率&#xff0c;我们会用到部分JMeter提供的插件&#xff0c;但是在我司内网的情况下&#xff0c;我们如果直接点击JMeter界面右上角的插件按钮 弹出来的JMeter…