基于html的美食网站——速水果介绍8页(HTML+CSS+JavaScript) 带论文

news2024/12/22 19:52:27

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家精彩专栏推荐 美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 | 餐饮文化 | 等网站的设计与制作 | 美食主题网站 | HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML结构代码



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>水果展示</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/footer.css" />
	</head>
	<body>
		<header>
			<nav class="top2">
				<div class="top2-content">
					<div class="logo">
						<a href="index.html">
							<img src="img/logo.png">
						</a>
					</div>
					<div class="top2-con">
						<a href="index.html"  class="active">首页</a>
						<a href="introduce.html" >水果介绍</a>
						<a href="healthy.html">健康生活</a>
						<a href="about.html">关于我们</a>						
					</div>
				</div>
			</nav>
		</header>
		<div class="banner">
			<ul class="banner-content" id="banner-content">
				<li><img src="img/1.jpg"></li>
				<li><img src="img/2.jpg"></li>
				<li><img src="img/3.jpg"></li>
				<li><img src="img/5.jpg"></li>
				<li><img src="img/6.jpg"></li>
			</ul>
			<ul class="btn-list" id="btn-list">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="content1">
			<div class="items">
				<div class="item item-mid">
					<div class="item-title">
						水果展示
					</div>
					<div class="item-content">
						<div class="item-img">
							<img src="img/8.jpg" >
							<p>葡萄</p>
						</div>
						<div class="item-img">
							<img src="img/2.jpg" >
							<p>红毛丹</p>
						</div>
						<div class="item-img">
							<img src="img/3.jpg" >
							<p>圣生梅</p>
						</div>
						<div class="item-img">
							<img src="img/5.jpg" >
							<p>金桔</p>
						</div>
						<div class="item-img">
							<img src="img/6.jpg" >
							<p>石榴</p>
						</div>
						<div class="item-img">
							<img src="img/19.jpg" >
							<p>西瓜</p>
						</div>
						<div class="item-img">
							<img src="img/9.jpg" >
							<p>苹果</p>
						</div>
						<div class="item-img">
							<img src="img/20.jpg" >
							<p>哈密瓜</p>
						</div>
						<div class="item-img">
							<img src="img/12.jpg" >
							<p>橙子</p>
						</div>
						<div class="item-img">
							<img src="img/13.jpg" >
							<p>桑葚</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			
		</div>
		<div class="footer">
			<div class="footer-end">
				<div class="container">
					<p>Copyright © 2022-2022 水果展示 All Rights Reserved</p>
				</div>
			</div>
		</div>
	</body>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>



学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

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

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

相关文章

SpringCloud全系列知识(1)——初识微服务和注册中心

SpringCloud(微服务)相关笔记 一 基础框架图 1.微服务技术栈 2.技术栈分类 二 认识微服务 1.单体架构 将业务功能集中在一个项目中&#xff0c;打成一个包部署。 优点&#xff1a;架构简单&#xff0c;部署成本低。 缺点&#xff1a;耦合度高 2.分布式架构 根据业务功能…

最具影响力的15颗国外开放数据气象卫星介绍

1.热带降雨测量任务(TRMM) TRMM 是 NASA 和日本宇宙航空研究开发机构 (以前称日本国家空间发展署) 的合作项目&#xff0c;是 NASA 地球科学计划中的航天任务。日本提供运载火箭和测雨雷达&#xff0c;而由 NASA 提供卫星、4台仪器和卫星运行系统。 TRMM 卫星是三轴稳定的&…

深度强化学习中利用Q-Learngin和期望Sarsa算法确定机器人最优策略实战(超详细 附源码)

需要源码和环境搭建请点赞关注收藏后评论区留下QQ~~~ 一、Q-Learning算法 Q-Learning算法中动作值函数Q的更新方向是最优动作值函数q&#xff0c;而与Agent所遵循的行为策略无关&#xff0c;在评估动作值函数Q时&#xff0c;更新目标为最优动作值函数q的直接近似&#xff0c;故…

深入理解java虚拟机:虚拟机类加载机制(2)

文章目录3.类加载器3.1 类与类加载器3.2 双亲委派模型3.3 破坏双亲委派模型3.类加载器 虚拟机设计团队把类加载阶段中的通过一个类的全限定名来获取描述此类的二进制字节流这个动作放到Java虚拟机外部去实现&#xff0c;以便让应用程序自己决定如何去获取所需要的类。实现这个…

【密码学篇】数字签名基础知识(无保密性)

【密码学篇】数字签名基础知识&#xff08;无保密性&#xff09; 数字签名主要用于确认数据的完整性、签名者身份的真实性和签名行为的不可否认性等。—【蘇小沐】 文章目录【密码学篇】数字签名基础知识&#xff08;无保密性&#xff09;1.数字签名定义2.数字签名原理3.数字签…

Apache-DBUtils实现CRUD操作

Apache-DBUtils实现CRUD操作 每博一文案 有人说&#xff0c;不要轻易去伤害任何一个人&#xff0c;因为你会因此而受伤。欠的债&#xff0c;躲不掉&#xff0c;总是要还的。 要知道&#xff0c;哪些能被你欺骗的人&#xff0c;都是无条件相信你的人&#xff0c;因为心里有你&a…

【LeetCode-中等】240. 搜索二维矩阵 II(详解)

编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/…

ROS之话题通信自定义msg

文章目录背景自定义msg例子1.定义msg文件2.编辑配置文件3.编译话题通信自定义msg调用A(C)0.vscode 配置1.发布方2.订阅方3.配置 CMakeLists.txt4.执行背景 在 ROS 通信协议中&#xff0c;数据载体是一个较为重要组成部分&#xff0c;ROS 中通过 std_msgs 封装了一些原生的数据…

【软考软件评测师】第三十三章 数据库系统应用

【软考软件评测师】第三十三章 数据库系统应用 【软考软件评测师】第三十三章 数据库系统应用【软考软件评测师】第三十三章 数据库系统应用第一部分 知识点集锦1.关系数据库候选码2.自然连接3.元祖关系1&#xff09;1对多关系2&#xff09;多对多关系3&#xff09;复合属性4&a…

Centos8界面语言怎么设置? Centos用户界面语言的设置方法

Centos8怎么给用户设置界面语言&#xff1f;想要设置界面语言&#xff0c;该怎么设置呢&#xff1f;下面我们就来看看详细的教程。 1、Gnome桌面环境下&#xff0c;在桌面空白处右键选择【设置】。 2、在【设置】中点【详细信息】。 3、之后点【用户】。 4、首先单击选中要设置…

ADS原理图到Layout,Layout更新原理图

RF Design-22 目录方法1&#xff1a;自动生成Generate/update Layout将理想元件转换为带footprint的元件统一修改元件参数生成Layout添加传输线&#xff0c;T节由Layout更新原理图Ground pouring覆铜设置地过孔方法2&#xff1a;place components from schem to Layout将原理图…

一种无需调查船上坞的调查设备安装测量方法和安装测量系统

本文来自于博主发明专利的技术交底。 大型科考船船底安装大型的精密测量设备&#xff0c;对安装的测量精度要求比较高&#xff0c;通过上坞&#xff0c;采用传统的测量方式&#xff0c;先做控制网&#xff0c;然后进行碎步测量&#xff0c;得到测量设备及其室内附属设备与船舶的…

Spring Cloud Ribbon面试题大全

Spring Cloud Ribbon面试题大全 目录 文档索引 面试题汇总 Q&#xff1a;Ribbon的总体流程&#xff1f; Q&#xff1a;Ribbon如何选择调用哪个实例&#xff1f; Q&#xff1a;服务列表的获取过程&#xff1f; Q&#xff1a;Ribbon如何避免调用失效实例&#xff1f; Q&am…

JavaScript高级复习上(59th)

1、类 constructor 构造函数 constructor() 方法是类的构造函数&#xff08;默认方法&#xff09;&#xff0c;用于传递参数&#xff0c;返回实例对象&#xff0c;通过new命令生成对象实例时&#xff0c;自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个 constru…

【CPP】string 类的模拟实现

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;前言&…

Angular 学习 之 Hello World !

目录 0.前言・前提&#xff08;Angular介绍&#xff09; 前言 前提&#xff08;node.js已经按照&#xff09; 1.安装・查看版本 2.创建・启动Angular工程 2.1.创建工程 2.2.启动工程 2.3.启动之后&#xff0c;浏览器访问&#xff0c;显示的效果 2.4.工程目录结构 3.各…

计算机毕业设计——基于html汽车商城网站页面设计与实现论文源码ppt(35页) HTML+CSS+JavaScript

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

Flutter高仿微信-第29篇-单聊

Flutter高仿微信系列共59篇&#xff0c;从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。 详情请查看 效果图&#xff1a; 实现代码&#xff1a; 单聊包含&#xff1a;文本、表情、语音、图片、小视频、…

HTML学生个人网站作业设计——HTML+CSS+JavaScript优分期大学生分期购物商城(7页)

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

Vue3【Composition API 的优势、新的组件(Fragment、Teleport、Suspense)、全局API的转移】

文章目录四、Composition API 的优势1.Options API 存在的问题2.Composition API 的优势五、新的组件1.Fragment2.Teleport3.Suspense六、其他1.全局API的转移2.其他改变四、Composition API 的优势 1.Options API 存在的问题 使用传统OptionsAPI中&#xff0c;新增或者修改一…