浏览 2378 次
锁定老帖子 主题:页面输出时一些常用的小技巧(二)
精华帖 (0) :: 良好帖 (6) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-05-16
最后修改:2009-11-16
1.按日历设置每天的数据
(demo1.zip)
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可实现垂直居中。
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间: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 |
|
返回顶楼 | |
发表时间:2009-05-19
不错不错,收藏了
|
|
返回顶楼 | |