网站浮动快捷导航代码（网站浮动快捷导航代码大全）

今天给各位分享网站浮动快捷导航代码的知识，其中也会对网站浮动快捷导航代码大全进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、网页浮动图标的代码是什么，最好是css的
• 2、浮动窗口的代码 （html/js）
• 3、网站导航栏特效代码！
• 4、怎么用列表和浮动，创建网页的横向导航条
• 5、如何让一个导航浮动在网页的头部

网页浮动图标的代码是什么，最好是css的

如果是地址栏的图标，代码如下：

link rel="shortcut icon" href="MyImg.ico" /

link rel="Bookmark" href="favicon.ico" /

代码放置在head/head之间，图片放置在站点根目录。

如果是页面上的某个图标，这个也有多种方法。

一种是float的浮动，不脱离页面内容流。

一种是position，可以脱离页面内容流，独立设置位置。

如果是某些标题，列表前的小图标，则可以使用img添加，如：

img src="..." / a href="..."链接/a

也可以用css的background属性集合padding属性设置为背景。

浮动窗口的代码 （html/js）

第一种方法:

Html代码

html

head

title浮动窗口/title

link type="text/css" rel="stylesheet" href="css/overflow.css" /

script type="text/javascript" src="js/jquery.js"/script

script type="text/javascript" src="js/overflow.js"/script

script type="text/javascript"

$(document).ready(function(){

var b = $("#b");

var overFlow = $("#over");

b.click(function(){

overFlow.fadeIn();

$("#mask").css("background","#111");

$("#mask").css("opacity","0.8");

})

$("#close").click(function(){

overFlow.fadeOut();

$("#mask").css("background","#fff");

$("#mask").css("opacity","1");

});

drag($("#over"),$("#title"));

}) ;

/script

/head

body

div id="over"

div id="title"span id="t"这只是一个演示标题/spanspan id="close"[ x ]/span/div

div id="content"

When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.br/

---This is edited by Alp.

/div

/div

div id="mask" a id="b" href="#"click/a/div

/body

/html

Js代码

function drag(overFlow,title){

title.onmousedown = function(evt){

var doc = document;

var evt = evt || window.event;

var x = evt.offsetX?evt.offsetX:evt.layerX;

var y = evt.offsetY?evt.offsetY:evt.layerY;

if(overFlow.setCapture){

overFlow.setCapture();

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

doc.onmousemove = function(evt){

evt = evt || window.event;

var xPosition = evt.pageX || evt.clientX;

var yPosition = evt.pageY || evt.clientY;

var newX = xPosition - x;

var newY = yPosition - y;

overFlow.style.left = newX;

overFlow.style.top = newY;

};

doc.onmouseup = function(){

if(overFlow.releaseCapture){

overFlow.releaseCapture();

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

doc.onmousemove=null;

doc.onmouseup=null;

};

};

}

css代码

#over{

position: absolute;

left: 300px;

top: 200px;

border: 1px solid black;

display: none;

background: #cccccc;

cursor: default;

width: 300px;

z-index: 10;

opacity: 1;

}

#title{

border: 1px solid #1840C4;

background: #95B4DC;

padding: 2px;

font-size:12px;

cursor: default;

}

#close{

cursor: pointer;

margin-right: 1px;

overflow: hidden;

}

#content{

border: 1px solid #C2D560;

background: #EFF4D7;

}

#t{

margin-right:145px;

}

#mask{

z-index: 1;

background: #fff;

width: 1024px;

height: 800px;

}

#b{

position: absolute;

left: 200px;

top: 100px;

}

body{

padding: 0px;

margin: 0px;

}

#over{

background: transparent;

}

第二种方法:

消息框遮罩层:iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"/iframediv id="show_upload"nothing.../div'

页面加载loading中:div id="body_loading" onClick="loaded();"img src="__PUBLIC__/images/body_load.gif"/div

关闭浮动窗口:a href="javascript:hideupload()"关闭窗口建议用小图片/a

打开浮动窗口:a href="javascript:showupload('admin.php')"打开浮动/a

// 消息框loading

function loading(){

var o = $('#body_loading');

o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");

o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");

o.fadeIn("fast");

}

// 消息框消失

function loaded(){

var o = $('#body_loading');

o.fadeOut("fast");

}

// 隐藏浮动窗口

function hideupload(){

$('#show_upload').hide();

$('#show_upload_iframe').hide();

}

// 弹出浮动窗口

function showupload(ajaxurl){

loading();

var o=$('#show_upload');

var f=$('#show_upload_iframe');

var top = 200;

$.ajax({

url: ajaxurl,

//cache: false,

success: function(res){

loaded();

o.html(res);

o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");

if($(document).scrollTop()200){

top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);

}

o.css("top",top+"px");

f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});

f.show();

o.show();

}

});

}

网站导航栏特效代码！

代码如下 也就是我的网站的导航栏你可以去看看

STYLE type=text/css

/**/

body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;}

div,img{margin:0; padding:0; border:0;}

ul,li{list-style-type: none; margin:0; padding:0; float:left; }

#info{ margin-left:auto; margin-right:auto;width:790px; text-align:left;}

#new{ margin-top:-12px;position: absolute;margin-left:-12px;}

#nav{ height:30px; width:778px; margin-left:auto; margin-right:auto;}

#nav li{margin-left:1px; height:30px;}

#nav li a{ display:block;float:left; text-decoration:none; background-image: url();background-repeat: no-repeat; display:block; background-position:left top;}

#nav a span{cursor:hand; color:#000;background-image: url();background-repeat: no-repeat; display:block;background-position: right top; padding:7px 10px 6px 10px; float:left; }

#nav li a:active,#nav li a:hover {margin-top:0px; }

#nav li a:active span,#nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color:#FFF;}

#zishu01 a:link,#zishu01 a:visited {background-position: 0px -27px;}

#zishu01 a:link span,#zishu01 a:visited span{background-position:right -27px;padding:10px 10px 6px 10px; margin-top:0; color:#FFF; font-weight:bold;}

#zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-top:3px;}

#zishu02 a:active,#zishu02 a:hover {background-position: 0px -87px;}

#zishu02 a:active span,#zishu02 a:hover span{background-position:right -57px;}

#zishu03 a:active,#zishu03 a:hover {background-position: 0px -117px;}

#zishu03 a:active span,#zishu03 a:hover span{background-position:right -87px;}

#zishu04 a:active,#zishu04 a:hover {background-position: 0px -147px;}

#zishu04 a:active span,#zishu04 a:hover span{background-position:right -117px;}

#zishu05 a:active,#zishu05 a:hover {background-position: 0px -177px;}

#zishu05 a:active span,#zishu05 a:hover span{background-position:right -147px;}

#zishu06 a:active,#zishu06 a:hover {background-position: 0px -107px;}

#zishu06 a:active span,#zishu06 a:hover span{background-position:right -177px;}

#zishu07 a:active,#zishu07 a:hover {background-position: 0px -237px;}

#zishu07 a:active span,#zishu07 a:hover span{background-position:right -207px;}

#zishu08 a:active,#zishu08 a:hover {background-position: 0px -267px;}

#zishu08 a:active span,#zishu08 a:hover span{background-position:right -237px;}

#zishu09 a:active,#zishu09 a:hover {background-position: 0px -297px;}

#zishu09 a:active span,#zishu09 a:hover span{background-position:right -267px;}

#zishu10 a:active,#zishu10 a:hover {background-position: 0px -317px;}

#zishu10 a:active span,#zishu10 a:hover span{background-position:right -297px;}

#zishu11 a:link span,#zishu11 a:visited span{color:#FF6600;}

#zishu11 a:active,#zishu11 a:hover {background-position: 0px -347px;}

#zishu11 a:active span,#zishu11 a:hover span{background-position:right -327px;}

#menu{ width:750px; height:8px; background:#FF9900;}

#r1{border-top: 0px;border-bottom: 0px; border-left:3px solid #fff;border-right:3px solid #fff; height:1px; overflow:hidden;}

#r2{border-top: 0px;border-bottom: 0px; border-left:2px solid #fff;border-right:2px solid #fff; height:1px; overflow:hidden;}

#r3{border-top: 0px;border-bottom: 0px; border-left:1px solid #fff;border-right:1px solid #fff; height:1px; overflow:hidden;}

/**/

/STYLE

TABLE style="Z-INDEX: 100; LEFT: 115px; POSITION: absolute; TOP: 0px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: transparent" cellPadding=0 width="100%" border=0

TBODY

TR

TD align=middle

DIV id=info

DIV id=nav

UL

LI id=zishu01A href=""SPANswell的首页/SPAN/A /LI

LI id=zishu02A href=""SPAN博客首页美化/SPAN/A /LI

LI id=zishu03A href=""SPAN博客插件添加/SPAN/A /LI

LI id=zishu04A href=""SPAN博客鼠标美化/SPAN/A /LI

LI id=zishu08A href=""SPAN博客综合特效/SPAN/A /LI

LI id=zishu05A href=""SPAN新浪博客/SPAN/A /LI

LI id=zishu06A href=""SPAN酷虫博客圈/SPAN/A /LI

LI id=zishu07A href=""SPAN给我留言/SPAN/A /LI

LI id=zishu08A href=""SPAN博客推广/SPAN/A /LI

LI

DIV id=newIMG alt=重点推荐 src=""/IMG/DIV/LI/UL/DIV

DIV id=menu

DIV id=r1/DIV

DIV id=r2/DIV

DIV id=r3/DIV/DIV/DIV/TD/TR/TBODY/TABLE

怎么用列表和浮动，创建网页的横向导航条

1、用Dreamweaver新建一个HTML文件。

2、修改title为html+css实现横向导航。

3、新建一个div  id为“a”，添加ul li标签。

4、在li中添加自己想要的文字 并调整好文字间距,按F12预览。

5、首先去掉字体前面的小黑点。

6、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果。

7、按F12预览，效果如下。

如何让一个导航浮动在网页的头部

一、代码：把网页中所有浮动的导航条放在一个大层里，再给这个大层设置样式如下

二、div class="head" /div

.head{background: white;position: fixed;top: 0;width: 100%;z-index: 80;}

关于网站浮动快捷导航代码和网站浮动快捷导航代码大全的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。