• 不还是p相叠么。。。

• 对于那几个1206501这几个数字，叫ui做好雪碧图，用background-image切割显示比较好。然后就是简单地使用display:inline-block,利用父级text-align使其居中，或是使用flexbox布局，直接简单粗暴居中。。。

• 手机显示图片模糊，说到底还是图片分辨率的问题

I：
方法1： 分数动态，你就要假定一个最大值，然后图片就按照这个最大值时的宽度去设置
方法2： 若是要搞的夸张一点的话，那就通过 js 计算分数的长度，动态设置 p 的宽度 ， 高度 ， line-height
II： 切图我是不会的，编写的话：

总体框架：
  <section class='score'>
      // 设置标题
      <header class='header'>
        // 背景图片
        <p class='tit_bgi'><img src='' class='img' /></p>
        // 标题内容区域
        <p class='tit_txt'>
          // 主标题
          <h2 class='main_tit'>本轮总分</h2>
          // 副标题
          <h5 class='sub_tit'>xxxxxxxxx</h5>
        </p>
      </header>
      // 设置分数
      <p class='score'>
        // 背景图片
        <p class='bgi'><img src='' class='img' /></p>
        // 历史最高 啊什么的等级
        <p class='rank'><img src='' class='img' /></p>
        // SSS 评分
        <p class='level'><img src='' class='img'></p>
        // 分数
        <p class='points'>1206501</p>
      </p>
      // 内容区域
      <p class='con'>
        .....
      </p>
  </section>

  

III. 手机上模糊，若是专门做手机上的网页，那就得按照手机的尺寸来做图片，不然，高清大图，被缩小后，只能是模糊的...