小图标 | 易学教程

视网膜New iPad与普通分辨率iPad页面的兼容处理

阅读更多关于视网膜New iPad与普通分辨率iPad页面的兼容处理

一、这是篇经验分享就算不是果粉也应该知道，iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”，其设备分辨比（之前有详细介绍，点击这里查看）是iPad2的两倍。 – iPad mini也是普通分辨比。 iPad2与new iPad同时显示一个页面，宽度都是1024像素的，那差别在什么地方呢？——就在于new iPad每个像素点实际上有4倍的普通像素点，如下示意(© smashingmagazine)：我们使用CSS设置的像素值(px)属于普通像素点，或者称之为标准像素点。因此，一张200×200尺寸的图片，我们设置如下CSS: img { width: 200px; height: 200px; } 在iPad2或Mini iPad中就是很正常显示的图片；但是，在New iPad中，1个CSS像素点实际上有4个位图像素点，1个分成4个，显然不够分啊，只能颜色近似选取，于是，图片感觉就是模糊的(© smashingmagazine)！因此，要想让视网膜屏幕下的图片高清晰显示，我们需要的图片的原始大小不能是200×200像素，而需要2倍高宽，即400×400像素，CSS像素限制依然是： img { width: 200px; height: 200px; } 此时，视网膜屏幕下图片就显示OK了

web.xml标签详解

阅读更多关于 web.xml标签详解

转自https://blog.csdn.net/ee470474137/article/details/45721025  < context-param>  < description> </ description>  < param-name> </ param-name>  < param-value> </ param-value> </ context-param>  < description> </ description>  < display-name> </ display-name>  < distributable/>  < ejb-local-ref>  < description> </ description>  < ejb-link> </ ejb-link> <!-

CSS Sprite雪碧图

阅读更多关于 CSS Sprite雪碧图

什么是雪碧图？雪碧图也叫CSS精灵，是一种CSS图像合成技术；通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。如下：如上雪碧图，background-position使用定位如下X和Y轴，注：原点0，0 位置，之后 X和Y轴均为负值，定位到图片左上侧起点后根据width和height截取小图标为什么应用雪碧图？网站开发90%会用到小图标，多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片，即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。什么图片是和拼成雪碧图？ 1. 静态图片，不随用户信息的变化而变化 2. 小图片，图片容量比较小（一些大图不建议拼成雪碧图） 3. 加载量比较大使用雪碧图的优缺点？优点：调用简单、维护方便；缺点：请求文件过多、引发性能问题；如何生成雪碧图？ 1. PS手动拼图（图片量少） 2.使用sprite工具自动生成，如css Gaga 雪碧图实现方式：慕课网雪碧图教程推荐软件， CssGaga 帮助索引 PS：该软件只有windows版本，

title中添加小图标

阅读更多关于 title中添加小图标

<title>标签中不能添加图片，但是可以添加小图标。步骤：　　1、做一个16 X 16像素的ico格式的图标。具体操作方法是，先在Photoshop中做一个透明背景的16 X 16像素 PNG格式的小图标，再在AWiconsPro软件中导入这个 PNG图标，再另存为ICO格式。注意：文件名一定要保存为favicon.ico。　　2、把favicon.ico图标文件上传到你的网站根目录即可。下次浏览这个网站时网页的标题栏就会显示这个小图标。注意：如果没有显示，可能是浏览器缓存问题，此时按Ctrl+F5强制刷新即可。使用方法： <head> 　　... 　　<link rel="shortcut icon" href="图片路径" /> </head> 制作链接:http://www.bitbug.net/ 来源： http://www.cnblogs.com/wuweb/p/7875134.html

input如何添加图标

阅读更多关于 input如何添加图标

代码：<input type="text" class="user" /> 设置class类属性，添加小图标。创建<style>标签，然后在这个标签里面设置user样式。 1.使用background-image设置input背景图片； 2.background-size设置背景图片的大小； 3.background-position设置背景图片的位置； 4.background-repeat设置背景图片不重复； 5.padding设置图片的内边距。 css样式代码： <style type="text/css"> .user{ 　　 background-image: url(img/user.png); /*设置小图标*/ 　　background-size: 25px 25px; /*小图标的大小*/ 　　 background-position: 5px 4px; /*小图标在input的位置*/ 　　background-repeat: no-repeat; /*背景小图标不重复*/ 　　padding: 8px 10px 8px 40px; /*设置input内边距*/ 　　/*设置input样式好看*/ 　　border:1px solid #ddd; 　　margin: 30px; 　　width: 220px; } </style> 来源： https:/