页面输出时一些常用的小技巧(二)

页面输出时一些常用的小技巧(一)

 

1.按日历设置每天的数据 (demo1.zip)
点击星期行的箭头，把第一个输入框(或者下拉框)的值赋给其它所以输入框(或者下拉框)，
点击星期行外的每行箭头，把点击行的第一个输入框(或者下拉框)的值赋给这一行其它所以输入框(或者下拉框)。
主要用到了日期相减和构造nextdate的思想

 

var curData = new Date();
curData.getYear();        //获取当前年份(2位)
curData.getFullYear();    //获取完整的年份(4位,1970-????)
curData.getMonth();       //获取当前月份(0-11,0代表1月)
curData.getDate();        //获取当前日(1-31)
curData.getDay();         //获取当前星期X(0-6,0代表星期天)
curData.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
curData.getHours();       //获取当前小时数(0-23)
curData.getMinutes();     //获取当前分钟数(0-59)
curData.getSeconds()；    //获取当前秒钟数(0-59)

 

 

2.浮动广告位 (demo2.zip)

在浏览器中垂直居中，距左100像素。用了setTimeout来触发事件，所以当浏览器出现滚动时没有用到onscroll事件。

3.自适应满屏高度的布局 (demo3.zip)

原本以为这种自适应满屏高度的结构只能通过js才能兼容ie6，看了冰极峰 的这篇博客，受到了一些启发。

自己把代码拿来试了试，通过纯css可以实现兼容ie6，只是要用到怪异模式：<!-- Put IE into quirks mode -->

效果虽然达到了，可是还是没明白为什么用到<!-- Put IE into quirks mode -->就兼容ie6了。

附件里我把原代码稍作了些修改，去掉了些效果，简化了代码量。

4.图片滚动效果 (demo4.zip)

 

5.图片轮换效果 (demo5.zip)

 

6.图片滚动效果 (demo6.zip)

7.使用纯CSS实现未知尺寸的图片在容器中水平和垂直居中。

<style type="text/css">
.box {
    display: table-cell;
    vertical-align:middle;
    width:200px;
    height:200px;
    text-align:center;
    /* hack for ie */
    *display: block;
    *font-size: 175px;
    /* end */
    border: 1px solid #eee;
}
.box img {
    vertical-align:middle;
}
</style>
<div class="box">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

很遗憾，这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算，高度/字体大小的比值为1.14左右时IE可实现垂直居中。

 转：淘宝 ued team

 

 

评论

2 楼 fcu 2009-05-19  

不错不错，收藏了

1 楼 hozaka 2009-05-17  

帮你释疑吧
按照 xhtml 的规范，在 doctype 声明之前是不允许有任何代码的，而在IE6中此举会让浏览器忽略doctype的声明，因此进入怪异模式。只要随意加入不影响html渲染的代码都可以，比如注释。

另外，这个布局最早的出处应该是 cssplay，附上地址给你参考：
http://www.cssplay.co.uk/layouts/body4.html
http://www.cssplay.co.uk/layouts/body2.html
http://www.cssplay.co.uk/layouts/bodyfix.html