手写一个购物网站，购物比你想的网站简单

别被“购物网站”四个字吓住。一个能用的设计HTML页面，核心就三件事：商品列表、代码购物车、购物结算按钮。网站我上周帮朋友改了个二手书摊的设计页面，总共不到200行代码，代码顾客居然真在上面下单了——虽然最后是购物电话联系的。

商品卡片：让图片说话

先看商品区。网站每个商品用<div>包起来，设计里面放<img>、代码<h3>和<p>。购物图片别用高清大图，网站一张50KB的设计缩略图加载速度比10张4K图强十倍。我见过有人塞了十几张产品细节图，结果页面白屏三秒——顾客早跑了。

<div class="product"> <img src="book.jpg" alt="二手《百年孤独》"> <h3>二手《百年孤独》</h3> <p>¥25 <button onclick="addToCart('book')">加入购物车</button></p> </div>

注意那个alt属性。别小看它，图片加载失败时，这行文字就是顾客唯一的线索。我见过有人写“图片1”，那等于告诉用户“我懒得描述”。

购物车：用JavaScript攒局

购物车本质是个数组。点击按钮时把商品名塞进去，再更新页面上的数字。别搞什么数据库，纯前端用localStorage存一下，刷新页面购物车还在——这已经超过80%的静态演示站了。

let cart = []; function addToCart(item) {  cart.push(item); document.getElementById('count').innerText = cart.length; localStorage.setItem('cart', JSON.stringify(cart)); }

有个坑：按钮别用<a>标签。有人习惯性写<a href="#">，结果每次点击页面都跳到顶部，用户以为网站坏了。用<button>，顺手加个type="button"，防止它意外提交表单。

结算按钮：别玩虚的

最后的结算按钮，别只弹个alert("谢谢购买")。那太敷衍了。至少跳转到微信或支付宝的收款码页面——用<a href="weixin://">这种协议链接，手机端能直接唤起App。我那个朋友就靠这个，把页面二维码打印下来贴摊位上，扫码直接进页面下单。

当然，真要上线卖货，还是得接支付API。但个人小项目，一个mailto:链接都能当结算通道。顾客点一下，自动打开邮箱写订单——虽然原始，但管用。

样式：别贪多

CSS就三招：flex布局、border-radius圆角、box-shadow阴影。白色背景，黑色文字，一个亮色按钮。够了。我见过有人用渐变背景加霓虹边框，结果商品图片都看不清。记住，购物网站是卖货的，不是炫技的。

.product {  display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 8px; }

最后说句实在话。HTML购物网站最大的价值不是技术含量，而是让你快速验证“有没有人愿意买”。我那个朋友的书摊，页面丑得跟2005年似的，但每天真有几个人打电话问书。代码能跑，比代码漂亮重要一百倍。你写完了，按F12打开控制台，看到没有红色报错，就可以发给朋友试用了。