Joy Ho

2013年3月30日

摘要：在之前做团委搜索页面的时候，曾经出现过一个小小的问题：搜索框与搜索按钮没对齐！今天读到一篇文章，写到了有关这个问题的探讨。当使用：<input type="text" value="" name="s" id="s" /><input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />的时候就会出阅读全文

posted @ 2013-03-30 01:29 Joy Ho 阅读(634) 评论(0) 推荐(0) 编辑

关于::selection的一点点思考

摘要：对于::selection这个选择器，也许会感到陌生，但是在新手学习基础的时候肯定会遇上，只是因为用得不多，所以它容易让人忘记。用::selection我们可以改变被选择文本的前景色和背景色。.container ::selection{ background:#C00; color:#fff; }<div class="container"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor ped 阅读全文

posted @ 2013-03-30 00:58 Joy Ho 阅读(181) 评论(0) 推荐(0) 编辑

2013年3月29日

关于居中布局的解决方案

摘要：居中布局是一个很普遍的做法。1.定义宽度，然后将水平空白边设置为auto；#box{width:720px;margin:0 auto;}需要注意的是：IE5.x和IE6不支持自动空白边。由于IE将“text-align:center;”理解为让所有对象居中而不只是文本，所以可以利用这一点让主体标签中所有对象居中，包括容器div，然后将容量的内容重新对准左边。即：body{text-align:center;}#box{width:720px;margin:0 auto;text-align:left;}2.使用定位和负值空白边让设计居中。#box{width:720px;position:r 阅读全文

posted @ 2013-03-29 17:00 Joy Ho 阅读(137) 评论(0) 推荐(0) 编辑

2013年3月28日

关于单行和多行文本溢出显示省略号的解决方案

摘要：今天研究了一下文本溢出显示省略号的方案，在网上一搜，资料很多，但是不是所有都是正确的。单行文本溢出：1.使用text-overflow:ellipsis; 这种方法在除firefox的其他浏览器中都支持，但是在firefox旧版本里不支持，听说在firefox7.0+支持，具体的分界线在哪里我没测试过，所以也不太清楚。但是我用firefox19.0.2测试过是支持的。需要注意的是要设置：white-space:nowrap;/*保证单行*/overflow:hidden;text-overflow:ellipsis;.container { width:100px; heigh... 阅读全文

posted @ 2013-03-28 21:12 Joy Ho 阅读(1429) 评论(0) 推荐(0) 编辑

2013年3月27日

关于inline和inline-box的区别

摘要： inline是内联元素inline-block是把对象呈现为内联对象，但是对象的内容作为块来呈现。这样说可能有点难理解，下面做个小小的实验帮助理解啦。下面用一个大的div来包裹住三个小的div，对于这三个小的div采取默认的display样式：为每个小的div都设置为inline样式，如下：从上面可以看出里面那三个小的div都变成inline元素了，但是它们原来的width和height也消失不见了。因为无法给inline元素指定尺寸。下面再看看如果把那三个小的div都设置成inline-block的效果：看到上面的效果了吧，那三个小的div不仅呈现为inline，而且它们的内容是呈现为块的，阅读全文

posted @ 2013-03-27 21:01 Joy Ho 阅读(811) 评论(0) 推荐(0) 编辑

2013年3月25日

ie6兼容问题

摘要： 1、终极方法：条件注释&l 阅读全文

posted @ 2013-03-25 15:55 Joy Ho 阅读(127) 评论(0) 推荐(0) 编辑

2013年3月15日

box-shadow实现曲线投影效果

摘要：下面是使用box-shadow实现曲线投影的效果，主要原理是多重层叠以及角度的调整。代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-T 阅读全文

posted @ 2013-03-15 21:12 Joy Ho 阅读(315) 评论(0) 推荐(0) 编辑

使用transition实现图片动画墙效果

摘要：上面的效果实现了图片的动画墙效果，别的不多说了，看了代码就一清二楚啦！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" co 阅读全文

posted @ 2013-03-15 21:04 Joy Ho 阅读(417) 评论(0) 推荐(0) 编辑

用css3写的遨游Logo

摘要：用css3写了一个遨游的logo，主要的思想就是div的层层嵌套并使用圆角效果。效果图如下：代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Conte 阅读全文

posted @ 2013-03-15 20:52 Joy Ho 阅读(213) 评论(0) 推荐(0) 编辑

javascript中定义类或对象的方法

摘要：定义类或对象（1）工厂方式functioncreateCar(sColor,iDoors){varoTempCar=newObject;oTempCar.color=sColor;oTempCar.doors=iDoors;oTempCar.showColor=function(){alert(this.color);};returnoTempCar;}varoCar1=createCar("red",4);varoCar2=createCar("blue",3);oCar1.showColor();//Output"red"oCar 阅读全文

posted @ 2013-03-15 15:31 Joy Ho 阅读(144) 评论(0) 推荐(0) 编辑

公告