iOS中为网站添加图标到主屏幕以及增加启动画面

2012-05-16

虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的。

既然是在iOS中的Safari折腾的,那么代码中利用到的也基本上都是Safari的私有属性。

添加图标到主屏幕是Web App的第一步:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png">

添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed,区别就在于是否会应用iOS中自动给图标添加的那层高光。

由于iPhone以及iPad都有两种分辨率的设备存在,图标的尺寸就需要做4个:144×144(iPad Retina)、72×72(iPad)、114×114(iPhone Retina)、57×57(iPhone)。

可以使用sizes尺寸来告诉设备该调用哪个图标。

阅读全文 »

JavaScript Slider效果实现思路

2012-03-30

有些事现在不做,以后就不会做了。这句话被我在N种场合下用了N次之后,我终于重新翻开4年前买的《JavaScript DOM编程艺术》了,老老实实的开始重头学JavaScript了。

写JavaScript的思维与CSS相差太大了,以至于现在还是云里雾里的,运用这些天学的粗浅的JavaScript和DOM知识绞尽脑汁写个轮播图,回顾一下整个思路,路过的高手请多多指点。

先出个网页的基本HTML结构:
阅读全文 »

两侧背景自动延伸的CSS实现方法

2010-02-22

方法来源于土豆网的导航,在这里纪录一下实现的思路。

主要是利用 position 属性的 absolute relative 配合 z-index 来实现的,通过position:absolute将需要平铺的背景层叠在另一背景上,这样即可以实现同一位置的两个背景,再使用z-index将内容提升到最高阶显示。

<div id=”a”>
<div id=”b”>
<ul>
<li><a href=”http://www.prower.cn/category/internet”>互联网谈</a></li>
<li><a href=”http://www.prower.cn/category/interaction”>交互设计</a></li>
<li><a href=”http://www.prower.cn/category/technic”>技术言论</a></li>
</ul>
<div id=”c”></div>
</div>
<div id=”d”></div>
</div>

阅读全文 »

Prower V3主题的Bug修改

2010-01-16

Prower V3主题发布已经有好多个月了,期间有一些Bug一直没有去修改,现在发布一下这两个小Bug的修改方法,其中一个是日期的问题,另一个是侧边栏样式的问题。

原主题发布页里的主题包已经更新了,最新下载的不需要再修改了。

日期问题

主题中使用的日志时间调用是:

<?php the_data () ?>

阅读全文 »

取巧的边框等高

2009-12-15

css_border左右结构是平常页面中最经常看到的结构,简洁一些的页面就会使用边框将左右两边隔开,但往往由于左右两边的内容可能是不等高的,所以就会有一高一低的现象。这个时候不管是给A写个边框还是给B写个边框,都会有高低不平,解决这个边框的高低不平之前有看过很多解决方法,但总的来说有些复杂,其实有一种取巧的方法就可以做到,那就是利用CSS属性中的负值。

比如这个示例图中的边框,取一个DIV将A、B两部分都包容起来,然后写border:1px solid #000;再给A容器写右边框border-right:1px solid #000;B容器也写边框border-left:1px solid #000;这样不管哪边高哪边低,都会保证起码有一条边框线是从头到底的。

但这样两条边框线就会造成重复,于是可以给B容器写margin-left:-1px;这样让两条边框重叠在一起,即可解决边框重复的问题。

PS:回头一看,写了个这么囧的日志,算了,既然写了就发了吧。