CSS选择器

选择器是CSS的核心,从最初的元素、class/id选择器,演进到伪元素、伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单。

1、元素选择器

这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器:

p {line-height:1.5em; margin-bottom:1em;}

2、关系选择器

E F:后代选择器,该选择器定位元素E的后代中所有元素F:

ul li {margin-bottom:0.5em;}

E > F:子选择器,该选择器定位元素E的直接子元素中的所有元素F,它将忽略任何进一步的嵌套:

ul > li {list-style:none;} //仅限ul的直接子元素li,如果li里面还嵌套着另一个 ul 结构时,最里面的 li 将被忽略

E + F:相邻兄弟选择器,该选择器定位与元素E具有相同父元素且在标记中紧邻E的元素F:

li + li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一个li之外的所有li

E ~ F:一般兄弟选择器,该选择器定位与元素E具有相同父元素且在标记中位于E之后的所有元素F:

h1 ~ p {color:#f00;} //定位具有相同父元素的,h1标签之后的所有p标签

阅读详细 »

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

虽然没有能力开发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效果实现思路

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

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

先出个网页的基本HTML结构:
阅读详细 »

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

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

主要是利用 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修改

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

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

日期问题

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

<?php the_data () ?>

阅读详细 »