按照老师的思路把首页DOM写了一遍
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 页眉--><link rel="stylesheet" href="static/css/header.css" /><!-- 主页 --><link rel="stylesheet" href="static/css/index.css" /><!-- 字体图标 --><link rel="stylesheet" href="static/icon-font/iconfont.css" /><!-- 导航 --><link rel="stylesheet" href="static/css/nav.css" /><!-- 秒杀 --><link rel="stylesheet" href="static/css/ms.css" /><!-- 推荐区 --><link rel="stylesheet" href="static/css/tj.css" /><!-- 页脚 --><link rel="stylesheet" href="static/css/footer.css" /><title>京东</title></head><body><!-- 页眉 --><div class="header"><!--菜单--><div class="menu iconfont icon-menu"></div><!-- 输入框 --><div class="search"><div class="logo">JD</div><div class="zoom iconfont icon-search"></div><input type="text" name="" id="" class="words" /></div><!-- 登录按钮 --><a href="" class="login">登录</a></div><!-- 主体 --><div class="main"><!-- 导航区 --><ul class="nav"><li><a href=""><img src="static/images/dh/nav-1.png" alt="" /></a><a href="">京东超市</a></li><li><a href=""><img src="static/images/dh/nav-2.png" alt="" /></a><a href="">数码电器</a></li><li><a href=""><img src="static/images/dh/nav-4.png" alt="" /></a><a href="">京东服饰</a></li><li><a href=""><img src="static/images/dh/nav-4.png" alt="" /></a><a href="">京东生鲜</a></li><li><a href=""><img src="static/images/dh/nav-5.png" alt="" /></a><a href="">京东到家</a></li><li><a href=""><img src="static/images/dh/nav-6.png" alt="" /></a><a href="">充值缴费</a></li><li><a href=""><img src="static/images/dh/nav-7.png" alt="" /></a><a href="">9.9元拼</a></li><li><a href=""><img src="static/images/dh/nav-8.png" alt="" /></a><a href="">领券</a></li><li><a href=""><img src="static/images/dh/nav-9.png" alt="" /></a><a href="">领金贴</a></li><li><a href=""><img src="static/images/dh/nav-10.png" alt="" /></a><a href="">PLUS会员</a></li></ul><!-- 秒杀区 --><!-- 秒杀头部 --><div class="ms"><div class="ms-top"><div class="left"><div class="title">京东秒杀</div><div class="notice"><div class="tips">22点场</div><div class="time">01:02:03</div></div></div><div class="right">更多秒杀</div></div><!-- 秒杀商品列表 --><ul class="ms-body"><li class="item"><a href=""><img src="static/images/ms/ms-1.jpg" alt="" /></a><div class="iconfont icon-rmb">388</div><div class="iconfont icon-rmb">588</div></li><li class="item"><a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a><div class="iconfont icon-rmb">3881</div><div class="iconfont icon-rmb">5881</div></li><li class="item"><a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a><div class="iconfont icon-rmb">288</div><div class="iconfont icon-rmb">388</div></li><li class="item"><a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a><div class="iconfont icon-rmb">1388</div><div class="iconfont icon-rmb">1588</div></li></ul></div><!-- 推荐区 --><h2 class="title">猜你喜欢</h2><ul class="tj"><li class="item"><a href=""><img src="static/images/sp/sp-1.webp" alt="" /></a><p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p><div class="price"><div class="iconfont icon-rmb">233</div><div>看相似</div></div></li><li class="item"><a href=""><img src="static/images/sp/sp-2.webp" alt="" /></a><p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p><div class="price"><div class="iconfont icon-rmb">233</div><div>看相似</div></div></li><li class="item"><a href=""><img src="static/images/sp/sp-3.webp" alt="" /></a><p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p><div class="price"><div class="iconfont icon-rmb">233</div><div>看相似</div></div></li><li class="item"><a href=""><img src="static/images/sp/sp-4.webp" alt="" /></a><p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p><div class="price"><div class="iconfont icon-rmb">233</div><div>看相似</div></div></li><li class="item"><a href=""><img src="static/images/sp/sp-5.webp" alt="" /></a><p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p><div class="price"><div class="iconfont icon-rmb">233</div><div>看相似</div></div></li><li class="item"><a href=""><img src="static/images/sp/sp-6.webp" alt="" /></a><p>阿道夫放假啊考虑到房价奥克兰的房间父亲为认为其二阿迪斯发就</p><div class="price"><div class="iconfont icon-rmb">233</div><div>看相似</div></div></li></ul></div><!-- 页脚 --><div class="footer"><div><div class="iconfont icon-home"></div><span>首页</span></div><div><div class="iconfont icon-layers"></div><span>分类</span></div><div><div class="iconfont icon-kehuguanli"></div><span>京喜</span></div><div><div class="iconfont icon-shopping-cart"></div><span>购物车</span></div><div><div class="iconfont icon-shopping-cart"></div><span>用户中心</span></div></div></body></html>