表现层
怎么给上面的嵌套列表定义 CSS 呢?如果万恶的 IE6 支持子对象选择符 “>”,问题很简单。但为了兼容 IE6 和保证 xhtml 部分的简介,在后面另我抓狂的测试中,最终放弃了嵌套列表的方案(事实上,page 类都是由 js 动态设置的)。 让 ThrowPage 应用到你的网页中,其实全靠为页面定义不同的 CSS 实现的,但有几点一定要注意。
<div id="menu"> 应该设置 (overflow:hidden),否则动画过程中可能出现滚动条,影响效果; 每个 <div class="page"> 必须是绝对定位 (position:absolute;) 如果希望出现 <span class="tip">,要为其预留空间,并且 <ul> 是应该有固定高度的 不要用 IE6 的 AlphaImageLoader 滤镜为 <div class="tip"> 添加 PNG 背景,那会让上面的链接在 IE6 中失效
暂时就想到这么多,其实还有一些值得注意的,将在下一节作说明 上面图中的 CSS 是这样定义的:
html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:400px; left:350px; top:50px; background:#FFF; border:1px solid #999; } ul{ list-style:none; height:320px; margin:20px; padding:0px; background:#EEE; } li{ font-size:12px; height:20px; line-height:20px; border-bottom:1px dashed #999; } li span{ float:right; } li a{ color:#000; text-decoration:none; } li a:hover{ text-decoration:underline; } .tip{ display:block; height:20px; margin:0px 20px; line-height:20px; text-align:center; font-size:12px; background:#999; }
(责任编辑:admin) |