天天生鲜页面设计——网站首页

最新推荐文章于 2022-08-18 14:28:58 发布
最新推荐文章于 2022-08-18 14:28:58 发布
阅读量5.9k 收藏 44
点赞数 8
分类专栏： 前端 文章标签： 天天生鲜页面设计 网站首页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43442290/article/details/89885001
版权

页面说明：

1、index.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="index.html" class="logo fl"><img src="images/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="images/slide.jpg" alt="幻灯片"></li>
				<li><img src="images/slide02.jpg" alt="幻灯片"></li>
				<li><img src="images/slide03.jpg" alt="幻灯片"></li>
				<li><img src="images/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="images/adv01.jpg"></a>
			<a href="#"><img src="images/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="images/banner01.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">草莓</a></h4>
					<a href="#"><img src="images/goods/goods003.jpg"></a>
					<div class="prize">¥ 30.00</div>
				</li>
				<li>
					<h4><a href="#">葡萄</a></h4>
					<a href="#"><img src="images/goods/goods002.jpg"></a>
					<div class="prize">¥ 5.50</div>
				</li>
				<li>
					<h4><a href="#">柠檬</a></h4>
					<a href="#"><img src="images/goods/goods001.jpg"></a>
					<div class="prize">¥ 3.90</div>
				</li>
				<li>
					<h4><a href="#">奇异果</a></h4>
					<a href="#"><img src="images/goods/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="images/banner02.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">青岛野生海捕大青虾</a></h4>
					<a href="#"><img src="images/goods/goods018.jpg"></a>
					<div class="prize">¥ 48.00</div>
				</li>
				<li>
					<h4><a href="#">扇贝</a></h4>
					<a href="#"><img src="images/goods/goods019.jpg"></a>
					<div class="prize">¥ 46.00</div>
				</li>
				<li>
					<h4><a href="#">冷冻秋刀鱼</a></h4>
					<a href="#"><img src="images/goods/goods020.jpg"></a>
					<div class="prize">¥ 19.00</div>
				</li>
				<li>
					<h4><a href="#">基围虾</a></h4>
					<a href="#"><img src="images/goods/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="images/banner03.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model04">禽类蛋品</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="images/banner04.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model05">新鲜蔬菜</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="images/banner05.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
			</ul>
		</div>
	</div>

	<div class="list_model">
		<div class="list_title clearfix">
			<h3 class="fl" id="model06">速冻食品</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="images/banner06.jpg"></div>
			<ul class="goods_list fl">
				<li>
					<h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</div>
				</li>
				<li>
					<h4><a href="#">维多利亚葡萄</a></h4>
					<a href="#"><img src="images/goods.jpg"></a>
					<div class="prize">¥ 38.00</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="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>
</body>
</html>
Performer_Cherry
关注
  • 8
    点赞
  • 踩
  • 44
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
【学习目录】天天生鲜项目页面设计
Cherry的博客
05-20 3122
天天生鲜项目网站首页 商品列表页 商品详情页 我的购物车 我的购物车 提交订单页 登陆页面 注册页面 用户信息页 用户订单页 用户收货地址页
天天生鲜前端页面
02-26
天天生鲜前端页面，提供给广大有需求的用户使用。如有问题，不关我事。
第三章 天天生鲜项目实现注册异步收发功能
weixin_43085298的博客
05-02 183
第三章 天天生鲜项目实现注册异步收发功能 学习入门指南: 天天生鲜项目搭建文件可从公众号学聚思获取，关注公众号：学聚思、学聚思、学聚思。重要的事情说三遍 本文博客获取关键词：天天生鲜注册异步收发博客 本项目关键词：天天生鲜注册异步收发源码 请大家按照关键字搜索哦，另外，本人创建了1个QQ群欢迎各位加入讨论 QQ群号：301666877 天天生鲜项目学习视频 另外如果需要其他资源，比如视频中的工程文档，欢迎公众号留言 本内容持续更新直至天天生鲜项目完成！ 本文主要内容：实现注册异步收发功能 本设计不涉及
Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:
HTML网页设计
07-30 1万+
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【...
html 仿京东的垂直菜单,仿京东主页菜单滚动二级菜单跟随置顶
weixin_39669982的博客
06-09 207
仿京东主页菜单滚动二级菜单跟随置顶*{padding: 0;margin: 0;}ul{list-style-type: none;padding: 0;margin: 0;}.width1200{width: 1200px;margin: 0 auto;}body{background-color: #f4f4f4;}.box{position: relative;}.box-left{widt...
HTML5期末大作业：网站设计——天天生鲜水果蔬菜商城网站静态模板 (10个页面) HTML+CSS+JavaScript
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-07 6394
HTML5期末大作业：网站设计——天天生鲜水果蔬菜商城网站静态模板 (10个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 天天生鲜商城网站htm
CSS——制作天天生鲜主页
dengyunhui1210的博客
06-10 440
终于做好了！ index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天天生鲜-首页</title> <link rel="stylesheet" type="t...
web前端期末大作业 html+css+javascript防天天生鲜官网网页设计实例 企业网站制作
QQ_____365392777的博客
08-18 509
🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓......
html-css练习题（天天生鲜静态网页制作）文末有完整版代码地址链接
热门推荐
采菊东篱下，Python满乾坤！
09-03 5万+
素材地址： 链接: https://pan.baidu.com/s/17aHx1VQpI5yjc67TFoq1yQ 提取码: bk1s 先来看一下效果图： 主要要求： 注：最下面有素材链接地址可以自己练习使用 /* 1.login最外侧盒子设定高29 背景颜色#f7f7f7 下边框1 */ /* 1.1login内容部分设置 高20 宽1200 居中*...
HTML5期末大作业：生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业
11-25 1370
HTML5期末大作业：生鲜水果蔬菜商城网站设计——天天生鲜水果蔬菜商城(10页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更
天天生鲜（Python）版前端页面
07-08
页面说明： 1、index.html 网站首页，顶部“注册|登录”和用户信息是切换显示的，商品分类菜单点击直接链接滚动到本页面商品模块。首页已加入幻灯片效果。此效果在课程中已讲述如何制作。 2、list.html 商品列表页，商品分类菜单鼠标悬停时切换显示和隐藏，点击菜单后链接到对应商品的列表页。 3、detail.html 商品详情页，某一件商品的详细信息。 4、cart.html 我的购物车页，列出已放入购物车上的商品 5、place_order.html 提交订单页 6、login.html 登录页面 7、register.html 注册页面，已加入了初步的表单验证效果，此效果在课程中已讲述如何制作。 8、user_center_info.html 用户中心-用户信息页 用户中心功能一，查看用户的基本信息 9、user_center_order.html 用户中心-用户订单页 用户中心功能二，查看用户的全部订单 10、user_center_site.html 用户中心-用户收货地址页 用户中心功能三，查看和设置用户的收货地址
天天生鲜html_images.zip
09-05
天天生鲜的htm_image,用于个人图片存储，https://blog.csdn.net/Zph1234/article/details/82423633
Python天天生鲜项目代码及部署文件
03-22
压缩包里包含使用Python语言下的django框架编写的天天生鲜项目，为了方便使用，里面有写好的部署文档。可以根据部署文件的内容进行项目搭建。
天天生鲜 前后台资源
11-24
全部前台资源，后台资源可以参考，学习哪个语言都要用到的前台HTMl页
天天生鲜电商网站项目MySql数据库文件
12-10
天天生鲜电商网站项目MySql数据库文件，Mysql版本数据库，包括所需全部数据、图片、资源名称、数据结构等！
基于Django框架的天天生鲜电商网站项目源代码
12-10
上面是整个源码包，里面有所需要的所有素材，照片，js，css等，代码我均已注释清晰。整个项目基于django框架的website，是一个电商...温馨提示，下载源码包大体代码不变，但是在settings里面需要修改为您的数据库地址。
毕业设计电商项目-天天生鲜项目设计含源码
05-21
毕业设计天天生鲜项目设计含整个源码包，里面有所需要的所有素材，照片，js，css等，代码已注释清晰。整个项目基于django框架的website，是一个电商项目，功能齐全，用户注册登录缓存放在redis，用户信息商品信息等...
基于HTML+CSS开发的生鲜购物网站静态页面源码.zip
最新发布
11-19
基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发的生鲜购物网站静态页面源码.zip基于HTML+CSS开发...
天天生鲜注册页面css
09-14
您好！感谢您的提问。以下是一个简单的天天生鲜注册页面的 CSS 示例： ```css /* 注册表单 */ .register-form { margin: 20px auto; max-width: 400px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } /* 输入框 */ .register-form input[type="text"], .register-form input[type="email"], .register-form input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; } /* 注册按钮 */ .register-form input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; } .register-form input[type="submit"]:hover { background-color: #45a049; } /* 错误消息 */ .register-form .error-message { color: red; font-size: 14px; } ``` 请注意，这只是一个简单的示例，您可能需要根据实际情况进行适当的修改和调整。希望对您有所帮助！如果您还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Performer_Cherry

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

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

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

打赏作者

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

抵扣说明：

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

余额充值