今天在公司摸鱼时突然被组长抓包，让我临时搞个购物网页的原型出来，说是明天客户就要看。我心里嘀咕着“现学现卖呗”，但还是硬着头皮打开记事本开始敲代码。
从画鬼符开始
新建个txt文档改名叫*，先用骨头架子标签搭框架：
<!DOCTYPE html>这行必须顶在最前面
<html>里塞个<head>写网页标题，客户要求叫“土味杂货铺”
<body>才是真正能看见的东西
结果手滑在标题标签外多打了个/，整个页面变成空白。折腾半小时才发现是<title>土味杂货铺</title>写成了<title/>土味杂货铺</title>，气得差点把键盘砸了。
商品堆着摆
用<div>切豆腐块当商品展示区：
每个商品给<img>标签塞图片，本地图片死活不显示，原来得写成<img src="./酸菜坛子.jpg">
底下跟三行文字：商品名用<h3>，描述用<p>，价格用红色<span>
所有方块都挤在左边，突然想起要加<style> display:inline-block</style>让它们横着排。手一抖写成display:block-inline，页面直接崩成俄罗斯方块。
购物车玄学
最头疼的是购物车按钮。先给每个商品加个按钮：
<button onclick="addToCart('酸菜坛子')">扔进筐</button>
在<script>里写个假函数：
function addToCart(itemName){
alert('假装 ' + itemName + ' 进购物车了');
测试时狂点十几下，弹窗像烟花似的炸满屏幕。组长伸头问：“你这鞭炮铺子特效？”
凑合能交差
瞎搞了个顶部导航栏：
用<ul>包着三个<li>
首页 所有商品 购物车（还没做链接）
把body背景调成辣眼睛的玫红色，组长看见直接笑喷：“这色调跟广场舞大妈似的！” 但客户微信回了个大拇指表情，这事就算蒙混过关了。全程没提响应式设计，电脑上看排版都乱得跟菜市场似的——反正就说是“复古风设计理念”。
