网页设计时候,经常遇到需要使用icon美化页面,也经常会同一个icon需要不同颜色和尺寸。以往只能反复进行切小图片,既耗时又占流量和空间。
现在流行使用icon样子的字体来完成这工作,这样做的好处有不少,由于是字体,我们可以通过css很方便的控制color、size等字体参数。
其实很早微软在word等软件中就可以使用windings这类icon字体,而目前网页设计师们常用的是Font Awesome这个字体,这个字体包含了很多常用的icon。 Read more
网页设计时候,经常遇到需要使用icon美化页面,也经常会同一个icon需要不同颜色和尺寸。以往只能反复进行切小图片,既耗时又占流量和空间。
现在流行使用icon样子的字体来完成这工作,这样做的好处有不少,由于是字体,我们可以通过css很方便的控制color、size等字体参数。
其实很早微软在word等软件中就可以使用windings这类icon字体,而目前网页设计师们常用的是Font Awesome这个字体,这个字体包含了很多常用的icon。 Read more
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部,换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超过浏览器高度时,Web页面的footer部分在页面的底部,总而言之Web页面的footer部分永远在页面的底部,换句说,Footer部分永远沉底。 Read more
1、了解几个概念
(1)分辨率。分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。
(2)屏幕大小。屏幕大小是手机对角线的物理尺寸,以英寸(inch)为单位。比如某某手机为“5寸大屏手机”,就是指对角线的尺寸,5寸×2.54厘米/寸=12.7厘米。
(3)密度(dpi,dots per inch;或PPI,pixels per inch)。从英文顾名思义,就是每英寸的像素点数,数值越高当然显示越细腻。假如我们知道一部手机的分辨率是1080×1920,屏幕大小是5英寸,你能否算出此屏幕的密度呢?哈哈,中学的勾股定理派上用场啦!通过宽1080和高1920,根据勾股定理,我们得出对角线的像素数大约是2203,那么用2203除以5就是此屏幕的密度了,计算结果是440。440dpi的屏幕已经相当细腻了。 Read more
a{ display:block; width:100px; height:100px; cursor:hand; }
<a href="#"></a>
可以在a上做背景,也可以在父级标签上做背景。
讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media Query
实现响应布局)。 Read more
CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3: Gradient─CSS3渐变。 Read more
垂直居中一直是一个比较头疼的问题,我这里只是解决了部分情况下的垂直居中问题,抛砖引玉,如果你的问题没有解决,试试看从我这个方向出发修改一下代码。 Read more