最近自己在一个表情网(www.40607.cn),参考了其他的一些表情网,发现很多表情网都才具的左右分离的滚动条的模式,左边是列表。右边是某一类的具体表情展示页,打开这样的页面,我自己还是比较这样的格局的,这样的用户体验做的简单明了,方便用户来查询,用户体验还是蛮不错的,不象别的网站做的很不方便查询,任何网站都一样,著名导航好123不就是简单的人们无。
打开他们的页面,查看源代码。<frameset rows="*" cols="190,*" framespacing="7"><frame name=menu src="qq/menu.htm" tppabs="qq/menu.htm"><frame name=tumain src="qq/right.htm" tppabs="qq/right.htm"></frameset><noframes></noframes> 这种采取的是典型的框架结构来做的,左右单独了调用了文件,这个是最传统的方法了,我就不介绍了.
第2个是引用iframe来实现,具体代码请看 <body scroll="no"><table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%"><tr><td><iframe name="I1" src="left.html" height="100%" width="165">左边列表菜单</iframe></td><td width="100%"><iframe name="I2" src="right.html" height="100%" width="100%" >右边表情显示页</iframe></td></tr></table>这个方法是将整个页面做成一个table左右插入iframe这样的调用方式,注意一点,body里加了scroll=no 这个代码,是将整个网页外部的滚动条去掉了,这样左右各个单元格内就有了滚动条了。
那么下面来介绍我自己的方法吧,我是在第二个基础上修改的,具体您可以打开我的表情网去查看源代码,呵呵;我也是做个一行二列的table在每个td里放个div然后加入样式左边的<div style="width:200px;overflow:scroll;",给个固定的宽度,保持菜单固定;右边单元格就给style="width:100px;overflow:scroll;" 这样是不是很简单呢,其实我这样做无非是从SEO的角度去考虑。所以就把网站改成这样的方法来做了;这个也是今天总结的一点经验,奉献给大家,希望觉得好的捧个场,写的不好的可不要拍砖哦,