微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > web前端 > html教程 > 正文

icon怎么使用_html/css_WEB-ITnose

php中文网
发布： 2016-06-21 09:29:24
原创
1363人浏览过

有没有大神指导下，类似这种图标文件怎么使用？万分感谢


回复讨论(解决方案)

什么叫怎么使用。。。。。。。

什么叫怎么使用。。。。。。。



怎么把其中的某个小图标显示出来，而不是显示全部的

background-image,background-posituion

background-image,background-posituion



拼错了 poistion


background-image,background-posituion



拼错了 poistion

能给我发个例子吗，万分感谢。
#recent .ui-icon{
background-image : url(icon.png);
background-position : -345px -112px;
background-repeat : no-repeat;
}
我这个显示不出来图片，不知道  position 中的像素是怎么定义的

图片左上角是0,0
position就是相对于左上角的偏移像素

你这图片是480*1140,共计10*30个图标，平均每个图标占48px*48px的空间，
那么：
第一排第一个的图标的偏移量就是0,0，即background-position：0,0
第一排第二个的图标的偏移量就是48px,0,即background-position：-48px,0
第一排第三个的图标的偏移量就是96px,0,即background-position：-96px,0
....
第二排第一个的图标的偏移量就是0,48px，即background-position：0,-48px
第二排第二个的图标的偏移量就是48px,48px,即background-position：-48px,-48px
第二排第三个的图标的偏移量就是96px,48px,即background-position：-96px,-48px

...
依此类推


nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档








这个做成图不对吧，这个应该做成font文件 通过@font-face 引用吧

图片左上角是0,0
position就是相对于左上角的偏移像素

你这图片是480*1140,共计10*30个图标，平均每个图标占48px*48px的空间，
那么：
第一排第一个的图标的偏移量就是0,0，即background-position：0,0
第一排第二个的图标的偏移量就是48px,0,即background-position：-48px,0
第一排第三个的图标的偏移量就是96px,0,即background-position：-96px,0
....
第二排第一个的图标的偏移量就是0,48px，即background-position：0,-48px
第二排第二个的图标的偏移量就是48px,48px,即background-position：-48px,-48px
第二排第三个的图标的偏移量就是96px,48px,即background-position：-96px,-48px

...
依此类推


nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档










感谢，但是我的还是没实现~
下面是代码
nbsp;html>




跨平台移动应用

<script></script>
<script></script>





导航工具栏





自定义图标的导航工具栏。

AppMall应用商店
AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

AppMall应用商店56
查看详情 AppMall应用商店






    
    


    
        
            
            
            
            
            
            
            
            
            
            
        
    

6#说的完全可以

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：注册时，获取不到struts标签中的gender值_html/css_WEB-ITnose 下一篇：怎么把这些文字对齐？_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html 如何画斜线_HTML斜线绘制（CSS border/Canvas）方法 使用CSSborder可绘制固定角度斜线，通过设置透明边框和旋转实现，兼容性好但灵活性差；2.使用Canvas能精确控制斜线的角度、颜色和粗细，支持动态绘制与动画，适合复杂场景。根据需求选择：静态用CSS，动态用Canvas。
2025-11-02 02:39:22
867
html如何底部居中_HTML元素（position:absolute）底部居中方法 使用left:50%和transform:translateX(-50%)可让绝对定位元素在页面底部水平居中，适用于任何宽度；或通过设置固定width配合left:0、right:0与margin:0auto实现居中；若父容器可控，采用display:flex、justify-content:center和align-items:flex-end更简洁。推荐首选第一种方法，兼容性好且无需固定宽度。
2025-11-02 01:49:11
732
HTML锚点跳转漏洞怎么发现_页面内部锚点跳转恶意利用漏洞发现 答案：HTML锚点跳转本身无害，但可能被滥用实现内容劫持、钓鱼、XSS等攻击，关键在于JavaScript对location.hash的不安全处理及隐藏元素的恶意显示。
2025-11-02 01:43:10
266
HTML前端权限校验漏洞怎么检测_前端JS权限控制失效漏洞检测方法 答案是检测前端JS权限控制失效漏洞需通过网络请求层面绕过前端限制，直接测试后端权限校验。具体包括：使用开发者工具禁用JavaScript、修改DOM元素、复制并篡改HTTP请求（如通过cURL或BurpSuite），模拟低权限用户发送请求，观察后端是否返回敏感数据或执行高权限操作；若后端未返回401/403错误，则存在越权漏洞。核心原理在于前端控制可被用户完全操控，真正安全依赖后端对每次请求的身份与权限验证。
2025-11-02 00:45:34
929
html5使用localStorage存储数据 html5使用本地存储的实用指南 localStorage提供持久化存储，容量大且不发送至服务器，适合存用户偏好等非敏感数据；通过setItem、getItem等方法操作字符串数据，复杂类型需用JSON转换；可用于记住主题、缓存表单或API数据；受同源策略限制，不支持跨标签实时通信，需处理无痕模式异常。
2025-11-01 23:53:01
780
HTML5在线如何实现全屏功能 HTML5在线交互体验的优化技巧 HTML5全屏API可通过requestFullscreen实现元素全屏，结合事件监听与兼容性处理提升体验。
2025-11-01 23:49:02
639
html如何设置博客_HTML博客页面（主题/布局）设置方法 可通过调整HTML结构与CSS样式实现博客主题与布局设置。一、使用内联CSS在head中添加style标签，定义字体、背景色和标题样式；二、引入外部CSS文件如style.css和dark-theme.css，通过修改link标签的href属性切换主题，结合JavaScript实现动态切换；三、利用header、main、article、aside、footer等语义化标签构建清晰结构，提升SEO与可读性；四、采用CSSGrid设置display:grid、自适应列数和间隙，实现响应式文章网格布
2025-11-01 23:47:02
545
java中怎么实现html5_Java后端生成HTML5页面方法 在Java后端生成HTML5页面，本质是通过服务端代码动态构建符合HTML5标准的网页内容，并将其响应给客户端浏览器。虽然Java本身不直接“实现”HTML5（HTML5是前端标记语言），但可以通过多种方式生成HTML5结构的页面。以下是几种常见且实用的方法。1.使用模板引擎渲染HTML5页面模板引擎是最常用的方式，它将Java数据与HTML模板结合，输出完整的HTML5页面。常用的模板引擎包括Thymeleaf、Freemarker、JSP和Velocity。以Thymeleaf为例：
2025-11-01 23:45:25
973
HTML数据如何用于机器学习 HTML数据预处理的特征工程方法 首先解析HTML提取文本与元信息，再从结构、文本、样式三方面构建特征：1.用BeautifulSoup等工具解析HTML，提取标题、正文、链接及属性；2.统计标签频率、DOM深度、路径模式等结构特征；3.清洗文本并采用TF-IDF或词嵌入向量化；4.提取class、id、样式、脚本等交互与视觉线索，最终转化为模型可用的数值型特征。
2025-11-01 23:13:02
163
html如何插入文件_HTML文件（PDF/DOC）插入（嵌入/链接）方法 使用标签可直接嵌入PDF文件，兼容性好但显示效果因浏览器而异；2.标签适用于嵌入PDF或通过GoogleDocs预览Office文件，用户体验流畅；3.标签加download属性可创建文件下载链接，适合不支持预览的文件类型；4.DOC等Office文件建议转PDF嵌入或调用在线服务预览，也可提供下载。根据需求选择嵌入或下载方式。
2025-11-01 22:54:02
486
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部