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

news/2024/5/20 6:03:05/文章来源: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>

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

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

相关文章

html5 不容易被百度收录,[百度不收录]百度不收录网站发布的文章的原因有哪些?...

有关“百度不收录网站更新的原创文章内容”这个问题&#xff0c;我以前也是有给大伙儿共享过&#xff0c;可是還是有许多人私聊我一样的难题。假如不以大伙儿处理疑虑&#xff0c;不但大伙儿不舒服&#xff0c;因为我不舒服。所以呢&#xff0c;这儿我也再为大伙儿解释一下&…

最新百度SEOer必看的文章

本文转自http://www.daxueit.com/article/2171-1.html 百度作为最大的中文搜索引擎&#xff0c;其在中国的市场占有率使广大SEOer不得不对其重视。最近百度又进行了大更新&#xff0c;让原本SEO工作就相对比较难的百度搜索引擎现在变得更难了&#xff0c;下面我们就来讲一下百度…

六个方面对360网站卫士与百度加速乐的比较

每一位站长都希望自己的网站能够更快&#xff0c;效率更高&#xff0c;用户体验更好&#xff0c;这也是网站运营最关键键的因素&#xff0c;于是&#xff0c;在用户的强烈需求下&#xff0c;国内大佬们也从中看到了潜在市场&#xff0c;权衡之后&#xff0c;纷纷推出免费网站加…

freenas 当网站服务器,win10系统下如何安装FreeNAS来设置文件服务器

win10系统下如何安装FreeNAS来设置文件服务器您是否正在构建文件服务器?FreeNAS可能是您的最佳选择&#xff0c;因为它的功能和价格(免费)。以下是安装操作系统的方法。FreeNAS是一个免费提供的开源强大的网络附加存储(NAS)操作系统&#xff0c;任何人都可以使用它来设置家庭和…

ubuntu php 建站教程,Ubuntu 16.04下搭建Web服务器(MySQL+PHP+Apache) 教程

1.开始说明本文Ubuntu 16.04下搭建Web服务器(MySQLPHPApache)的内容很多可能参照网上前辈的&#xff0c;但有所改进吧。这些设置可能会有所不同&#xff0c;你需要根据不同情况进行修改。安装apache22.切换管理员身份在ubuntu中需要用root身份进行操作,所以用下面的命令确保以r…

php导航条css代码生成器,怎么使用css代码制作网站导航栏?(示例)

本篇文章主要给大家介绍关于如何用css做导航栏的相关知识&#xff0c;希望对有需要的朋友有所帮助。对于任何一个网站来说&#xff0c;导航栏的存在是至关重要的&#xff0c;那么如果仅仅只是用html做出枯燥乏味的导航菜单&#xff0c;效果肯定是不佳的。这时css属性的重要性就…

固定ip有什么好处_外贸网站!!为什么需要全球CDN加速?

现在&#xff0c;越来越多的建站用户都会考虑全球CDN加速&#xff0c;网站使用CDN加速已经逐渐成为一种新的趋势。那么&#xff0c;为什么网站要使用CDN加速&#xff1f;CDN加速有什么作用呢&#xff1f;解决这个问题&#xff0c;我们需要先了解的是&#xff0c;网站访问为什么…

wordpress acf字段 不同样式_全球知名大公司都在用WordPress建站案例,您想成为其中一员吗?...

WordPress是一款个人博客系统&#xff0c;并逐步演化成一款内容管理系统&#xff0c;它使用PHP语言和MySQL数据库开发。其强大的内容管理系统已能够制作精美的网站及WordPress商城。据统计&#xff0c;所有网站中有28.6&#xff05;使用WordPress。许多知名大品牌都在用WordPre…

seo代码优化工具_如何分析竞争对手的SEO优化数据

如何分析竞争对手的SEO优化数据作为一个称职的SEO优化师要学会如何分析同行站点的&#xff0c;取别人的长处&#xff0c;补自己的短处&#xff0c;并将这个做得更好&#xff0c;那么你的网站比起同行网站也就更好&#xff0c;排名自然也能比别人的好。一&#xff1a;查看分析网…

9个免费图标下载网站

很多人都希望给自己的系统或者博客添加上漂亮的图标吧.在下面这些网站你可以找到自己喜欢的Web2.0式的图标,它们针对个人的非商业使用都是免费的,所有的图标都是根据各种各样的主题和使用目的设计. 1.Free Web Icons 这里有15000多种免费高质量图标供你下载使用. 2.Web Site Ic…

js模板引擎_5分钟上手Egg.js+nunjucks模板引擎快速开发SEO友好的官网项目

在日常的项目中&#xff0c;有时候还是不可避免的会维护一些jq官网项目等。面对此类需求&#xff0c;很多还是以前的老套路&#xff0c;前端写页面交给后端去套数据。很烦有木有&#xff5e;&#xff5e;而改动之后还得交给后端再次修改&#xff0c;时间和沟通都是个麻烦。同时…

安装网站时mysql连接错误代码_安装MySQL启动服务时报错解决办法,错误代码1045...

散打狼在安装mysql的时候&#xff0c;在下图中的Start service这个步骤出错&#xff0c;我尝试用客户端登录&#xff0c;无法登录&#xff0c;报错如下。解决办法如下MySQL 连接错误&#xff0c;使用Navicat连接MySQL出现错误&#xff1a;1045 Access denied for user rootloca…

img标签中alt属性与title属性在seo的作用-摘自网友

img标签中alt属性与title属性作用&#xff0c;也许大家比较迷惑&#xff0c;现在给大家举例说明。alt属性是图片的替换文字。title属性规定元素的额外信息&#xff0c;有视觉效果。目录 alt属性title属性ie和firefox下展示img标签中alt属性与title属性作用&#xff0c;也许大家…

大型网站--负载均衡架构

负载均衡 &#xff08;Load Balancing&#xff09; 负载均衡建立在现有网络结构之上&#xff0c;它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。 大型网站负载均衡的利器 全局负载均衡系统&#xf…

SharePoint2013配置网站邮箱1

来自&#xff1a;http://rdsrv.blog.51cto.com/2996778/1252117 站点邮箱是Sharepoint 2013的新功能&#xff0c;不知道大家是否知晓&#xff0c;可以在一个网站集下的项目网站上开启站点邮箱&#xff0c;这样根据项目的邮件都会在这里进行汇总&#xff0c;方便相关的管理和查阅…

ASP.NET 例程完全代码版(6)——网站统计模块综述(Session,Application的讨论)

在ASP.NET梦工厂群中&#xff0c;有朋友寻网站当前在线人数和所有访问次数的代码&#xff0c;因为正好看到书上有这个例子就应了下来&#xff0c;结果却小弄了好一阵才搞定&#xff0c;不过还真有些需要注意的问题&#xff0c;在此总结&#xff0c;希望和大家共同交流。原本在V…

在电脑上测试手机网站全攻略

最近公司要开发网站的移动版&#xff0c;让我准备准备知识&#xff0c;话说本人开发移动网站的经验还真不多&#xff0c;最悲剧的事情就是我的手机是个经典的诺基亚&#xff0c;而且公司还不给配手机&#xff0c;这是有多扣啊&#xff0c;没办烦啦&#xff0c;没有手机就用电脑…

优化网站设计(十二):删除重复脚本

前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过&#xff0c;我在不同的场合也分享过这样的话题。 作为通用的原则&#xff0c;雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices f…

网站数据库从access升级到sql server 2005

我不知道自己会什么&#xff0c;也不知道自己不会什么&#xff0c;但一段时间苦苦的思索&#xff0c;希望能记录这段时间的探索&#xff0c;以便于以后提高效益。 一、所遇情况环境&#xff1b; 二、初期分析阶段&#xff1b; 三、中期摸索阶段&#xff1b; 四、后期解决阶段&a…

企业网站建设方法论

麦肯锡并不神秘&#xff0c;方法论铸就神奇&#xff01;这是出现在麦肯锡系列丛书封面上非常醒目的一句广告语。博文标题的想法正来源于此&#xff0c;感谢麦肯锡。今天我们要谈论的主角并非麦肯锡&#xff0c;而是方法论&#xff0c;是建设企业网站的方法论。正如标题说言&…