HTML静态网页成品作业(HTML+CSS)——美食企业介绍设计制作(1个页面)

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

文章目录

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


一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<div class="top w">
		<img class="banner" src="./images/banner.png" alt="">
		<div class="top_abs">
			<h1>行者食巷精品菜制作</h1>
			<h1>美味可口</h1>
			<a href="">了解详情</a>
		</div>
		
		<div class="dots">
			<div class="dot"></div>
			<div class="dot"></div>
			<div class="dot ac"></div>
			<div class="dot"></div>
			<div class="dot"></div>
		</div>
		<div class="header">
			<ul>
				<li>
					<a href="">
						<div class="navimg">
							<img src="./images/logo.png" alt="">
						</div>
						<div class="nav_txt">
							首页产品
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div class="nav_txt">
							关于集团
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div class="nav_txt">
							服务与支持
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div class="nav_txt">
							可持续发展
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div class="nav_txt">
							人才招聘
						</div>
					</a>
				</li>
				<li>
					<a href="">
						<div class="nav_txt">
							新闻中心
						</div>
					</a>
				</li>
			</ul>
			
			<div class="hright">
				<div class="hright1">
					<input type="text">
					<span>行者食巷</span>
				</div>
				<div class="hright2">
					<input type="text">
					<button><img src="./images/search.png" alt=""></button>
				</div>
			</div>
		</div>
	</div>

五、源码获取

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端布局方式及其优缺点

前端布局方式多种多样&#xff0c;每种布局方式都有其特定的应用场景、特性和优缺点。以下是一些常见的前端布局方式及其特点和优缺点&#xff1a; 静态布局&#xff1a; 特性&#xff1a;元素的尺寸使用绝对单位&#xff08;如px&#xff09;进行定义&#xff0c;不会随浏览器…

神经网络必备基础

和神经网络介绍相比&#xff0c;本文更侧重于程序实现 理解Keras中的组件 Keras是一个高级的神经网络API&#xff0c;用Python实现的&#xff0c;并且可以运行在TensorFlow、CNTK或Theano等后台之上。 model.compile() compile(self, optimizer, loss, metricsNone, ...) 该…

Python刘诗诗

写在前面 刘诗诗在电视剧《一念关山》中饰演了女主角任如意&#xff0c;这是一个极具魅力的女性角色&#xff0c;她既是一位有着高超武艺和智慧的女侠士&#xff0c;也曾经是安国朱衣卫前左使&#xff0c;身怀绝技且性格坚韧不屈。剧中&#xff0c;任如意因不满于朱衣卫的暴行…

【Spring】Spring状态机

1.什么是状态机 (1). 什么是状态 先来解释什么是“状态”&#xff08; State &#xff09;。现实事物是有不同状态的&#xff0c;例如一个自动门&#xff0c;就有 open 和 closed 两种状态。我们通常所说的状态机是有限状态机&#xff0c;也就是被描述的事物的状态的数量是有…

vue页面刷新问题:返回之前打开的页面,走了create方法(解决)

vue页面刷新问题&#xff1a;返回之前打开的页面&#xff0c;走了create方法&#xff08;解决&#xff09; 直接上图&#xff0c; 我们在开发的时候经常会复制粘贴&#xff0c;导致vue文件的name没有及时修改 我们需要保证name和浏览器的地址一致&#xff0c;这样才能实现缓…

2024 PhpStorm激活,分享几个PhpStorm激活的方案

文章目录 PhpStorm 公司简介我这边使用PhpStorm的理由PhpStorm 2023.3 最新变化AI Assistant 预览阶段结束 正式版基于 LLM 的代码补全测试代码生成编辑器内代码生成控制台中基于 AI 的错误解释 Pest 更新PHP 8.3 支持#[\Override] 特性新的 json_validate() 函数类型化类常量弃…

OpenCascade源码剖析:Standard_Transient根类

Standard_Transient是OCCT继承体系最顶层的根类&#xff0c;Transient在编程中具有一定的语义&#xff0c;与Persistent相对应&#xff0c;通常用于描述数据的持久性或持久性存储。 Transient&#xff0c;意味着数据是临时的或瞬态的&#xff0c;它们不会被持久化保存&#xf…

【C语言基础】:深入理解指针(三)

文章目录 深入理解指针一、冒泡排序二、二级指针三、指针数组3.1 指针数组模拟二维数组 四、字符指针变量五、数组指针变量5.1 数组指针变量是什么&#xff1f;5.2 数组指针变量的初始化 六、二维数组传参的本质 深入理解指针 指针系列回顾&#xff1a; 【C语言基础】&#xf…

Ubuntu 24.04 抢先体验换国内源 清华源 阿里源 中科大源 163源

Update 240307:Ubuntu 24.04 LTS 进入功能冻结期 预计4月25日正式发布。 Ubuntu22.04换源 Ubuntu 24.04重要升级daily版本下载换源步骤 (阿里源)清华源中科大源网易163源 Ubuntu 24.04 LTS&#xff0c;代号 「Noble Numbat」&#xff0c;即将与我们见面&#xff01; Canonica…

Java代码审计安全篇-目录穿越漏洞

前言&#xff1a; 堕落了三个月&#xff0c;现在因为被找实习而困扰&#xff0c;着实自己能力不足&#xff0c;从今天开始 每天沉淀一点点 &#xff0c;准备秋招 加油 注意&#xff1a; 本文章参考qax的网络安全java代码审计&#xff0c;记录自己的学习过程&#xff0c;还希望各…

揭示/proc/pid/pagemap的力量:在Linux中将虚拟地址映射到物理地址

pagemap的力量&#xff1a;在Linux中将虚拟地址映射到物理地址 一、/proc/pid/pagemap简介二、了解虚拟地址到物理地址的转换三、利用/proc/pid/pagemap进行地址转换3.1、访问/proc/pid/pagemap3.2、pagemap文件的数据和结构 四、页表、页框架的相关概念五、总结 一、/proc/pid…

信号处理-探索相邻数据点之间的变化和关联性的操作方法

当前值减去前一个值&#xff0c;乘上当前值与前一个值差值的绝对值 当前值减去后一个值&#xff0c;乘上当前值与后一个值差值的绝对值。 意义何在&#xff1f; 当前值减去前一个值&#xff1a;表示当前数据点与前一个数据点之间的变化量。当前值与前一个值差值的绝对值&…

【Linux】软件管理器yum和编辑器vim

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、Linux下安装软件的方案1.1 源代码安装1.2 rpm安装1.3 yum安装 二、Linux软件…

外贸常用的出口认证 | 全球外贸数据服务平台 | 箱讯科技

出口认证是一种贸易信任背书&#xff0c;对许多外贸从业者而言,产品的出口认证和当前的国际贸易环境一样复杂多变&#xff0c;不同的目标市场、不同的产品类别,所需要的认证及标准也不同。 国际认证 01 IECEE-CB IECEE-CB体系的中文含义是“关于电工产品测试证书的相互认可体…

记一次简单的获取虚拟机|伪终端shell权限

场景描述 某个系统是ova文件&#xff0c;导入虚拟机启动&#xff0c;但是启动后只有一个伪终端权限&#xff0c;即权限很小&#xff0c;如何拿到这个虚拟机的shell权限呢&#xff1f; 实际操作 这次运气比较好&#xff0c;所遇到的系统磁盘并没有被加密&#xff0c;所以直接…

吴恩达深度学习笔记:神经网络的编程基础2.1-2.3

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第二周&#xff1a;神经网络的编程基础 (Basics of Neural Network programming)2.1 二分类(Binary Classification)2.2 逻辑回归(Logistic Regression) 第一门课&#xff1a;神经网络和深度学…

c++ 11 新特性 不同数据类型之间转换函数之reinterpret_cast

一.不同数据类型之间转换函数reinterpret_cast介绍 reinterpret_cast是C中的一种类型转换操作符&#xff0c;用于执行低级别的位模式转换。具体来说&#xff0c;reinterpret_cast可以实现以下功能&#xff1a; 指针和整数之间的转换&#xff1a;这种转换通常用于在指针中存储额…

如何学习、上手点云算法(三):用VsCode、Visual Studio来debug基于PCL、Open3D的代码

写在前面 本文内容 以PCL 1.14.0&#xff0c;Open3D0.14.1为例&#xff0c;对基于PCL、Open3D开发的代码进行源码debug&#xff1b; 如何学习、上手点云算法系列&#xff1a; 如何学习、上手点云算法(一)&#xff1a;点云基础 如何学习、上手点云算法(二)&#xff1a;点云处理相…

【数据结构】二、线性表:6.顺序表和链表的对比不同(从数据结构三要素讨论:逻辑结构、物理结构(存储结构)、数据运算(基本操作))

文章目录 6.对比&#xff1a;顺序表&链表6.1逻辑结构6.2物理结构&#xff08;存储结构&#xff09;6.2.1顺序表6.2.2链表 6.3数据运算&#xff08;基本操作&#xff09;6.3.1初始化6.3.2销毁表6.3.3插入、删除6.3.4查找 6.对比&#xff1a;顺序表&链表 6.1逻辑结构 顺…

基于pytest的证券清算系统功能测试工具开发

需求 1.造测试数据&#xff1a;根据测试需要&#xff0c;自动化构造各业务场景的中登清算数据与清算所需起来数据 2.测试清算系统功能&#xff1a; 自动化测试方案 工具设计 工具框架图 工具流程图 实现技术 python, pytest, allure, 多进程&#xff0c;mysql, 前端 效果 测…