精华内容
下载资源
问答
  • 怎么将导航栏始终固定窗口顶部

    千次阅读 2017-08-25 13:25:02
    在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例: DOCTYPE ...
    如何将导航栏始终固定在窗口顶部

    如何将导航栏始终固定在窗口顶部:
    在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="author" content="http://www.softwhy.com/" /> 
    <title>蚂蚁部落</title> 
    <style type="text/css">
    *{
      padding:0px;
      margin:0px;
    }
    body, ul, li{
      background-color:white;
      font-size:12px;
      font-family:Arial, Helvetica, sans-serif;
      text-align:center;
    }
    #main{
      width:20px;
      height:1000px;
      margin:0px auto;
      background-color:#CCC;
    }
    #nav{
      width:500px;
      margin:0px auto;
      position:fixed;/*固定作用*/
      top:0px;
      left:490px;
      /*ie6下样式,加下划线表示只针对ie6 的hack */
      _position:absolute;/* 把导航栏位置定义为绝对位置  关键*/
      _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端  关键 */
      z-index:9999; /* 让导航栏浮在网页的高层位置,遇到flash和图片时候也能始终保持最外层 */
      text-align:left;
    }
    a{
      color:#000000;
      text-decoration:none;
    }
    .menu{
      width:120px;
      height:18px;
      margin:0px 4px 0px 0px;
      background-color:#F5F5F5;
      color:#999999;
      border:1px solid #EEE8DD;
      padding:6px 0px 0px 0px;
      overflow-y:hidden;
      cursor:hand;
      display:inline;
      list-style:none;
      font-weight:bold;
      float:left;
    }
    </style>
    </head>
    <body>
    <div id="nav">
      <ul>
        <li class="menu"><a href="#">前台专区</a></li>
        <li class="menu"><a href="#">后台专区</a></li>
        <li class="menu"><a href="#">交流专区</a></li>
      </ul>
    </div>
    <div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
    </body>
    </html>

    上面的代码已经实现了需要的功能,导航条固定在了网页的顶部,这个主要是使用了position:fixed,然后将top值设置为0即可,但是仅仅使用position:fixed还是不够,因为IE6浏览器并不支持,所以还需要进行浏览器兼容性设置,那就是添加以下代码即可:

    _position:absolute;/* 把导航栏位置定义为绝对位置 关键*/
    _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */

    原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/589.html

    最为原始地址是:http://www.softwhy.com

    展开全文
  • 在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例: ...


    http://www.myexception.cn/HTML-CSS/1964410.html


    在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
    *{
      padding:0px;
      margin:0px;
    }
    body, ul, li{
      background-color:white;
      font-size:12px;
      font-family:Arial, Helvetica, sans-serif;
      text-align:center;
    }
    #main{
      width:20px;
      height:1000px;
      margin:0px auto;
      background-color:#CCC;
    }
    #nav{
      width:500px;
      margin:0px auto;
      position:fixed;/*固定作用*/
      top:0px;
      left:490px;
      /*ie6下样式,加下划线表示只针对ie6 的hack */
      _position:absolute;/* 把导航栏位置定义为绝对位置  关键*/
      _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端  关键 */
      z-index:9999; /* 让导航栏浮在网页的高层位置,遇到flash和图片时候也能始终保持最外层 */
      text-align:left;
    }
    a{
      color:#000000;
      text-decoration:none;
    }
    .menu{
      width:120px;
      height:18px;
      margin:0px 4px 0px 0px;
      background-color:#F5F5F5;
      color:#999999;
      border:1px solid #EEE8DD;
      padding:6px 0px 0px 0px;
      overflow-y:hidden;
      cursor:hand;
      display:inline;
      list-style:none;
      font-weight:bold;
      float:left;
    }
    </style>
    </head>
    <body>
    <div id="nav">
      <ul>
        <li class="menu"><a href="#">前台专区</a></li>
        <li class="menu"><a href="#">后台专区</a></li>
        <li class="menu"><a href="#">交流专区</a></li>
      </ul>
    </div>
    <div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
    </body>
    </html>

    上面的代码已经实现了需要的功能,导航条固定在了网页的顶部,这个主要是使用了position:fixed,然后将top值设置为0即可,但是仅仅使用position:fixed还是不够,因为IE6浏览器并不支持,所以还需要进行浏览器兼容性设置,那就是添加以下代码即可:

    _position:absolute;/* 把导航栏位置定义为绝对位置 关键*/
    _top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */

    原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/589.html

    最为原始地址是:http://www.softwhy.com



    展开全文
  • 固定定位

    2016-11-18 19:49:00
    这就产生了一个有趣的效果,无论你怎么划动浏览器的页面,它都会停在哪儿,好多网页有边的广告就是这样的。注在绝对定位的元素会从流中删除,不会影响html中的排版。 <div id="coupon"> <a href=...

    33.固定定位:

    这也是像绝对定位那样,你希望为元素指定一个位置,但这是相对于浏览器窗口的偏移量。

    这就产生了一个有趣的效果,无论你怎么划动浏览器的页面,它都会停在哪儿,好多网页有边的广告就是这样的。注在绝对定位的元素会从流中删除,不会影响html中的排版。

     

    <div id="coupon">

              <a href="freecoffee.htm" title="click here to get your free coffee">

              <img src="images/ticket.gif" alt="Starbuzz coupon ticket">

              </a>

     </div>

     

    #coupon{

       position:        fixed;   //固定显示

       top:             70%;

       right:           30px;  //这个的左右是浏览器的左右边框,偏移是相当与边框的偏移

    }                         //可以为负,那么显示的部分就有一些出现在屏幕外边去了,

                              //这样你就只能看到浏览器屏幕内的内容。

    #coupon a,img{    

       border:          none;

    }

     

    33 相对定位:

    这和固定定位最大的不同是它不会从流中删除,html中的元素会围绕着它排版,也就是说它不会遮盖html页面的内容。其它和固定定位其它都相同。它也是按你指定的偏移量。

    转载于:https://www.cnblogs.com/IKnowYou0/p/6078941.html

    展开全文
  • 先看例子: ... 效果描述: (1) 鼠标点击""即可拖动; (2)滚动网页的竖直滚动条时,该窗口的位置固定不变; (3)无论怎么移动,该窗口不会跑到网页可视范围之外 关键code: Js代码 //拖拽效果 functiondrag(){ ...

    先看例子:

    http://182.92.97.72/float_suspend/


    效果描述:

    (1) 鼠标点击" "即可拖动;

    (2)滚动网页的竖直滚动条时,该窗口的位置固定不变;

    (3)无论怎么移动,该窗口不会跑到网页可视范围之外

     

    关键code:

    Js代码  收藏代码
    1. // 拖拽效果  
    2.     function drag(){  
    3.         var tags = arguments;  
    4.         // alert(tags[0].length);//长度为4  
    5.           
    6.         for(var i=0;i<tags[0].length;i++){  
    7.             // addEvent(tags[0].get(i),'mousedown',function(e){  
    8.                 $(tags[0].get(i)).bind('mousedown',function(e){  
    9.                 if(trim(this.innerHTML).length == 0) e.preventDefault();  
    10.                 var _this = this;  
    11.                 // var diffX = e.clientX - _this.offsetLeft;  
    12.                 // var diffY = e.clientY - _this.offsetTop;  
    13.   
    14.                 var diffX = e.clientX - $(_this).parent().get(0).offsetLeft;  
    15.                 var diffY = e.clientY - $(_this).parent().get(0).offsetTop;  
    16.   
    17.   
    18.                 //自定义拖拽区域  
    19.                 var flag = false;                 
    20.                 for (var i = 0; i < tags[0].length; i ++) {  
    21.                     if (e.target == tags[0].get(i)) {  
    22.                         flag = true;                    //只要有一个是true,就立刻返回  
    23.                         break;  
    24.                     }  
    25.                 }  
    26.   
    27.   
    28.                 if (flag) {  
    29.                     $(document).bind('mousemove',move);  
    30.                     $(document).bind('mouseup',up);  
    31.                 } else {  
    32.                     $(document).unbind('mousemove',move);  
    33.                     $(document).unbind('mousemove',up);  
    34.                 }  
    35.               
    36.             function move(e) {  
    37.       
    38.                 $('div.suspend').css("position"'absolute');//保证移动div的标题时,div跟着移动  
    39.                 scrollTop22=document.body.scrollTop;  
    40.                 if(isIEtest && scrollTop22==0){//IE中  
    41.                     scrollTop22=document.documentElement.scrollTop;  
    42.                 }  
    43.                 //alert();  
    44.                 var left = e.clientX - diffX;  
    45.                 var old_top = e.clientY - diffY;  
    46.                 var top=old_top+scrollTop22;  
    47.                 //console.log(old_top+"\t"+scrollTop22);      
    48.                 var divWidth22=$(_this).parent().get(0).offsetWidth;//div 的宽度  
    49.                 var screenWidth=document.body.clientWidth;//屏幕宽度,不兼容IE  
    50.                 if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中  
    51.                     screenWidth=document.documentElement.clientWidth;//屏幕宽度  
    52.                 }  
    53.                 //console.log(left+"\t"+screenWidth);  
    54.                 var rightZero=(screenWidth-divWidth22)-left;  
    55.                 if(rightZero<0)//防止div跑到窗口的右边之外  
    56.                 {  
    57.                     left+=rightZero;  
    58.                 }  
    59.                 if (left < 0) {  
    60.                     left = 0;  
    61.                 }else if(left <= getScroll().left){  
    62.                     left = getScroll().left;  
    63.                 } else if (left > getInner().width + getScroll().left - $(_this).parent().get(0).offsetWidth) {  
    64.                     left = getInner().width + getScroll().left- $(_this).parent().get(0).offsetWidth;  
    65.                 }  
    66.                   
    67.                 if (top < 0) {  
    68.                     top = 0;  
    69.                 }else if(top <= getScroll().top){  
    70.                     top = getScroll().top  
    71.                 } else if (top > getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight) {  
    72.                     top = getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight;  
    73.                 }  
    74.   
    75.   
    76.                 $(_this).parent().get(0).style.left = left + 'px';  
    77.                 $(_this).parent().get(0).style.top = top + 'px';  
    78.                 //$(_this).parent().get(0).style.bottom= (50+old_top)+ 'px';  
    79.                 if (typeof _this.setCapture != 'undefined') {  
    80.                     _this.setCapture();  
    81.                 }   
    82.             }  
    83.               
    84.             function up(e) {  
    85.                 $('div.suspend').css("position"'fixed');//保证上下移动滚动条时div保持不变,所以必须恢复为fixed  
    86.                 var event_clientY=e.clientY;  
    87.                 var top =event_clientY  - diffY;  
    88.                 var screenHight=document.body.clientHeight;//屏幕高度,不兼容IE  
    89.                 if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中  
    90.                     screenHight=document.documentElement.clientHeight;//屏幕高度  
    91.                 }  
    92.                 var divHeight22=$(_this).parent().get(0).offsetHeight;//div 的高度  
    93.                 //console.log(event_clientY+"\t "+diffY+"\t"+screenHight+"\t"+divHeight22+"\t"+document.body.scrollTop );  
    94.                 var bottomZero=screenHight-divHeight22+diffY;  
    95.                 //console.log(bottomZero+"\t"+top);  
    96.                 if(event_clientY>bottomZero){//防止div跑到bottom以下,防止div跑出窗口之下  
    97.                     //alert(111);  
    98.                     top-=(event_clientY-bottomZero);  
    99.                 }  
    100.                 if(top<0)//top为负数,就表示div拖拽到窗口之上了  
    101.                 {  
    102.                     top=0;//防止div跑出窗口之上  
    103.                 }  
    104.                 $(_this).parent().get(0).style.top = top + 'px';//解决鼠标松开时位置突变的不正常现象  
    105.                 $(document).unbind('mousemove',move);  
    106.                 $(document).unbind('mouseup',up);  
    107.                 if (typeof _this.releaseCapture != 'undefined') {  
    108.                     _this.releaseCapture();  
    109.                 }  
    110.             }  
    111.   
    112.   
    113.             });  
    114.         }  
    展开全文
  • 要求:无论页面怎么移动,页面左右的的广告栏不会发生位置的变化。 效果如下图所示: 任务 1、首先我们需要添加一个块元素,并且以慕课网为背景,模拟整个网页,并给块元素设置足够的宽高。 2、在网页...
  • 网页头部图片自适应

    千次阅读 2016-09-23 15:26:22
    就我目前接触到的头部图片PSD设计图里基本都是铺满的,实现的时候就会考虑到底怎么呈现 一种想法是永远显示整张图片铺满屏幕宽度高度自适应 ; 另一种想法是图片大小固定永远居中显示并根据浏览器可视区域宽度对...
  • 如果对图片外部的div用固定像素设置,margin,padding等用百分比时,当缩放浏览器窗口时,网页中的图片会不会错位?这种问题应该怎么解决?图中div都设置成固定像素小,然后给他们设置绝对定位,margin、padding等用...
  • 就是让该标签一直显示在网页某个位置 无论你怎么滚动界面 2.用户 1.一般用来做页面的导航部分与底部 2.可以用来做网页中插入广告和商业推广 注意:1.我们在使用时候尽量使用在页面的底部,因为他脱离了文档流...
  • 我用frame做了个网页,希望在改变浏览器窗口大小时里面的frame高度不改变。 我是这么做的: ``` *,1024,*" frameborder="NO" framespacing="0" style="margin:0px auto; height:650px;"> ,500,50" ...
  • 这个现在能弹出窗口,但是那些 也都显示着呢,怎么样就正常了? html标签在JS中是不行的,你这种的弹出可以用JQUERY来配合做。网上例子多。 如果这样也行的话,我弹出一个对话框也可以在对话框...
  • 相对的,XML则没有固定的标记,XML不能描述网页具体的外观,内容,它只是描述内容的数据形式和结构。 这是一个质的区别:网页将数据和显示混在一起,而XML则将数据和显示分开来。 我们看上面的例子,在myfile.htm...
  • 2016年前端面试总结(实习生)

    千次阅读 2016-12-14 20:19:31
    1. IE6底下怎么固定网页中的小窗口(页面中的悬浮框) ? fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的。解决代码如下 style> html{overflow:hidden;} /*一定要写*/ body{ height;100%;...
  • 一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示...
  • 关于位置属性position position中包含了固定定位fixed,绝对定位 abosult,...例如:在一个网页中不管你怎么滑,它都在你的视图中 绝对定位 相对祖籍元素中具有 position 属性的元素,且值不是static的元素进行绝对...
  • JS弹出居中的DIV的代码

    千次阅读 2009-09-15 11:40:00
    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示...
  • JS DIV居中

    2010-02-04 15:31:00
    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示...
  • 一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示...
  • 当我们浏览网页的时候,是不是会看到一些侧边栏,不管我们怎么滚动页面窗口,它都会固定在那一个位置,不会因为页面的上下滚动而变化,这就是定位的作用. 上篇博客我们讲了浮动,浮动可以让多个块级的盒子
  • “小白,网页分析的怎么样了?” “小有感触,我发现很多网站头部和底部容器都是通栏的,浏览器窗口多宽,他们就有多宽。这些好像是自动适应的,主体部分一般都是固定的宽度,并且是居中显示的!” “不错,小白,...
  • “小白,网页分析的怎么样了?”“小有感触,我发现很多网站头部和底部容器都是通栏的,浏览器窗口多宽,他们就有多宽。这些好像是自动适应的,主体部分一般都是固定的宽度,并且是居中显示的!”“不错,小白,看得...
  • e语言-易语言版CE源码

    2019-08-23 12:12:58
    基址一般用于单机类,固定可以直接偏移找到准确的值但是网页怎么解决?就是特征码的用处了搜索特征码用于定位基址,再 偏移=准确地址(里面支持直接测试功能)用法就不详细说了,只是简单的对比两次的字节,源码已...
  • 我在玩一个网页游戏的时候总是按一个键。觉着累。所以就写了一个程序。Robot r = new Robot();// 按键r.keyPress(51);// 释放r.keyRelease(51);...怎么能把这个程序固定在某个程序上呢。让Robot 触发的事件一直挂某个程
  • 70款经典Dreamweaver插件

    2011-09-21 12:42:27
    persistent_layers 不管滚动条如何拉动,这个层在窗口中的位置始终固定不变 P7_PowerToys_18 可以让你方便的插入代码,用开始和结束标签加入既存的代码等 justsoalt 用于在你的图片上加入alt标记,它可以利用模板一...
  • Dreamweaver 插件集

    2012-02-04 16:16:36
    不管滚动条如何拉动,这个层在窗口中的位置始终固定不变 P7_PowerToys_18 可以让你方便的插入代码,用开始和结束标签加入既存的代码等 justsoalt 用于在你的图片上加入alt标记,它可以利用模板一次为多张图片加入alt...
  • YOYOPlayer1.1.2

    2008-04-03 16:41:41
    1.1.2更新[2008-04-03] 1,更改了精品网页的歌词搜索部分,因为精品网页的内容发生了改变,如果不更改对应的搜索方式的话 将不能从精品网页上查询到歌词,无论怎么样,都对精品网页表示感谢,它的网址是:...
  • 400个DreamWeaver插件

    2013-03-28 15:30:13
    很多朋友都问过这个窗口怎么做的了。就是用这个插件 mxp/在代码编辑模式状态下,点击右键可以方便的插入连接外部样式表的HTML语句 mxp/在代码编辑模式状态下,点击右键可以方便的插入连接外部javascript的HTML语句...

空空如也

空空如也

1 2 3
收藏数 45
精华内容 18
关键字:

怎么固定网页窗口