现在的屏幕分辨率。小到320px(iPhone),大到2560px或甚至更高(大显示屏)。范围内变化很大。除了使用传统的台式机。用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这样的情况下,固定宽度的设计方案将会显得越发不合理。页面须要有更好的适应性,其布局结构要做到依据不同的设...
分类:
移动开发 时间:
2015-07-20 12:37:06
阅读次数:
162
几年前,很难找到一个合适的颜色选择器。正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总。在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复杂,其他比较简单,相信应该会有适合你的。1.ExColorExColor是一个类似Photoshop...
分类:
Web程序 时间:
2015-07-17 00:23:41
阅读次数:
541
近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”。响应式web设计是一种纯前端技术js、css等实现的针对不同设备访问同一网址看到不同的布局,是页面内容更适合当前设备...
分类:
移动开发 时间:
2015-07-14 20:09:14
阅读次数:
244
不要指定横向页面组件的高度,要让它们能够在纵向自由扩展。 常见的包含文章正文或大段文字的区域,应该适应任何篇幅和大小的文字。 但是例如文章标题、登陆信息栏等也要考虑文字内容数量及高度的变化。 例如:下图中标题文字数量过多时固定高度就会破坏样式 如何修改: 1.HTML结构为:利用H5的header标...
分类:
Web程序 时间:
2015-07-14 00:05:52
阅读次数:
238
1. CSS3 border-radius 圆角矩形框 圆角矩形框组件是页面布局中常常用到的,利用CSS3的border-radius可非常方便的创建。 并且在横向纵向上面都有很好的扩展性和灵活性。 border-radius需要针对不用浏览器做兼容,-webkit-和-moz-部分语法还有些区别。...
分类:
Web程序 时间:
2015-07-13 23:59:26
阅读次数:
485
这个web中常见的单元布局,最好的布局方式就是利用float布局。 其中有个很关键的问题是需要清浮动。子集浮动是无法撑开父级的高度。 目前较完善的清浮动解决方案:在浮动的父级上添加.clear,达到清楚浮动的效果。 .clear{ *zoom:1; /*利用CSS hack 触发IE6,7hasla...
分类:
Web程序 时间:
2015-07-13 23:59:16
阅读次数:
391
最佳设计:可以让用户自由控制任何页面的文字大小。 浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的。我们不能排除视障用户(如近视)、老年用户不会这么做. 利用CSS3的rem单位,避免了em相对父元素比例的嵌套问题,为了兼容IE低...
分类:
Web程序 时间:
2015-07-13 23:50:35
阅读次数:
159
1.页面需要用到table的时候,样式重置CSS要设置: table{ border-collapse: collapse; border-spacing: 0; } 2. HTML结构 标题 ... /*tfoot在tbody之前,这样浏览器就可以在收到所有数据前呈现页脚了*/ ... ...
分类:
Web程序 时间:
2015-07-13 23:47:06
阅读次数:
224
一个完整的页面和其中的组件该如何具备灵活性。 怎么样利用CSS来实现无论屏幕、窗口以及字体的大小如何变化,都可以自由扩展和收缩的分栏式页面。 要决定使用流动布局、弹性布局还是固定宽度的布局,得由项目的特点和需求来决定。 流体布局 Header Goes Here ...content goes he...
分类:
Web程序 时间:
2015-07-13 23:45:09
阅读次数:
236
1. 在任何可能使用背景图片的地方应设置同样的颜色的背景色。 防止图片不能加载的情况下,页面内容同样保持较好可读性。 例如文字为白色,背景图为深色,如果不设置背景色,当背景图未成功加载, 而浏览器多数默认背景为白色,那么这是文字内容无法可读。 2.当禁用CSS样式后,web仍然能够呈现很好地内容页面...
分类:
Web程序 时间:
2015-07-13 23:43:01
阅读次数:
185