css 层滚动问题

html-css06

css 层滚动问题,第1张

这种效果直接实现基本上已经是不能得了(个人是想不出了哈~~)

不过可以绕个弯来实现这个效果。

先确定一下你要的效果(以免回答的牛头不对马嘴):

左边的导航始终固定不动,在左上角,右边的内容虽浏览器的滚动条拖动自动向下滚动以可以查看所有内容。

(如果确定的话,就可以接着往下看,不对的话,你就再补充下哈)

大致实现代码如下:

<html>

<head>

<style type="text/css">

div#left

{

float:left

position:absolute

top:expression(document.body.scrollTop+this.offsetHeight)

//关键是这两句!!!使左边的导航层始终相对浏览器左上角某个位置固定。

left:5px

width:25%

border:solid 2px red

}

div#right

{

float:right

width:70%

border:solid 2px red

height:1000px//这里测试滚动使用。

}

</style>

</head>

<body>

<div id="left">相对于浏览器(而非网页文档)左上角绝对定位。</div>

<div id="right">主内容</div>

</body>

</html>

OK~~,你可以直接复制粘贴测试了,看一下效果对不对(去掉注释哈)

1、首先可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=""双引号中才可以,如:<p style="color:red">这里文字是红色。</p>。

2、如果想让HTML标签和css样式区分开来,可以采取将css样式代码写在<style type="text/css"></style>标签之间,并且这里的<style></style>可以写在<head></head>标签之间或者<body></body>标签之间,效果都是一样的。

3、以上两种HTML和css的结合都是在同个页面,代码量多的情况下就不好区分了,这时可以创建一个外部css样式文件。右键点击桌面先创建一个记事本文档,然后将文档的扩展名改为“.css”。将该css样式文件与HTML放在同个磁盘中以便调用。

4、将css样式文件创建好后,使用Sublime编辑器打开css样式文件,在文件里面编写相应的css样式。

5、准备好这个css样式文件后,回到HTML文件,在<head></head>标签内使用<link>标签将css样式文件链接到HTML文件内,就完成了。