jquery+css实现悬浮发光菜单导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery+css实现悬浮发光菜单导航效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @charset "utf-8"; /* CSS Document */ body { background: #000000; } #nav { background: url(//repo.bfw.wiki/bfwrepo/images/nav/slice.jpg) repeat-x; width: 100%; height: 70px; } #navigation { margin-left: 250px; } #navigation li { float: left; display: block; } #navigation li a { background-image: url(//repo.bfw.wiki/bfwrepo/images/nav/sprite.jpg); display: block; outline: none; position: relative; height: 70px; text-decoration: none; width: auto; } #navigation .home { background-position: 0px 0px; width: 102px; height: 70px; } #navigation .services { background-position: -102px 0px; width: 110px; height: 70px; } #navigation .portfolio { background-position: -212px 0px; width: 108px; height: 70px; } #navigation .about { background-position: -320px 0px; width: 102px; height: 70px; } #navigation .contact { background-position: -422px 0px; width: 103px; height: 70px; } #navigation a .hover { background: transparent url(//repo.bfw.wiki/bfwrepo/images/nav/sprite.jpg) no-repeat; display: block; opacity: 0; position: relative; top: 0; left: 0; height.........完整代码请登录后点击上方下载按钮下载查看
网友评论0