网络编程
位置：首页>> 网络编程>> 网页设计>> 拖拽翻页(ThrowPage)详解 cool（2）

拖拽翻页(ThrowPage)详解 cool（2）

作者：蓝色理想　来源：蓝色理想　发布时间：2009-12-02 09:54:00　

标签：翻页,拖拽,css

 

表现层

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

第一页 上一页 1
2
3 4 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com