html+js+css实现一个鲜花商城

资源文件列表(大概)

文件名

大小

account_login.html

16.48KB

category.html

35.43KB

contact_us.html

16.47KB

css/

css/ddsmoothmenu.css

2.22KB

css/elastislide.css

861B

css/home_flexslider.css

3.72KB

css/layout.css

1.7KB

css/light_box.css

4.83KB

css/orange.css

6.77KB

css/skeleton.css

31.98KB

css/style.css

53.73KB

cy.html

36.19KB

images/

images/banner_left_btn.png

230B

images/banner_right_btn.png

235B

images/border.png

112B

images/borderbottomcenter.png

111B

images/borderbottomleft.png

215B

images/borderbottomright.png

217B

images/bordermiddleleft.png

108B

images/bordermiddleright.png

108B

images/bordertopcenter.png

111B

images/bordertopleft.png

216B

images/bordertopright.png

214B

images/circle_outside.png

265B

images/currency_arrow.png

201B

images/desc_bullet.png

183B

images/email_friend_icon.png

241B

images/free_shipping_icon.png

1.43KB

images/iconspro.png

3.86KB

images/left_nav_arrow.png

156B

images/like_next_btn.png

203B

images/like_prev_btn.png

200B

images/listing_bullet.png

189B

images/loading_background.png

157B

images/mobmenu.png

351B

images/nav_arrow.png

152B

images/next_img_btn.png

246B

images/overlay.png

182B

images/prev_img_btn.png

246B

images/scrollernav.gif

738B

images/search_icon.png

431B

index.html

42.5KB

js/

js/common.js

2.46KB

js/ddsmoothmenu.js

7.45KB

js/jquery-1.8.2.min.js

91.25KB

js/jquery.accordion.js

2.69KB

js/jquery.easing.1.3.js

7.91KB

js/jquery.elastislide.js

12.16KB

js/jquery.flexslider.js

39.24KB

js/jquery.jcarousel.min.js

34.41KB

js/light_box.js

24.91KB

ky.html

37.44KB

lz.html

37.07KB

picture/

picture/banner1.png

370.64KB

picture/banner2.png

444.95KB

picture/banner3.png

396.49KB

picture/banner4.png

441KB

picture/banner_add1.png

158.78KB

picture/banner_add2.png

42.7KB

picture/banner_img.png

48.33KB

picture/default_img.png

63.55KB

picture/default_img1.png

68.98KB

picture/default_img10.png

64.52KB

picture/default_img11.png

52.33KB

picture/default_img12.png

52.42KB

picture/default_img13.png

59.18KB

picture/default_img14.png

62.17KB

picture/default_img2.png

46.32KB

picture/default_img3.png

44.73KB

picture/default_img4.png

40.34KB

picture/default_img5.png

41.2KB

picture/default_img6.png

38.44KB

picture/default_img7.png

59.95KB

picture/default_img8.png

54.2KB

picture/default_img9.png

69.52KB

picture/delete_item_btn.png

665B

picture/edit_icon.png

278B

picture/item_icon.png

849B

picture/logo.png

8.13KB

picture/qty_next.png

164B

picture/qty_prev.png

164B

picture/quick_thum_img1.png

14.23KB

picture/quick_thum_img2.png

17.17KB

picture/quick_view_img1.png

1.55MB

picture/sale_icon_img.png

4.05KB

picture/small_img.png

16.06KB

picture/small_img1.png

13.29KB

tj.html

35.08KB

资源内容介绍

内容概要本项目以构建一个美观且功能完备的“在线鲜花商城”为蓝本，全面融合HTML、CSS和JavaScript三大前端核心技术。在这个项目中，你将亲手设计并实现一个包含商品展示、购物车功能、用户登录与注册的电子商务平台。项目不仅仅关注界面的布局与美化，更重视于通过JavaScript实现动态交互，如商品筛选、数量选择、页面跳转等，为用户营造流畅的在线购物体验。适用人群前端初学者：刚接触Web开发，希望通过实战项目加深对HTML、CSS、JavaScript基础语法的理解。设计爱好者：希望将创意设计转化为实际网页，学习如何用代码实现视觉效果。电商项目开发者：想了解电商网站的基本架构和功能实现，为后续复杂项目打下基础。使用场景及目标场景设定想象你是一位独立开发者，受委托开发一款面向广大消费者的在线花店平台。用户需能轻松浏览各类鲜花产品，查看详细信息，加入购物车，并最终完成购买流程。同时，网站需要具备吸引人的视觉设计，确保良好的用户体验。学习目标HTML基础：掌握标签的使用，构建页面结构，理解语义化的重要性。CSS技能：运用选择器、盒模型、布局技术如Flexbox等

<!doctype html><html lang="en">  <head> <meta charset="utf-8">  <title>小美花店-首页</title>  <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">   <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">   <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  </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="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>  </li> </ol> </div> </div>  <div class="search-block"> <input type="text" value="搜索"> <!--定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。并不是所有的主流浏览器都支持新的input类型。

用户评论 (0)

发表评论

您的昵称:

评分

评论内容:

验证码:

html+js+css实现一个鲜花商城

资源文件列表(大概)

资源内容介绍

用户评论 (0)

发表评论

相关资源

js右侧悬浮在线客服代码

单缝、双缝、多缝夫琅和费衍射

Unity Epp Plus

html+js+css母亲节祝福.zip