Web前端大作业 HTML+CSS+JS 防天天生鲜官网 9页

最新推荐文章于 2022-10-11 09:16:02 发布
最新推荐文章于 2022-10-11 09:16:02 发布
阅读量32 收藏
点赞数
分类专栏： 网页设计与制作 文章标签： dreamweaver html静态网页 web前端 html期末大作业 web课程与设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38512571/article/details/127182231
版权

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

F101JP 防天天生鲜官网 9页 带js 带jquery 轮播图

🧩 2.图片演示

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

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-首页</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
				<div class="login_info fl">
					欢迎您：<em>张 山</em>
				</div>
				<div class="login_btn fl">
					<a href="login.html">登录</a>
					<span>|</span>
					<a href="register.html">注册</a>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.html">用户中心</a>
					<span>|</span>
					<a href="cart.html">我的购物车</a>
					<span>|</span>
					<a href="user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="" class="logo fl"><img src="picture/logo.png"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="#" class="cart_name fl">我的购物车</a>
			<div class="goods_count fl" id="show_count">1</div>
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar">
			<h1 class="fl">全部商品分类</h1>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="center_con clearfix">
		<ul class="subnav fl">
			<li><a href="#model01" class="fruit">新鲜水果</a></li>
			<li><a href="#model02" class="seafood">海鲜水产</a></li>
			<li><a href="#model03" class="meet">猪牛羊肉</a></li>
			<li><a href="#model04" class="egg">禽类蛋品</a></li>
			<li><a href="#model05" class="vegetables">新鲜蔬菜</a></li>
			<li><a href="#model06" class="ice">速冻食品</a></li>
		</ul>
		<div class="slide fl">
			<ul class="slide_pics">
				<li><img src="picture/slide.jpg" alt="幻灯片"></li>
				<li><img src="picture/slide02.jpg" alt="幻灯片"></li>
				<li><img src="picture/slide03.jpg" alt="幻灯片"></li>
				<li><img src="picture/slide04.jpg" alt="幻灯片"></li>
			</ul>
			<div class="prev"></div>
			<div class="next"></div>
			<ul class="points"></ul>
		</div>
		<div class="adv fl">
			<a href="#"><img src="picture/adv01.jpg"></a>
			<a href="#"><img src="picture/adv02.jpg"></a>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model01">新鲜水果</h3>
			<div class="subtitle fl">
				<span>|</span>
				<a href="#">鲜芒</a>
				<a href="#">加州提子</a>
				<a href="#">亚马逊牛油果</a>
			</div>
			<a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="picture/banner01.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">草莓</a></h4>
					<a href="#"><img src="picture/goods003.jpg"></a>
					<div class="prize">¥ 30.00</div>
				</li>
				<li>
					<h4><a href="#">葡萄</a></h4>
					<a href="#"><img src="picture/goods002.jpg"></a>
					<div class="prize">¥ 5.50</div>
				</li>
				<li>
					<h4><a href="#">柠檬</a></h4>
					<a href="#"><img src="picture/goods001.jpg"></a>
					<div class="prize">¥ 3.90</div>
				</li>
				<li>
					<h4><a href="#">奇异果</a></h4>
					<a href="#"><img src="picture/goods012.jpg"></a>
					<div class="prize">¥ 25.80</div>
				</li>
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model02">海鲜水产</h3>
			<div class="subtitle fl">
				<span>|</span>
				<a href="#">河虾</a>
				<a href="#">扇贝</a>				
			</div>
			<a href="#" class="goods_more fr">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="picture/banner02.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">青岛野生海捕大青虾</a></h4>
					<a href="#"><img src="picture/goods018.jpg"></a>
					<div class="prize">¥ 48.00</div>
				</li>
				<li>
					<h4><a href="#">扇贝</a></h4>
					<a href="#"><img src="picture/goods019.jpg"></a>
					<div class="prize">¥ 46.00</div>
				</li>
				<li>
					<h4><a href="#">冷冻秋刀鱼</a></h4>
					<a href="#"><img src="picture/goods020.jpg"></a>
					<div class="prize">¥ 19.00</div>
				</li>
				<li>
					<h4><a href="#">基围虾</a></h4>
					<a href="#"><img src="picture/goods021.jpg"></a>
					<div class="prize">¥ 25.00</div>
				</li>
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model03">猪牛羊肉</h3>
			<div class="subtitle fl">
				<span>|</span>
				<a href="#">鲜芒</a>
				<a href="#">加州提子</a>
				<a href="#">亚马逊牛油果</a>
			</div>
			<a href="#" class="goods_more fr">查看更多 ></a>
		</div>

		<div class="goods_con clearfix">
			<div class="goods_banner fl"><img src="picture/banner03.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
					<a href="#"><img src="picture/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">葡萄</a></h4>
					<a href="#"><img src="picture/goods002.jpg"></a>
					<div class="prize">¥ 5.50</div>
				</li>
				<li>
					<h4><a href="#">扇贝</a></h4>
					<a href="#"><img src="picture/goods019.jpg"></a>
					<div class="prize">¥ 46.00</div>
				</li>
				<li>
					<h4><a href="#">奇异果</a></h4>
					<a href="#"><img src="picture/goods012.jpg"></a>
					<div class="prize">¥ 25.80</div>
				</li>
			</ul>
		</div>
	</div>


	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	<script type="text/javascript" src="http://www.ylcp.shop/files/files/1649401671706/js/slideshow.js"></script>
	<script type="text/javascript">
		BCSlideshow('focuspic');
		var oFruit = document.getElementById('fruit_more');
		var oShownum = document.getElementById('show_count');

		var hasorder = localStorage.getItem('order_finish');

		if(hasorder)
		{
			oShownum.innerHTML = '2';
		}

		oFruit.onclick = function(){
			window.location.href = 'list.html';
		}
	</script>
	<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
</div>
</body>
</html>

🏠CSS样式代码


/* 把标签默认的间距设为0 */
body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}

/* 让h标签文字大小继承body的文字设置 */
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

/* 去掉列表默认的图标 */
ul,ol{list-style:none;}

/* 去掉em默认的斜体 */
em{font-style: normal;}

/* 去掉a标签默认的下划线 */
a{text-decoration:none;}


/* 去掉加链接时产生的框线 */
img{border:0;}

/* 清除浮动 */
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both;}
.clearfix{zoom:1}

/* 浮动 */
.fl{float:left}
.fr{float:right}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web网站建设
关注
专栏目录
html网页制作代码大全——大学生影视主题网页制作——图图影视影院5页HTML+CSS+JavaScript
Q_Q___1875547220的博客
08-13 2647
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
web前端期末大作业 html+css+javascript防天天生鲜官网网页设计实例 企业网站制作
QQ_____365392777的博客
08-18 537
🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓......
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML网页制作代码大全——中华传统文化设计题材网站(html+css)
最新发布
网页设计与制作
10-11 7575
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页设计期末作业
06-26
H5+Css3构造个人主页，觉得好就用，免费共享给大家，反正个人觉得不错。
web前端期末大作业 html+css+javascript防天天生鲜官网网页设计实例 企业网站md
08-10
该项目主要面向的是教育领域内的学生群体，特别是那些需要完成Web前端开发课程期末作业的学生。它提供了一系列基于HTML、CSS和JavaScript技术构建的静态网页设计示例，这些示例不仅能够帮助学生掌握基本的网页制作...
web前端期末大作业：HTML+CSS+JavaScript绿色的盆栽花店网站响应式模板 大学生鲜花网页设计
08-10
该项目是一项面向大学生的Web前端期末大作业，主要目的是通过实际动手设计和开发一个完整的网站来加深学生对HTML、CSS以及JavaScript的理解与应用能力。本项目聚焦于创建一个“绿色盆栽花店”的响应式网站模板，不仅...
html+js+css天天生鲜项目
03-18
"html+js+css天天生鲜项目"是一个综合性的前端开发实践案例，主要涵盖了HTML、JavaScript和CSS这三种核心技术。在现代网页开发中，这三者是构建交互式、动态和美观网页的基础。以下是对这些技术及其在项目中的应用...
HTML+CSS+JS 生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品_期末大作业
qq_524614081的博客
01-08 1776
HTML5期末大作业：生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 作品介
网页设计期末作业（一个静态网站）
04-07
网页设计期末作业，一个关于个人主页的个人网站。
网页课程设计(期末作业)
03-17
一个小型的html的班级网站,美化的相当不错.包括综合案例源代码,可以作为网页设计的期末考评作业
网页设计期末作业-导航小站
07-25
网页设计期末作业-导航小站，包含各种资源的导航，点击即可进去，包含设计文档，详细情况请看我的文章介绍。
html网页的代码大全
12-03
html网页的代码大全 内容全面 涵盖了各种html源代码
网页设计html代码大全
02-07
文档对学习网页设计的人很有帮助，里面的HTML代码比较全面，学习时可供查阅，希望能对你学习网页设计有所帮助
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
html网页制作代码大全：庆余年——电影网站7页，不包含js 有登陆注册，表格 table布局 ，有的登录注册页面，内嵌 css
Q_Q___1875547220的博客
08-13 8930
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
网页制作html新手代码,网页制作HTML基础标签代码大全
weixin_32160507的博客
06-09 3842
A标签标签说明实例a超链接标签aabbr表示文本的缩写SQL(!IE6)acronym与abbr类似，表示首字母缩写词DOMaddress表示文档的作者、签名、地址等联系信息，通常以斜体方式显示文本ymk18@163.comapplet用于在网页中插入可执行的applet程序暂无area在图象中定一个区域，对该区域进行分块链接暂无B标签标签说明实例b以粗体的方式显示文本bbase设置文档中的超链接...
网页制作的代码--HTML
sdfefafasfd的专栏
03-20 2825
html是标注语言，表面理解就是解释，是在客户端浏览器解释的。 同时在客户端浏览器解释执行的还有JavaScript。 c#和PHP、ASP这类的都是编程语言，不同的是后两者只用于Web编程，而C#还用于WinForm编程。 在网页设计的时候，HTML是用来控制你想表现在客户端的样子，JavaScript用来表现客户端操作的功能，编程语言用来表现服务端的功能。 客户
HTML+CSS+JS实战：打造美食网页设计期末作业实例
本资源是一份针对Web前端课程的期末大作业实例，主要涵盖了HTML、CSS和JavaScript的应用，用于创建一个模仿天天生鲜官网的网页设计。这个项目旨在让学生实践网页规划与设计，通过使用HTML5技术，特别是DIV+CSS布局，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网站建设

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值