表现层
怎么给上面的嵌套列表定义 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;
}
更多的网页制作教程:制作拖拽翻页请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源:
互联网
日期:2009-12-1