步骤：
1：先创建项目文件，在index.html 文件里面添加视口标签 2：分析观察项目结构 3：移动端项目一定要在不同尺寸的设备上面多跑跑，看看页面布局会不会发生变化。 4：百分比布局，不是每一个元素的尺寸必须必须写成百分百。但是百分比布局，宽写百分比，高正常写。
dpg 是京东研发的一种图片格式，dpg是其他格式图片大小的一半。
效果图： 具体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>京东 </title> <link rel="stylesheet" type="text/css" href="css/normalize.css"/> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <!--搜索--> <div class="search_wrap"> <div class="search_menu"> <span></span> </div> <div class="search"> <span class="logo"></span> <span class="fdj"></span> <input type="text" name="" id="" value="" placeholder="电视盒子" /> </div> <div class="search_login">登录</div> </div> <!--背景图--> <div class="back"> <div class="bg"></div> <div class="silder"> <div class="silder_list"> <img src="img/slider1.jpg.dpg"/> </div> </div> </div> <!--主题盒子--> <div class="content_wrap"> <!--导航--> <nav class="cont_nav"> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> <a href="#"> <img src="img/cs.png.webp"/> <span>京东超市</span> </a> </nav> <!--新人专享--> <div class="new_peop"> <div class="peop_l"> <img src="img/new0.jpg.dpg"/> </div> <div class="peop_r"> <img src="img/new1.jpg.dpg"/> </div> </div> <!--每日逛--> <div class="dat"></div> <div class="dat_timing"> <a href="#"> <p>免息星球</p> <p>白条免息够</p> <div> <img src="img/tel.jpg.dpg" alt="" /> </div> </a> <a href="#"> <p>免息星球</p> <p>白条免息够</p> <div> <img src="img/tel.jpg.dpg" alt="" /> </div> </a> <a href="#"> <p>免息星球</p> <p>白条免息够</p> <div> <img src="img/tel.jpg.dpg" alt="" /> </div> </a> <a href="#"> <p>免息星球</p> <p>白条免息够</p> <div> <img src="img/tel.jpg.dpg" alt="" /> </div> </a> <a href="#"> <p>免息星球</p> <p>白条免息够</p> <div> <img src="img/tel.jpg.dpg" alt="" /> </div> </a> <a href="#"> <p>免息星球</p> <p>白条免息够</p> <div> <img src="img/tel.jpg.dpg" alt="" /> </div> </a> <a href="#"> <p>免息星球</p> <p>白条免息够</p> <div> <img src="img/tel.jpg.dpg" alt="" /> </div> </a> <a href="#"> <p>免息星球</p> <p>白条免息够</p> <div> <img src="img/tel.jpg.dpg" alt="" /> </div> </a> </div> <!--为你推荐--> <div class="dat" style="margin: 10px 0 0 0;"></div> <div class="cont_list"> <div class="cont_list_l"> <div class="cont_img"> <img src="img/sp1.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_r"> <div class="cont_img"> <img src="img/sp2.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_l"> <div class="cont_img"> <img src="img/sp1.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_r"> <div class="cont_img"> <img src="img/sp2.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_l"> <div class="cont_img"> <img src="img/sp1.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_r"> <div class="cont_img"> <img src="img/sp2.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_l"> <div class="cont_img"> <img src="img/sp1.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_r"> <div class="cont_img"> <img src="img/sp2.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_l"> <div class="cont_img"> <img src="img/sp1.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_r"> <div class="cont_img"> <img src="img/sp2.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_l"> <div class="cont_img"> <img src="img/sp1.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_r"> <div class="cont_img"> <img src="img/sp2.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_l"> <div class="cont_img"> <img src="img/sp1.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_r"> <div class="cont_img"> <img src="img/sp2.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_l"> <div class="cont_img"> <img src="img/sp1.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> <div class="cont_list_r"> <div class="cont_img"> <img src="img/sp2.dpg.webp"/> </div> <div class="over_text"> <p>卡琪亚 床 皮床双人床现代简约榻榻米真皮床 皮艺软床1.8米婚床 常规实用版（加600定制加强版） 1800*2000 </p> </div> <p class="mony"> <span>￥3100</span> <span>满减</span> <span>看相似</span> </p> </div> </div> </div> <!--底部导航--> <nav class="footer"> <a href="#"> <img src="img/f1.png"/> </a> <a href="#"> <img src="img/f1.png"/> </a> <a href="#"> <img src="img/f1.png"/> </a> <a href="#"> <img src="img/f1.png"/> </a> <a href="#"> <img src="img/f1.png"/> </a> </nav> </body> </html>