css - 手机页面上如何显示图片。-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

css - 手机页面上如何显示图片。

怪我咯 2017-04-17 13:44:39

[HTML讨论组]

548

想要问一个问题对于这种界面一般怎么做。
1.分数肯定是动态的。并且就想让其显示在某个位置上。是要使用position:absolute
2."1206510"也希望显示在某个位置上。这时候应该如何切图应该如何编写
3.可能问题编写的也不点清楚。但对于图片在手机上显示的时候比较模糊有没有这部分的文章。

怪我咯

走同样的路，发现不同的人生

全部回复(1)

迷茫2017-04-17 13:46:39 1楼

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