码迷,mamicode.com
首页 > Web开发 > 详细

页面固定DIV层CSS代码

时间:2015-05-06 01:18:17      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动。本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。这样网站导航布局好看些,以下是实现的一种方法:

 
  1. #box {
  2.  height:45px;/*高度*/
  3.  background:#488fce;/*背景颜色*/
  4.  width:100%;/*宽度*/
  5.  position:fixed;/*固定层*/
  6.  top:0px;/*这是顶部距离,如要设置底部bottom:0,如要左边或者右边显示left:数值px,right:数值px*/
  7.  filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;z-index:100;/*设置该DIV层透明度*/
  8. }
  9. <div id=“box”><div style=“width:960px;”>固定的DIV层</div></div>

本网站内容来源程序员博客:http://programmer.org.cn/css3/51.html,程序员博客是知识分享型自媒体博客。记录计算机语言学习方法,WebAPP开发思路,网站建设以及搜索引擎相关知识。与开发者、站长一起成长!

页面固定DIV层CSS代码

标签:

原文地址:http://www.cnblogs.com/semseo/p/4480681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!