页面固定DIV层CSS代码

有时候为了用户体验更好些，网页设计师会把网站导航放在一个固定的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开发思路，网站建设以及搜索引擎相关知识。与开发者、站长一起成长！

时间： 2024-10-14 22:35:11

页面固定DIV层CSS代码的相关文章

点击文字弹出一个DIV层窗口代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height:

点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" href="javascript:;" onclick="add_to_uid(<?=$uid?>)">点击弹框</a> <?}?> <div class="form1" id="form

css+div通用兼容性代码最全

你可以在css开头加入 *html{padding:0px} http://chengbao.feizhuliu.in/home.php?mod=space&uid=1&do=blog&quickforward=1&id=268 <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibil

页面出div提示层

在后台方法执行的过程中,如果系统不能在用户容忍的时间间隔内做出相应的话,我们希望系统能够给与提示,用以友好的人机交互,这个时候我们可以采取使用div弹出的方式来完成目标: 1.使用jquery编写要弹出的div层,代码如下: function showTips(tips){ //用来定位弹框位置 var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.c

js Ajax点击链接弹出一个DIV层窗口

下面是在实际项目中截取的部分代码,如果你想下载下来直接使用,可以点击这里点击文字弹出一个DIV层窗口代码. 效果图 HTML代码 <div class="cb pt10 mlf10"> <a href="__APP__/Article/chatpwd/value/7" onclick="verify(this);return false;" target="_blank" class="button

Div层弹出

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height:

!!!常用CSS代码块

图片排满一行.左右两端无间隙. <style type="text/css"> .img_abc{float:left;width:30%;margin-left:5%;} .img_abc:first-child{margin-left:0} .body92{margin-left:4%;margin-right:4%;} </style> <div class="body92"> <img src="14085

问题：如何在固定大小的DIV层插入N多个图片

这是贴友问的一个问题,具体需求是: 如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条? 原以为利用overflow属性可以实现,但是测试失败.后来利用div层叠实现了效果. HTML代码: 1: <!-- 如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条? --> 2: <!DOCTYPE html> 3: <html> 4: <head> 5: <meta http-equiv="cont

页面定制CSS代码初探：页面变宽 文本自动换行 图片按比缩放

一.初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱了,设置里找了下,->博客侧边栏公告 <-,在这里,放了张宽200px的图,好看多了马上,还是有图才不会那么单调~ 二.认识CSS 过了几天,打算写篇博,发现了一个重大的问题,怎么默认的宽度这么窄?那我放图片怎么办,而且,2边留那么多空白不浪费吗,留个5%就够了吧.于是乎,开始了2天的全折腾.