教程集 www.jiaochengji.com
教程集 >  CSS教程  >  正文 css div固定顶部例子

css div固定顶部例子

发布时间:2019-10-29   编辑:jiaochengji.com
教程集为您提供css div固定顶部例子等资源,欢迎您收藏本站,我们将为您提供最新的css div固定顶部例子资源
固定顶部只需要利用css画实现绝对定位就可以了,操作方法也是非常的简单容易了,下面小编就来为各位介绍一下吧,希望例子可以帮助到各位朋友。


有很多网站都有固定在顶部的html样式但是不知道怎么弄啊!费了很大的力气才知道这个是关键字是 html div css 固定顶部 而且这个代码还支持半透明哦! 好了这个代码支持ie和360 至于ie6 是否也支持我就不知道咯!下面就是代码了
 

<pre class="brush:css;toolbar:false"><div style="height:50px;"></div> <div style="filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;   background-color:#000000; width: 100%; height: 50px; z-index: 1000; position:fixed; left: 0; top: 0;  overflow: hidden">固定在顶部啊 </div></pre>

例子

<pre class="brush:css;toolbar:false"><!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>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <title>CSS定义一个固定在页面顶部的层</title>  <style type="text/css">  body {  height:1200px;  margin: 0;  padding: 0;  background-attachment: fixed; /* prevent screen flash in IE6 */  }  div,ul{margin: 0;padding: 0;}  #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( /uploadfile/2012/0717/0717014456145_4456.gif);  background-repeat: no-repeat;  background-position: right;  height: 31px;  line-height: 31px;  color:#fff;  background-color:#444;  text-align:center;  }  </style>  </head>  <body>  <div id="topNavWrapper">  <ul class="jd_menu" id="topNav">  我是固定在页面顶部的层  </ul>  </div>  </body>  </html></pre>

您可能感兴趣的文章:
jquery实现固定在顶部的菜单
css div固定顶部例子
css div绝对定位与固定定位实例
网页中返回顶部代码(多种方法)另附注释说明
CSS基本布局16例
IE6中position:fixed无效问题解决
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
自动固定顶部的悬浮菜单栏代码(三个例子,三种方法)
js 完美的仿新浪顶部固定的横条
CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果

[关闭]
~ ~