绿色的手机网上水果商城wap模板_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

共29个文件

jpg：11个

png：8个

js：2个

psd模板

网站模板

前端模板

92 浏览量 2023-08-02 12:32:42 上传评论收藏 1.29MB ZIP 举报

该压缩包文件“绿色的手机网上水果商城wap模板_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip”提供了一套适用于手机和电脑的绿色水果商城网页模板，主要包含了HTML5（H5）技术，旨在实现自适应和响应式设计，确保在不同设备上都能良好显示。下面将详细解析这个模板中的关键知识点。 1. **HTML5模板**： HTML5是超文本标记语言的最新版本，提供了许多新的元素和API，如语义化标签（如<header>、<nav>、<article>等），媒体元素（<audio>、<video>），离线存储（Application Cache）以及 canvas 和 SVG 等图形支持。在这个模板中，HTML5被用于构建网页结构，使页面内容更易于理解和处理，同时增强了网页的交互性和多媒体支持。 2. **自适应响应式设计**：自适应设计是根据设备的屏幕大小和方向调整布局的方法，以确保在任何设备上都能提供良好的用户体验。响应式设计通常通过使用媒体查询（Media Queries）来实现，它允许CSS针对不同设备条件定义不同的样式规则。在这个水果商城模板中，这种设计能够确保无论是手机还是电脑用户，都能够轻松浏览商品、进行购买操作。 3. **前端开发**：前端开发主要关注用户在浏览器中看到和交互的部分。在这个模板中，前端技术不仅包括HTML5，还可能涉及到CSS（层叠样式表）和JavaScript。CSS用于定义页面的视觉样式，如颜色、字体、布局等；JavaScript则用于增加交互性，例如动态加载内容、表单验证、滑动效果等。 4. **CSS3**： CSS3是CSS的最新版本，引入了许多新功能，如选择器（如:nth-child()、:hover、:active等）、过渡（Transitions）、动画（Animations）和多列布局（Multiple Column Layout）。在这个模板中，CSS3被用来实现平滑的过渡效果、响应式的布局调整和视觉美化。 5. **PSD模板**： PSD模板通常指的是Adobe Photoshop的设计文件，设计师在这里创建了网站的视觉设计。虽然压缩包中没有PSD文件，但这个标签表明源设计可能是在Photoshop中完成的，然后转化为HTML和CSS代码。 6. **网页源码**：提到的“网页源码”是指HTML、CSS和JavaScript等文件，这些文件共同构成了网页的原始代码。用户下载这个压缩包后，可以查看并编辑这些源码以适应自己的需求。 7. **移动优先**：移动优先是一种设计策略，首先考虑移动设备的用户体验，然后扩展到更大的屏幕。在这个模板中，设计可能是以手机屏幕尺寸为基础，逐步优化至平板和桌面电脑。总结来说，这个压缩包提供的是一套完整的、以HTML5为基础的自适应响应式水果商城网站模板，包含必要的前端代码和可能的PSD设计文件，适合开发者或网站所有者快速搭建一个美观且实用的在线水果销售平台。通过使用这套模板，开发者可以节省大量时间和精力，专注于后台功能的开发和定制，提升网站的整体性能和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

绿色的手机网上水果商城wap模板_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip （29个子文件）

source

style.css 8KB

font

fresh-webfont.ttf 12KB

fresh-webfont.eot 8KB

fresh-webfont.woff2 7KB

fresh-webfont.woff 9KB

fresh-webfont.svg 17KB

swiper.min.js 55KB

jquery.js 91KB

swiper3.07.min.css 14KB

upload

menu_bg_07.png 7KB

menu_bg_03.png 5KB

goods007.jpg 135KB

goods006.jpg 123KB

goods008.jpg 193KB

menu_bg_10.png 8KB

menu_bg_11.png 6KB

menu_bg_14.png 6KB

menu_bg_01.png 7KB

goods005.jpg 96KB

menu_bg_15.png 4KB

goods004.jpg 56KB

goods009.jpg 106KB

menu_bg_06.png 8KB

slide001.jpg 85KB

slide002.jpg 81KB

goods001.jpg 161KB

goods002.jpg 70KB

goods003.jpg 96KB

index.html 8KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>首页</title> <meta name="keywords" content="DeathGhost" /> <meta name="description" content="http://www.deathghost.cn" /> <meta name="author" content="DeathGhost" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name='apple-touch-fullscreen' content='yes'> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <link rel="icon" href="images/icon/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="images/icon/apple-touch-icon-57x57-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="images/icon/apple-touch-icon-120x120-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="196x196" href="images/icon/apple-touch-icon-196x196-precomposed.png"> <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="source/style.css" /> <script src="source/js/jquery.js"></script> <script src="source/js/swiper.min.js"></script> <script> $(document).ready(function(){ var mySwiper = new Swiper('#slide',{ autoplay:5000, visibilityFullFit : true, loop:true, pagination : '.pagination', }); //product list:Tab $(".tab_proList dd").eq(0).show().siblings(".tab_proList dd").hide(); $(".tab_proList dt a").eq(0).addClass("currStyle"); $(".tab_proList dt a").click(function(){ var liindex = $(".tab_proList dt a").index(this); $(this).addClass("currStyle").siblings().removeClass("currStyle"); $(".tab_proList dd").eq(liindex).fadeIn(150).siblings(".tab_proList dd").hide(); }); //飞入动画，具体根据实际情况调整 $(".addToCart").click(function(){ $(".hoverCart a").html(parseInt($(".hoverCart a").html())+1);/*悬浮购物车+1*/ var shopOffset = $(".hoverCart").offset(); var cloneDiv = $(this).parent().siblings(".goodsPic").clone(); var proOffset = $(this).parent().siblings(".goodsPic").offset(); cloneDiv.css({ "position": "absolute", "top": proOffset.top, "left": proOffset.left }); $(this).parent().siblings(".goodsPic").parent().append(cloneDiv); cloneDiv.animate({ width:0, height:0, left: shopOffset.left, top: shopOffset.top, opacity:1 },"slow"); }); }); </script> </head> <body>  <header> <a href="#" class="location">西安市</a> <h1>果蔬商城</h1> <a href="#" class="rt_searchIcon">%</a> </header>  <div id="slide"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"> <img src="source/upload/slide001.jpg"/> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="source/upload/slide002.jpg"/> </a> </div> </div> <div class="pagination"></div> </div>  <ul class="categoryLiIcon"> <li> <a href="#"> <img src="source/upload/menu_bg_01.png"/> <em>蔬菜水果</em> </a> </li> <li> <a href="#"> <img src="source/upload/menu_bg_06.png"/> <em>禽蛋肉类</em> </a> </li> <li> <a href="#"> <img src="source/upload/menu_bg_10.png"/> <em>水产火锅</em> </a> </li> <li> <a href="#"> <img src="source/upload/menu_bg_14.png"/> <em>熟食豆制</em> </a> </li> <li> <a href="#"> <img src="source/upload/menu_bg_03.png"/> <em>米面粮油</em> </a> </li> <li> <a href="#"> <img src="source/upload/menu_bg_07.png"/> <em>调料干货</em> </a> </li> <li> <a href="#"> <img src="source/upload/menu_bg_11.png"/> <em>餐厨用品</em> </a> </li> <li> <a href="#"> <img src="source/upload/menu_bg_15.png"/> <em>常购品</em> </a> </li> </ul>  <dl class="tab_proList"> <dt> <a>热销</a> <a>新品</a> <a>打折</a> </dt> <dd> <ul> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods001.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">新鲜生菜两斤装特惠</a> </h2> <p> <del>5.90</del> </p> <p> <strong class="price">3.90</strong> </p> <a class="addToCart">~</a> </div> </li> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods002.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">红萝卜3斤装</a> </h2> <p> <del>12.90</del> </p> <p> <strong class="price">8.90</strong> </p> <a class="addToCart">~</a> </div> </li> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods003.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">西红柿5斤装</a> </h2> <p> <del>9.90</del> </p> <p> <strong class="price">6.90</strong> </p> <a class="addToCart">~</a> </div> </li> </ul> </dd> <dd> <ul> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods004.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">新鲜生菜两斤装特惠</a> </h2> <p> <del>5.90</del> </p> <p> <strong class="price">3.90</strong> </p> <a class="addToCart">~</a> </div> </li> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods008.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">新鲜生菜两斤装特惠</a> </h2> <p> <del>5.90</del> </p> <p> <strong class="price">3.90</strong> </p> <a class="addToCart">~</a> </div> </li> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods009.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">新鲜生菜两斤装特惠</a> </h2> <p> <del>5.90</del> </p> <p> <strong class="price">3.90</strong> </p> <a class="addToCart">~</a> </div> </li> </dd> <dd> <ul> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods005.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">新鲜生菜两斤装特惠</a> </h2> <p> <del>5.90</del> </p> <p> <strong class="price">3.90</strong> </p> <a class="addToCart">~</a> </div> </li> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods006.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">新鲜生菜两斤装特惠</a> </h2> <p> <del>5.90</del> </p> <p> <strong class="price">3.90</strong> </p> <a class="addToCart">~</a> </div> </li> <li> <a href="#" class="goodsPic"> <img src="source/upload/goods007.jpg"/> </a> <div class="goodsInfor"> <h2> <a href="#">新鲜生菜两斤装特惠</a> </h2> <p> <del>5.90</del> </p> <p> <strong class="price">3.90</strong> </p> <a class="addToCart">~</a> </div> </li> </dd> </dl>  <div class="hoverCart"> <a href="#">0</a> </div>  <div style="height:1.2rem;"></div> <nav> <a href="index.html" class="homeIcon">首页</a> <a href="#" class="categoryIcon">分类</a> <a href="#" class="cartIcon">购物车</a> <a href="#" class="userIcon">我的</a> </nav> </body> </html>

评论收藏

内容反馈