表现层

怎么给上面的嵌套列表定义 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;
}

出处：蓝色理想
责任编辑：bluehearts

上一页 拖拽翻页(ThrowPage)详解 [1] 下一页 拖拽翻页(ThrowPage)详解 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。