(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt=&qu

效果图: 1.使用小图标作为背景图实现 html: <div class="test"> <ul> <li class="method1"><a href="#">背景图实现对齐</a></li> <li class="method2"><i class="icon"></i><a href=&

---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>---恢复内容结束---</p> <style> div{ width: 100px; height: 100px; background-color: cyan; margin-top: 10px; font:900 18px/100px "STsong"; text

public class DrawableTopLeftTextView extends TextView { private Paint mPaint; private float fFontHeight; private Drawable[] drawables; private int leftMargin = 40; //TODO 这个要通过代码获取,不能硬编码 public DrawableTopLeftTextView(Context context, AttributeSet at

原图: 效果图: 备注:vertical-align:middle <div> <p class="time tl-size12" style="padding-top: 3px">45秒前</p> <img src="../res/image/sc.png" style="width: 15px;height: 15px;padding-left: 20%;vertical-align:mid

css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这样的话,就会导致请求数量太多,造成资源浪费,以及访问速度变慢. 碰到这样的情况,可以使用两种方式解决这种问题:CSS雪碧图以及字体图标.但是这两种方式也都有不同的适用场景,需要根据实际需求来做取舍. 1.CSS雪碧图简介 CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图,是一种CSS

从WP转IOS了,还是放不下...... 在项目中,要实现如图多个不同大小的文字   底部对齐的效果   像下面这样: (想要的效果) 以为用三个UIFont不同的UILabel  之后让他们底部对齐就可以了,但是效果是下面这样的:  (不想要的效果) 底部完全不对齐呀,为什么"1314"比两边高出了那么多呀!!!!强迫症不能忍呀!!! ---------------------------------------------------------------------------

1.移动端(安卓设备.ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐.PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采用传统方式(vertical-align: middle;或者position定位)实现图标文字对齐. 2. 实际上不管是line-height还是用position去定位,不管你display用的什么,不同机型的显示效果都会不一样. 水平上的差距几乎没有,垂直方向上的效果会多种多样. 遇到这种ui

在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt="" class="comment"&g

设计师做的高保真原型图,难免会用到艺术字体. 采用切片的方式,简单,粗暴,节省时间.除了retina屏其它兼容性也是一流.但是在修改的时候,会花很大的力气.即使只是修改文字大小,也需要重新切图,更别说修改文字,或者改变文字颜色了. 有没有想过,文字本来就应该是它原本的样子.只是看起来像,似乎不和情理. 之所以不直接使用艺术字体,最大的一个问题就是字体文件,一般都太大了.轻轻松松就上兆的节奏.在网页这种流量寸土寸金的地方,真的是很难应用起来. 我们在一个网页上一般用到的艺术字体的地方,往往只有ba

使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页上轻松地添加图标.由于使用的是字体图标,所以利用文本相关的标签引用,并且放大不会失真.但是和字体不一样的是,如果用<i>标签或者<b>标签等引用的时候,并不会有斜体或者粗体的效果,但是<u>标签却有下划线的效果.在font-awesome官网上找到icon的名字,在引用的元

Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页上显示却可以伸缩大小不影响清晰度.可改透明度.旋转.改变字体颜色.产生阴影.体积更小.支持所有浏览器. 字体图标下载 icomoon (德国) icofont(中国) 以中国的阿里巴巴字体图标站为例,首先登陆该站点,选择我的项目 新建一个项目,保存.回到主页搜索需要的图标,选择喜欢的图标后点击添加到

字体图标介绍 网页中图片有很多优点,但也有很多缺点,会增加文件的大小以及增加http请求.这时候就需要用的字体图标(iconfont).字体图标的优点,可以跟图片一样改变透明度.旋转等,本质上是文字,可以改变颜色,产生阴影等:本身体积小:几乎支持所有浏览器.移动端设备必备. 项目中字体图标使用流程 1.UI人员设计字体图标效果图(svg) 2.前端人员上传生成兼容性字体文件包 3.前端人员下载兼容字体文件包到本地 4.把字体文件包引入到HTML页面中 生成字体文件包方法 上传文件到专门的网站,生

前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计字体图标效果图 使用illustrator或者Sketch矢量图软件创建icon图标,并保存svg格式. 2.前端上传生成兼容性字体文件包 将svg格式文件转换成页面能够使用的字体文件,并且需要兼容各种浏览器. icomoon字库:https://icomoon.io/ 阿里妈妈字库:https:/

目录 理论 一:字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真. 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的.此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦.. 这就是字体图标(iconfont). 1: 字体图标优点 可以做出跟图片一样可以做的事情,改变透明

精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大图片中. 这个大图片也称为sprites精灵图或者雪碧图 移动背景图片位置,使用background-position 移动的距离就是这个目标图片的x和y坐标.注意网页中的坐标有所不同 使用精灵图的时候需要精确侧脸,每个小背景图片的大小和位置 字体图标 主要用于显示网页中通用.常用的一些小图标 精灵

页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div class="txt"> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em>

字体图标的作用: 1. 可以做出图片一样可以做的事情, 改变透明度, 旋转度,等... 2. 但是本质其实是文字,可以很随意的改变颜色, 产生阴影,透明效果等 3. 本身体积更小,但携带的信息并没有消减 4. 几乎支持所有的浏览器 5. 移动端设备必备良药 字体图标使用流程: 1. UI人员设计好字体图标效果图 (svg) 使用软件 illustrator 或sketch 2. 前端人员上传生成兼容性字体文件包 https://icomoon.io/ iconfont.cn 3. 前端人员下载兼

CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术. 精灵图主要针对与小的背景图片使用.我们在网页中看到的一些小图片,比如下图中圈起来的部分 当你去查看原图时,会发现显示出来的是这样的 这就是精灵图的应用

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不