建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > 网页特效 >

拖拽翻页(ThrowPage)的网页特效详解(2)

时间:2009-11-30 22:33来源:蓝色理想 作者: 点击:
表现层 怎么给上面的嵌套列表定义 CSS 呢?如果万恶的 IE6 支持子对象选择符 ,问题很简单。但为了兼容 IE6 和保证 xhtml 部分的简介,在后面另我抓狂的测试中,最终放弃了嵌套列表的方案(事实上,page 类都是由 j

表现层

怎么给上面的嵌套列表定义 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)
织梦二维码生成器
顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片