CSS 网页顶部固定工具栏拖动无闪烁实现代码

html-css014

CSS 网页顶部固定工具栏拖动无闪烁实现代码,第1张

实际上细心的朋友会发现，这个顶部的工具条实则是一个平铺的背景图像，CSS起到固定背景的作用，也算是一种独特的实现方法。

顶部拖动无闪烁菜单栏

*

{

margin:

0px

padding:

0px

}

body

{

background-image:

url()

background-attachment:

fixed

}

#topNavWrapper

{

width:

980px

text-align:

left

height:

31px

margin:

0px

auto

z-index:100

_position:

relative

_top:0px

}

#topNav

{

width:

980px

float:

left

display:

block

z-index:

100

overflow:

visible

position:

fixed

top:

0px

/*

position

fixed

for

IE6

*/

_position:

absolute

_top:

expression(documentElement.scrollTop

+

"px")

background-image:

url(/upload/2010-3/20100303232637297.gif)

background-repeat:

no-repeat

background-position:

right

height:

31px

}

脚本之家

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]

给你一个参考的CSS定义（转自蓝色理想的snwebsite）

底部的工具条你可以定义css里的.title来改变他的样式，如果你需要固定在顶部，那么就将css里的.title的bottom:0px换成top:0px即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>的BLOG</TITLE>

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style>

div#body{padding-top:31pxposition:relativewidth:100%height:100%overflow-x:autooverflow-y:scroll}

a{text-decoration:none}

a:link{}

a:visited{color:orange}

a:hover{color:redtext-decoration:red}

a:active{}

html,body{overflow:hiddenwidth:100%height:100%margin:0pxpadding:0pxfont-size:12px}

.title{bottom:0pxheight:15pxwidth:600pxborder-left:noneborder:1px solid blackposition:fixed_position:absolutemargin-left:50%left:-308pxz-index:10background-color:white}

.title ul{height:15pxpadding:0pxmargin:0px}

.title li{display:inlineheight:15px}

.outline{width:602pxposition:relativemargin-left:50%left:-300pxborder:1px solid redoverflow:auto}

.leftside{width:200pxheight:800pxfloat:left}

.cc{width:400pxheight:800pxfloat:left}

</style>

</HEAD>

<BODY>

<div class="title"><ul>

<li><a href="">日记</a></li>

<li><a href="">实验室</a></li>

<li><a href="">影集</a></li>

</ul></div>

<div id="body">

<div class="outline">

<div class="leftside">123</div>

<div class="cc">456</div>

</div>

</div>

</BODY>

</HTML>