ZIPhtml+js+css实现一个鲜花商城 4.42MB

qq_43770056需要积分:1(1积分=1元)

资源文件列表:

html+js鲜花商城.zip 大约有92个文件
  1. account_login.html 16.48KB
  2. category.html 35.43KB
  3. contact_us.html 16.47KB
  4. css/
  5. css/ddsmoothmenu.css 2.22KB
  6. css/elastislide.css 861B
  7. css/home_flexslider.css 3.72KB
  8. css/layout.css 1.7KB
  9. css/light_box.css 4.83KB
  10. css/orange.css 6.77KB
  11. css/skeleton.css 31.98KB
  12. css/style.css 53.73KB
  13. cy.html 36.19KB
  14. images/
  15. images/banner_left_btn.png 230B
  16. images/banner_right_btn.png 235B
  17. images/border.png 112B
  18. images/borderbottomcenter.png 111B
  19. images/borderbottomleft.png 215B
  20. images/borderbottomright.png 217B
  21. images/bordermiddleleft.png 108B
  22. images/bordermiddleright.png 108B
  23. images/bordertopcenter.png 111B
  24. images/bordertopleft.png 216B
  25. images/bordertopright.png 214B
  26. images/circle_outside.png 265B
  27. images/currency_arrow.png 201B
  28. images/desc_bullet.png 183B
  29. images/email_friend_icon.png 241B
  30. images/free_shipping_icon.png 1.43KB
  31. images/iconspro.png 3.86KB
  32. images/left_nav_arrow.png 156B
  33. images/like_next_btn.png 203B
  34. images/like_prev_btn.png 200B
  35. images/listing_bullet.png 189B
  36. images/loading_background.png 157B
  37. images/mobmenu.png 351B
  38. images/nav_arrow.png 152B
  39. images/next_img_btn.png 246B
  40. images/overlay.png 182B
  41. images/prev_img_btn.png 246B
  42. images/scrollernav.gif 738B
  43. images/search_icon.png 431B
  44. index.html 42.5KB
  45. js/
  46. js/common.js 2.46KB
  47. js/ddsmoothmenu.js 7.45KB
  48. js/jquery-1.8.2.min.js 91.25KB
  49. js/jquery.accordion.js 2.69KB
  50. js/jquery.easing.1.3.js 7.91KB
  51. js/jquery.elastislide.js 12.16KB
  52. js/jquery.flexslider.js 39.24KB
  53. js/jquery.jcarousel.min.js 34.41KB
  54. js/light_box.js 24.91KB
  55. ky.html 37.44KB
  56. lz.html 37.07KB
  57. picture/
  58. picture/banner1.png 370.64KB
  59. picture/banner2.png 444.95KB
  60. picture/banner3.png 396.49KB
  61. picture/banner4.png 441KB
  62. picture/banner_add1.png 158.78KB
  63. picture/banner_add2.png 42.7KB
  64. picture/banner_img.png 48.33KB
  65. picture/default_img.png 63.55KB
  66. picture/default_img1.png 68.98KB
  67. picture/default_img10.png 64.52KB
  68. picture/default_img11.png 52.33KB
  69. picture/default_img12.png 52.42KB
  70. picture/default_img13.png 59.18KB
  71. picture/default_img14.png 62.17KB
  72. picture/default_img2.png 46.32KB
  73. picture/default_img3.png 44.73KB
  74. picture/default_img4.png 40.34KB
  75. picture/default_img5.png 41.2KB
  76. picture/default_img6.png 38.44KB
  77. picture/default_img7.png 59.95KB
  78. picture/default_img8.png 54.2KB
  79. picture/default_img9.png 69.52KB
  80. picture/delete_item_btn.png 665B
  81. picture/edit_icon.png 278B
  82. picture/item_icon.png 849B
  83. picture/logo.png 8.13KB
  84. picture/qty_next.png 164B
  85. picture/qty_prev.png 164B
  86. picture/quick_thum_img1.png 14.23KB
  87. picture/quick_thum_img2.png 17.17KB
  88. picture/quick_view_img1.png 1.55MB
  89. picture/sale_icon_img.png 4.05KB
  90. picture/small_img.png 16.06KB
  91. picture/small_img1.png 13.29KB
  92. tj.html 35.08KB

资源介绍:

内容概要 本项目以构建一个美观且功能完备的“在线鲜花商城”为蓝本，全面融合HTML、CSS和JavaScript三大前端核心技术。在这个项目中，你将亲手设计并实现一个包含商品展示、购物车功能、用户登录与注册的电子商务平台。项目不仅仅关注界面的布局与美化，更重视于通过JavaScript实现动态交互，如商品筛选、数量选择、页面跳转等，为用户营造流畅的在线购物体验。 适用人群 前端初学者：刚接触Web开发，希望通过实战项目加深对HTML、CSS、JavaScript基础语法的理解。 设计爱好者：希望将创意设计转化为实际网页，学习如何用代码实现视觉效果。 电商项目开发者：想了解电商网站的基本架构和功能实现，为后续复杂项目打下基础。 使用场景及目标 场景设定 想象你是一位独立开发者，受委托开发一款面向广大消费者的在线花店平台。用户需能轻松浏览各类鲜花产品，查看详细信息，加入购物车，并最终完成购买流程。同时，网站需要具备吸引人的视觉设计，确保良好的用户体验。 学习目标 HTML基础：掌握标签的使用，构建页面结构，理解语义化的重要性。 CSS技能：运用选择器、盒模型、布局技术如Flexbox等
<!doctype html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <!--条件注释语句,当满足if语句时则执行--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!--编码格式--> <title>小美花店-首页</title> <!--引用js文件--> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/common.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/ddsmoothmenu.js"></script> <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.elastislide.js"></script> <script src="js/jquery.jcarousel.min.js"></script> <script src="js/jquery.accordion.js"></script> <script src="js/light_box.js"></script> <script type="text/javascript">$(document).ready(function(){$(".inline").colorbox({inline:true, width:"50%"});});</script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/orange.css"> <link rel="stylesheet" href="css/skeleton.css"> <link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/ddsmoothmenu.css"> <link rel="stylesheet" href="css/elastislide.css"> <link rel="stylesheet" href="css/home_flexslider.css"> <link rel="stylesheet" href="css/light_box.css"> <script src="js/html5.js"></script> </head> <body> <div class="mainContainer big container"> <!--主要内容区--> <!--Header Block--> <div class="header-wrapper"> <header class="container"> <div class="head-right"> <ul class="top-nav"> <li class=""> <a href="#">我的账户</a> </li> <li class="my-wishlist"> <a href="#">收藏</a> </li> <li class="checkout"> <a href="#">结算</a> </li> <li class="log-in"> <a href="account_login.html">登录</a> </li> </ul> <section class="header-bottom"> <!--搜索和购物车--> <!--section新标签，与div类似，语义化--> <div class="cart-block"> <!--购物车--> <ul> <li>(2)</li> <li> <a href="#" title="购物车"> <img title="购物车" alt="购物车" src="picture/item_icon.png"> </a> </li> <li>购物车</li> </ul> <div id="minicart" class="remain_cart" style="display: none;"> <p class="empty">您的购物车共有2件商品</p> <ol> <li> <div class="img-block"> <img src="picture/small_img1.png" title="" alt=""> </div> <div class="detail-block"> <h4> <a href="#" title="玫瑰">玫瑰</a> </h4> <p> <strong>1</strong> x ￥99.00 <!--strong用于文本加粗，强调作用--> </p> <a href="#" title="Details">细节展示</a> </div> <div class="edit-delete-block"> <a href="#" title="Edit"> <img src="picture/edit_icon.png" alt="Edit" title="Edit"> </a> <!--<img>中“alt”当浏览器无法加载图片时显示替代文本的属性--> <a href="#" title="Remove"> <img src="picture/delete_item_btn.png" alt="Remove" title="Remove"> </a> </div> </li> <li> <div class="img-block"> <img src="picture/small_img.png" title="" alt=""> </div> <div class="detail-block"> <h4> <a href="#" title="玫瑰">玫瑰</a> </h4> <p> <strong>1</strong> x ￥99.00 </p> <a href="#" title="Details">细节展示</a> </div> <div class="edit-delete-block"> <a href="#" title="Edit"> <img src="picture/edit_icon.png" alt="Edit" title="Edit"> </a> <a href="#" title="Remove"> <img src="picture/delete_item_btn.png" alt="Remove" title="Remove"> </a> </div> </li> <li> <div class="total-block"> 共计: <span>￥198.00</span> </div> <a href="index.html" title="结算" class="orange-btn">结算</a> <!--<div class="clear"></div>--> </li> </ol> </div> </div> <!--搜索框--> <div class="search-block"> <input type="text" value="搜索"> <!--定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 并不是所有的主流浏览器都支持新的input类型。
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPjs右侧悬浮在线客服代码12.48KB10月前
    ZIP单缝、双缝、多缝夫琅和费衍射284.46KB10月前
    ZIPUnity Epp Plus1.16MB10月前
    ZIPhtml+js+css母亲节祝福.zip1.48KB10月前
    ZIPfrp中文注释配置文件目前软件最新版本为v0.58.114.4KB10月前
    ZIP171448359570263健康饮食系统App.zip21.5MB10月前
    ZIPday01_程凯.zip122.44KB10月前
    ZIP444363039639459PDF电子版.zip43.55MB10月前