Furni 用深绿首屏、黄色按钮和家具图片组织家居品牌网站，既有商品陈列，也有品牌、服务与博客内容。v1.0.0 包含 9 个 HTML 页面，基于 Bootstrap 5.1.3、Tiny Slider、CSS、SCSS 和原生 JavaScript。比较适合做家具展示站或商城原型，但购物车、结账与订单完成页目前只是前端界面，交易后端需要另接。
商品之外，还有品牌与家居内容的展示空间
index.html 把首屏、推荐商品、服务优势、家居内容、客户评价和博客入口放在一起，shop.html 则展示八件家具的商品网格。导航已连通 Home、Shop、About us、Services、Blog 和 Contact us，适合先介绍品牌，再让访客查看产品。
它没有独立商品详情页。首页商品卡片可以进入购物车，而商店页的商品链接仍是 #。需要介绍尺寸、材质或不同款式时，应先补商品详情入口。否则换了商品图片和价格，访客仍找不到足够的购买信息。
about.html与services.html：分别承接公司、团队和服务说明，演示人物、推荐语与服务承诺需要换成真实资料。blog.html：家居文章卡片列表，没有配套文章详情页。卡片应连到新建详情页或现有内容系统，分类和分页也需按内容需求补充。contact.html：展示联系资料与留言界面，收件能力需要另外配置。
各页共用的站点名、导航、页脚和联系方式写在 HTML 中，修改时应一起替换。页脚的登录、知识库、隐私政策等入口，以及商品和博客卡片的占位链接，也需要对应到实际页面。
从购物车到感谢页，目前只走完了页面跳转
数量能增减，金额和购物车状态没有跟着走
cart.html 展示商品表格、优惠码、小计与结账入口。js/custom.js 已为数量输入框绑定加减按钮，可以改变页面显示的数量；但没有重新计算每行小计、总额或保存购物车。刷新后不会留下真实订单状态，删除、优惠码校验和 Update Cart 也需要业务实现。
Place Order 直接进入 thankyou.html
checkout.html 排好了国家、姓名、地址、邮箱、电话与订单摘要，银行转账、支票和 PayPal 使用折叠面板说明付款方式。Place Order 的行为是浏览器跳转到 thankyou.html，没有提交账单字段、创建订单或调用支付网关。看到订单完成页，不代表订单成立或款项已支付。
接入电商后端后，商品、库存、购物车、优惠和订单金额应由真实数据驱动，下单需要处理校验与失败状态，感谢页再展示实际订单编号、支付状态和后续指引。若当前只做产品展示，可以把交易入口改为询盘，避免留下误导性的静态下单流程。
让深绿、黄色与家具图片形成同一套视觉
主样式是 css/style.css，源样式位于 scss/style.scss。可以调整深绿、黄色、字体、圆角和区块间距后再编译到 CSS；不使用 Sass 时也能直接修改现有 CSS。图片与 SVG 放在 images，包括沙发、椅子、团队、人物和博客素材，替换时留意宽高比、文件体积与 ALT。
首页、关于页、服务页和博客页的客户评价使用 Tiny Slider：单项横向轮播，支持导航点、前后切换、自动播放与悬停暂停，切换速度 700 毫秒，间隔 3500 毫秒。参数集中在 js/custom.js，需要改评价节奏时从这里入手。
Bootstrap 折叠菜单、网格与自定义 CSS 负责窄屏重排。家具名称换成长中文后，要留意商品标题和价格是否挤在一起；购物车表格的横向空间、结账字段排列和手机导航也比单看首屏更值得检查。
展示站上线前，先把留言和订阅接通
联系页表单没有提交地址与发送脚本，页脚订阅表单的 action 是 #。两者都不会自动投递邮件或写入订阅系统；模板中的地址、电话、评价、文章与价格也属于演示内容。
- 保留表单时，接入自有 API、邮件服务或表单平台，设置必填字段、邮箱格式、提交中状态、成功与失败反馈、反垃圾与隐私同意。
- 只做静态展示时，可以隐藏未接通的表单，把按钮改为有效联系方式。
- 资源包没有
package.json，查看页面无需安装 Node.js 依赖或先构建；直接打开index.html即可检查静态页面。
随包说明标注 CC BY 3.0，可修改、商用并分享改编版本，但应保留适当署名、许可证链接并说明修改。品牌化时要把业务文案与许可要求区分开，不能把需要保留的署名一起当作演示文字删掉。
暂无评论内容