一段HTML 导航栏特效`谁帮我改下_随笔

这个肯定行！

<html>

<head>

<style>

body{

background-color:#FFFFFF

}

#fbtn{

/*display:none*/

overflow:hidden

position:relative

width:115px

height:30px

border-style:solid

border-width:1px

border-color:#0e0eff

padding:1px

}

#fbtn_txt{

position:absolute

float:right

right:0px

width:250px

height:30px

}

#fbtn_txt div{

width:115px

height:30px

float:right

padding-top:11px

font-size:9px

font-family:small fonts

color:#800080

text-align:center

cursor:pointer

}

</style>

</head>

<body>

<div>good morning</div>

</div>

<div>good evening</div>

</div>

<div>my fhoujun </div>

</div>

</div>

<div>good morning</div>

</div>

<div>good evening</div>

</div>

<div>my fhoujun</div>

</div>

</div>

var current=null

var t=null

for(var i=0i<fbtn.lengthi++){

fbtn[i].index=i

fbtn[i].style.display="block"

fbtn[i].onmouseover=function(){

if(!current){

current=this

domove(this.index)

}

else if(current!=this){

domove(current.index)

domove(this.index)

current=this

}

fbtn[i].onmouseout=function(){

if(event.toElement==this.parentElement&t==this){

domove(this.index)

current=null

}

function domove(i){

var o=fbtn[i].firstChild

var x=fbtn[i].firstChild.firstChild.offsetWidth

if(o.style.posRight<(-x)){

o.style.posRight=0

var t=o.removeChild(o.firstChild)

o.appendChild(t)

}

else{

o.style.posRight-=3

setTimeout('domove('+i+')',15)

}

</script>

</body>

</html>

html做导航栏步骤如下：

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

2、按ctrl+s先保存，以防突然断电数据丢失；

3、修改title为html+css实现横向导航；

4、新建一个divid为“a”，添加ulli标签；

5、在li中添加自己想要的文字并调整好文字间距，按F12预览；6、首先去掉字体前面的小黑点。

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

这个只是一个图标字体，一般要结合js点击或者经过触发事件。

代码：

<head>

<title>HTML调试</title>

body,

div,

ul,

li {

margin: 0

padding: 0

}

body {

font-family: "微软雅黑", Arial, Helvetica, sans-serif

color: #333333

line-height: 25px

font-size: 14px

}

a:link,

a:visited {

text-decoration: none

color: #333333

}

a:hover {

text-decoration: underline

color: #08A5E0

text-decoration: none

}

ul,

ul li {

list-style-type: none

}

.cl {

zoom: 1

}

.navbg {

height: 40px

width: 100%

background: #08A5E0

box-shadow: 1px 1px 7px #999

position: absolute

z-index: 99

left: 0

}

#navul li {

float: left

margin-right: 1px

width: 100px

height: 40px

position: relative

text-align: center

line-height: 40px

}

#navul li.navhome {

text-align: left

padding: 0 0px 0 40px

width: 100px

}

#navul li a:link,

#navul li a:visited {

color: #FFFFFF

}

#navul li ul {

display: none

position: absolute

z-index: 10000

top: 38px

left: -1px

background: #006D96

border: #004E6C 1px solid

border-bottom: none

}

#navul li ul li {

display: block

width: 98px

float: none

margin-right: 0px

height: 28px

position: relative

line-height: 28px

border-bottom: #004E6C 1px solid

font-size: 12px

}

#navul li.navmoon {

background: #006D96

border: #004E6C 1px solid

width: 98px

height: 38px

line-height: 38px

}

#navul li.navmoon a {

color: #FFFFFF

}

#navul li.navhome a:hover {

color: #FCFF00

}

#navul li.navmoon ul {

display: block

}

#navul li.navmoon ul a {

display: block

width: 98px

height: 28px

line-height: 28px

}

#navul li.navmoon ul a:hover {

background: #000000

}

</style>

</head>

<body>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

<a href="" title="CSS入门">CSS入门</a>

</li>

<li>

<a href="" title="CSS工具">CSS工具</a>

</li>

<li>

<a href="" title="CSS技巧">CSS技巧</a>

</li>

<li>

<a href="" title="CSS实例">CSS实例</a>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

<a href="" title="flash">flash</a>

</li>

</ul>

</li>

<li>

<ul>

<li>

<a href="" title="帝国cms">帝国cms</a>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<a href="" title="Javascript">Javascript</a>

<ul>

<li>

<a href="" title="Jquery">Jquery</a>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

<a href="" title="SEO杂谈">SEO杂谈</a>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

</ul>

</div>

$(window).load(function() {

$(".navbg").capacityFixed()

})

$(function() {

$("#navul > li").not(".navhome").hover(function() {

$(this).addClass("navmoon")

}, function() {

$(this).removeClass("navmoon")

})

var maxwidth = 580

$(".news_text img").each(function() {

if($(this).width() > maxwidth) {

$(this).width(maxwidth)

}

})

function $tomato(id) {

return document.getElementById(id)

}

function runCode(obj) {

var winname = window.open('', "_blank", '')

winname.document.open('text/html', 'replace')

winname.document.writeln(obj.value)

winname.document.close()

}

(function($) {

$.fn.capacityFixed = function(options) {

var opts = $.extend({}, $.fn.capacityFixed.deflunt, options)

var FixedFun = function(element) {

var top = opts.top

element.css({

"top": top

})

$(window).scroll(function() {

var scrolls = $(this).scrollTop()

if(scrolls > top) {

if(window.XMLHttpRequest) {

element.css({

position: "fixed",

top: 0

})

} else {

element.css({

top: scrolls

})

}

} else {

element.css({

position: "absolute",

top: top

})

}

})

element.find(".close-ico").click(function(event) {

element.remove()

event.preventDefault()

})

}

return $(this).each(function() {

FixedFun($(this))

})

}

$.fn.capacityFixed.deflunt = {

right: 0,

top: 25

}

})(jQuery)

</script>

</body>

结果：

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6133959.html

一段HTML 导航栏特效`谁帮我改下

发表评论

评论列表（0条）