CSS小技巧：巧用CSS实现左右分离的滚动条

最近自己在一个表情网（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" w
idth="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的角度去考虑。
所以就把网站改成这样的方法来做了；这个也是今天总结的一点经验，奉献给大家，希望
觉得好的捧个场，写的不好的可不要拍砖哦，

时间： 2024-09-11 12:40:21

CSS小技巧：巧用CSS实现左右分离的滚动条的相关文章

[小技巧]如何在Ubuntu14.04中禁用叠加滚动条

[小技巧]如何在Ubuntu14.04中禁用叠加滚动条 Hello 伙计们, 这是一个如何在Ubuntu中禁用叠加滚动条的小技巧.注意,在本文中讲的不是删除叠加功能,而是告诉你如何启用或禁用它. 禁用 打开终端并执行以下命令 gsettings set com.canonical.desktop.interface scrollbar-mode normal 更改后会立即生效: 启用 gsettings reset com.canonical.desktop.interface scrollba

小技巧：使用CSS定义网页背景注意的问题

css|技巧|网页|网页背景|问题 当我们用于定义背景样式时常常这样写: body{ background:url(img/header_top.gif) left top no-repeat;} 如我们又想定义一个背景色,又要在background中加入颜色就可以了,不过要注意的是如果你想用background-color这个样式时请不要把这个样式放在background之前就是不要这样: body{ background-color:red; background:url(img/heade

网页设计小技巧：用CSS制超级链接样式

css|技巧|链接|设计|网页|网页设计 有时我们可能希望内部链接与外部链接显示不同的样式,如外部链接.我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开.我们可能会这样做:.external{background:url(images/external.gif) no-repeat right top;padding-right:12px;}然后给每一个外部的链接应用该CSS,当然,这样做并不是不可以,只是太繁琐. 那有没有好的办

CSS小技巧

css|技巧 经常有朋友问:如何使有超级连接的文字不出现下划线,如何使鼠标移动到超连上产生变色的效果?其实这些通过传统的方法是办不到的.而使用CSS的控制却可以非常轻松地作到,而且,页面的代码也不会臃肿. ★★先看看超连没有下划线的例子: 例子1: 这个连接可以去页面底部,但是没有下划线. 是如何作到这一点的呢?在<head>和</head>之间加上如下的CSS语法控制: <style type="text/css"> <!-- a:link 

学习CSS小技巧：优化你的CSS代码

css|技巧|优化 最近看过许多网友制作的SKIN的CSS文件,发现其中有着许多冗余的代码.下面我来跟大家介绍一下,如何清除这些冗余的代码,让你的CSS文件更加简洁. 一.margin.padding属性 参照相关资料我们可以知道,margin和padding代表的意思分别是外部边距和内部填充距离,在许多网友的CSS中,关于这两个属性的冗余代码是出现得最多的.比如:margin:0px,大家可以查看一下自己的CSS文件中,是否许多的margin:0px,其中有的是不需要的,你可以尝试删除它,当然

小技巧：用CSS如何实现单行图片与文字垂直居中

css|技巧 今天又在群中看到一些朋友问单行图片文字垂直居中问题了,于是写了这篇文章． 这个问题是在做页面中经常会遇到的问题,首行我们先看一下最基础的的吧! 以下选自(CSS权威指南) vertical-align初始值: baseline(缺省值)可否继承:否适用于: 内联元素说明:vertical-align:baseline使元素的基线同父元素的基线对齐．警告:vertical-align不能影响表格单元中的内容的对齐,对于块元素中的内容也一样． 文字不多,但时常有人范错误,有人说我用了为

三个很特别的CSS小技巧分享

  各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新.最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网.这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码.现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能. 1.在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行.它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了

不可不知的CSS小技巧

一.表单部分 1.禁止textarea文本域的缩放  resize:none; 2.去除初始化textarea下拉条 overflow:auto; 3.如何让表单中的选项按钮,点击文字也能选中? <lable><input type="radio" name="sex" value="女" checked="checked"/>女</lable> 4.如何让文本垂直对齐文本输入框 input

CSS小技巧：IE8浏览器的css hack

文章简介:随着win7使用者的不断扩大,开始将ie8纳入开发兼容浏览器范围. 随着win7使用者的不断扩大,开始将ie8纳入开发兼容浏览器范围 "\9" 例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox."*" IE6.IE7可以识别.IE8.FireFox不能."_" IE6可以识别"_",IE7.IE8.FireFox不能. .color{