用html代码做网页菜单的分栏问题！！_随笔

要用这样的方式打开新的页面，关键点在target这个值上面，表示你在哪个frame里打开新页面。

此乃层的隐藏与显示也，一、点击左边的缩进图片，左边栏收缩二、实现的思路 1、图片作为按扭，点击图片触发层的显示和收缩，图片代码如下: <A href="javascript:show()"><IMG src="image/fclose.gif" align="absmiddle" border="0"></A>三、源代码 <HTML><HEAD><META http-equiv="Content-Type" content="text/htmlcharset=gb2312"><TITLE>收缩左边栏效果</TITLE><STYLE type="text/css">td{font-size:12pxline-height:22px} .red{color: #FF0000} </STYLE><SCRIPT language="JavaScript">function show(){ if(document.getElementById("left").style.display=='none'){ //判断目前左边栏的状态(显示、隐藏) document.getElementById("left").style.display='block'//显示左边栏 } else{document.getElementById("left").style.display='none'//隐藏左边栏} } </SCRIPT></HEAD><BODY><TABLE width="98%" border="0" cellspacing="0" cellpadding="0" align="center"><TR><TD id="left" width="200">点点右边的收缩按钮，看看我是不是进去了!</TD><TD width="8" style="border-right:1 #cccccc solid"><A href="javascript:show()"><IMG src="image/fclose.jpg" align="absmiddle" border="0"></A></TD><TD valign="top">右侧</TD></TR></TABLE> </BODY></HTML>

这个只是一个图标字体，一般要结合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/7288444.html

用html代码做网页菜单的分栏问题！！

发表评论

评论列表（0条）

用html代码做网页 菜单的分栏问题 ！！

发表评论

评论列表（0条）

用html代码做网页菜单的分栏问题！！