2015年十二月月 发布的文章

门前

我多么希望,有一个门口
早晨,阳光照在草上

我们站着
扶着自己的门扇
门很低,但太阳是明亮的

草在结它的种子
风在摇它的叶子
我们站着,不说话
就十分美好

门头是矮矮的,有阳
光照进来,我们靠着什
麽都不说,就十分美好。

有门,不用开开
是我们的,就十分美好

早晨,黑夜还要流浪
我们把六弦琴交给他
我们不走了

我们需要土地
需要永不毁灭的土地
我们要乘着它
度过一生

土地是粗糙的,有时狭隘
然而,它有历史
有一份天空,一份月亮
一份露水和早晨

我们爱土地
我们站着
用木鞋挖着泥土
门也晒热了
我们轻轻靠着,十分美好

墙后的草
不会再长大了,它只用指
尖,触了触阳光

 

淘宝搜索框切换效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function(){
$(".bodys p").not(':first').hide();
$(".searchbox ul li").mouseover(function(){
var index=$(this).index();
if(index==0){
$(this).find("a").addClass
("style1");
$("li").eq(1).find("a")
.removeClass("style2");
$("li").eq(2).find("a").
removeClass("style3");
}
if (index==1) {
$(this).find("a").addClass
("style2");
$("li").eq(0).find("a")
.removeClass("style1");
$("li").eq(2).find("a")
.removeClass("style3");
}
if (index==2) {
$(this).find("a").addClass
("style3");
$("li").eq(0).find("a")
.removeClass("style1");
$("li").eq(1).find("a")
.removeClass("style2");
};
var index=$(this).index();
$(".bodys p").eq(index).show()
.siblings().hide();
})
})

效果地址

http://www.29ym.com/demo/tb_tab.html

子元素浮动父容器高度不能自适应的CSS解决方法

网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应,也就是俗称的外部容器不能被“撑大”,常见表现为背景或边框异常,这时我们就需要来清除“闭合浮动”,方法主要有以下4种:

1. 额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动

1
(clear)

以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。

虽然许多人不喜欢这种方法,但是它却是W3C推荐的方法。

1
<div style="clear:both;"></div>

或者使用

1
<br style="clear:both;" />

2. 使用after伪类

这种方法就是对父容器使用

1
after

伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。

这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html比较干净,所以用得还是比较多的。

以下为一个采用伪类的CSS示范写法:

1
2
3
4
5
6
7
#box:after{  
     content:".";  
     height:0;  
     visibility:hidden;  
     display:block;  
     clear:both;  
}

3. 设置overflow为hidden或者auto

这种做法就是将父容器的

1
overflow

设为

1
hidden

或auot 阅读剩余部分 –