image.png
这几个图片用的是webp图片

制作思想

  • 一个大盒子nav
  • 写移动端的导航栏就不用 ul li
  • 直接用a，浮动，设置宽 20%
  • a 里面插入图片 ，文字用 span 再转为块级元素，换行显示

代码

index.html

  1.  <!-- nav导航栏模块 -->
  2.     <nav>
  3.       <a href="">
  4.         <img src="upload/nav1.webp" alt="">
  5.         <span>京东超市</span>
  6.       </a> <a href="">
  7.         <img src="upload/nav1.webp" alt="">
  8.         <span>京东超市</span>
  9.       </a> <a href="">
  10.         <img src="upload/nav1.webp" alt="">
  11.         <span>京东超市</span>
  12.       </a> <a href="">
  13.         <img src="upload/nav1.webp" alt="">
  14.         <span>京东超市</span>
  15.       </a> <a href="">
  16.         <img src="upload/nav1.webp" alt="">
  17.         <span>京东超市</span>
  18.       </a> <a href="">
  19.         <img src="upload/nav1.webp" alt="">
  20.         <span>京东超市</span>
  21.       </a> <a href="">
  22.         <img src="upload/nav1.webp" alt="">
  23.         <span>京东超市</span>
  24.       </a> <a href="">
  25.         <img src="upload/nav1.webp" alt="">
  26.         <span>京东超市</span>
  27.       </a> <a href="">
  28.         <img src="upload/nav1.webp" alt="">
  29.         <span>京东超市</span>
  30.       </a> <a href="">
  31.         <img src="upload/nav1.webp" alt="">
  32.         <span>京东超市</span>
  33.       </a>
  34.     </nav>

index.css

/* nav导航栏模块 */
nav a {
  float: left;
  width: 20%;
  color: #666;
  text-align: center;
}

nav a img {
  width: 40px;
  margin: 10px 0 0 0;
}

nav a span {
  display: block;
  margin: 6px 0 0 0;
}

图片格式

DPG图片压缩技术

京东自主研发推出DPG图片压缩技术，经测试该技术，可置接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。

webp 图片格式

谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3并能节省大量的服务器宽带资源和数据空间