分类‘设计园地’

QQ内置浏览器下网页行高、字体大小显示异常解决

最近手机端测移动网页,偶然发现,iOS下访问都正常的页面,Android下微信内嵌浏览器、自带浏览器等都正常,唯独手机QQ内嵌浏览器下显示略不正常,比如设置了16px字体,看起来明显没有16px,而网页部分元素是由行高撑起的,没有固定高度。于是,正常的页面在QQ内嵌浏览器中显示出现没有垂直居中、元素高度缩小等。

一开始以为是兼容问题,简单搜了下,只有看到知乎上有人问类似问题,感觉有点不可思议,感觉这么"大"的问题不可能没人发现,于是就怀疑自己的写法是否有问题,首先打开页面时,在界面上打出某元素的font-size,结果,和设置的值14px相差甚远,算了一下,只有设置像素的79%。 查看更多...

纯CSS实现Footer固定底部,超过一屏自动撑开

日常开发中经常遇到网页内容过少时底部版权区域上浮,网页是经典的Header、Content、Footer三部分组成的情况下,之前要么采用js修改Footer的position,高度低于一屏时采用fixed,超出改用static,但是这样会出现抖动,也试过初始化时设置Content的min-height,但终归是使用了js,不太完美,CSS的也试过使用margin-bottom:-10000px;padding-bottom:10000px的方法填充底部颜色,但效果不见得有多好看。

最近又遇到此类问题,尝试采用之前提到过的CSS水平垂直居中方法来解决,最终找到比较靠谱的方法,就此总结一下,以备后用。

废话不说,直接上代码,以下为CSS,采用border-box,所以IE7下面无效,由于工作原因,只测试到IE8,没考虑低版本浏览器。 查看更多...

自适应高度div内嵌iframe高度被撑开问题解决

标题有点长,就想表达一个意思,div自适应的情况下,内部嵌入iframe,iframe边框什么的全部设置0,本以为外层div可以完美自适应,结果div在不同浏览器却生生多出3-5个像素的高度。

找了下相关文章,发现确有此问题,有人说用负的margin值,可终究不完美,终极完美解决方案竟然是给iframe加display: block,或者vertical-align: bottom。

效果如图所示:
iframe_div_1
查看更多...

div绝对居中、宽高自适应、多栏宽度自适应

最近工作上有需求写一些页面,很久没动手了,发现很多排版、样式等技巧都忘得差不多了,几番折腾,还算解决了基本的布局问题。下面分享一下常见的几种div布局问题。

1、div绝对居中。
效果如下:
divposition1
就是固定大小的div在浏览器中垂直、水平都居中,适合用到浮动弹出框、页面居中的登陆框等你想得到的地方。以前我也曾使用window.onload和window.onresize来控制高度自适应,宽度好说,兼容IE和其他主流浏览器的,直接文本居中,内部“margin:0 auto;”。 查看更多...

几种有用的网页排版技巧分享

在网页设计中经常会忽略排版,其实这是很不利于SEO和提高用户体验的举动,因为注重网页排版可以提高你的网页设计水平和可读性。下面分享几种有用的排版技巧,希望有用。

1、纠正行高

最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度,所以我们必须按照文本字体大小来设定行高。
一般来说,在设置文本行高的时候,我经常在字体大小的基础上加上7个像素(对12-17像素的字体而言)
查看更多...

发布完善版WordPress手机主题一款

主题不是我个人所设计,只是在原有主题上加以修改的。近来有朋友提及博客首页访问页面时,想起来我的博客确实有手机页面,而且有wml和xhtml两个版本的,域名分别解析为wap和3g,昨天做了url匹配调整,发现很多功能不好用了,而且样式也过于老土,再说现在的手机这么强悍了,继续使用wml版也没必要了,于是卸载了原先使用的WP-T-WAP插件,打算找个更好的。

折腾了老半天觉得不如找个针对手机设计的主题,因为直接接触过类似Mobile Domain的绑定手机域名的插件,可以讲正常安装的主题显示在所绑定域名访问时显示指定主题样式,随手一搜,还真找到不少中意的主题。 查看更多...

CSS3动画技术应用基础分享

随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常,而且形成了鼓励创新、避免hack、重前端脚本的氛围。

网络是一个非常好的环境,也是一个有丰富的知识来分享的协作社区。我们想要有圆角 ,我们就实现了它;我们想要 多背景图片,我们实现了它;我们想要 边框图片,我们也让它实现了。所以需求从来不是问题,否则,我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道,网络无所不能。

为网络而生

CSS 3的属性比如border-radius、box-shadow和 text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验,而且它们可以优雅的降级。然而,这些只是CSS 3能为我们做的众多事情中的一小部分。 查看更多...

Responsive Web design(响应式网页设计)

所谓Responsive Web design(响应式网页设计),通俗的说,就是可以自适应的网页设计。随着3G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?目前各大网站、博客已经有向此方向改变的趋势,我们也得及时做下了解。

手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。 查看更多...

Photoshop CS6惊艳的新特性分享

3月份,Photoshop CS6 Beta版(下文简称PS CS6)发布公测,并在4月发布了正式版,因为网络以及电脑性能问题,再加上最近没有从事这方面的工作,没能及时体验,最近才注意到,photoshop cs6有着多项惊艳的新特性,工作中整天和像素打交道的朋友,感触比较深的特性可能就是PS CS6支持矢量对象绘制、变换时像素自动对齐网格喽。 查看更多...

网页设计师必须知道的10件事

在做网站时会遇到很多的问题,所以网页设计师通常要扮演多种角色,并且要掌握如何构建一个有效实用的网站布局知识。
你在网页设计所学到的大多数教训都来自工作经验。学习是一个反复持续的过程,并且没有比犯错更好的方式来获得知识(从错误中学习)。在本文中,我们将讨论10个重要并常规的技巧,这是每位网页设计师新手都应该知道。

1. 优化图片,获得更好的页面加载速度

学习如何通过选择正确的格式,来优化网页图片,并确保文件大小在可行的范围你是足够小的。虽然现在人们已经都在使用宽带,但仍然有人是拨号上网。此外,虽然移动装置技术的普及,但移动装置却不一定支持像宽频一样的速度,图片文件的大小可能还是会延长网页的加载时间,有可能把用户赶走的。 查看更多...