论坛首页 Web前端技术论坛

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

浏览 2378 次
精华帖 (0) :: 良好帖 (6) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-05-16   最后修改:2009-11-16

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

 

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

 

 

  • 大小: 100.4 KB
  • 大小: 16.8 KB
  • 大小: 133 KB
  • 大小: 134.7 KB
  • 大小: 186.4 KB
   发表时间: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
0 请登录后投票
   发表时间:2009-05-19  
不错不错,收藏了
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics