1、怎样在网页中设计一个按钮,点下后在当前网页出现隐藏内容.
用js或者jquery控制隐藏显示就行了，很简单的，就一段代码的事情，不会你q我
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head><title>
无标题页
</title>
<scripttype="text/javascript"src="javascript/jquery-1.7.2.min.js"></script>
<scripttype="text/javascript">
$(function(){
$("#Button1").click(function(){
$("#flash").slideDown(function(){$("#Button1").hide();});
});
});
</script>
</head>
<body>
<inputid="Button1"type="button"value="button" />
<divid="flash"style=" width:100px; height:100px; border:1px solid #ff0000; display:none;"></div>
</body>
</html>
给你附上代码，jquery库你去下一个，放到同一个路径就行了，这个没Jquery库不能运行的
2、请问有谁知道设计网页遮罩css跟html的代码怎么写 就是点击之后弹出个小窗口然后背景色变暗的那种急急急啊
HTML：
<p class="shade"></p>
<div class="tanceng">
<p class="cue">亲，活动还在继续，5月6日-5月8日抽奖，要累计50万以上才可参加哦~</p>
<p class="okbtn pt5">
<a href="javascript:void(0);">确 定</a>
</p>
</div>
CSS：
.shade{
width: 100%;
background-color: rgba(0,0,0,0.3);
position: fixed;
left: 0;
top: 0;
display: none;
}
.tanceng{
background-color: #ffeb8d;
width: 240px;
padding: 20px;
line-height: 200%;
color: #f31b33;
position: fixed;
top: 20%;
left: 50%;
border-radius: 0.6rem;
margin-left: -140px;
display: none;
}
.okbtn a{
display: block;
width: 80%;
background-color: #f31b33;
color: #fff;
line-height: 250%;
font-size: 16px;
text-align: center;
border-radius: 5px;
margin:0 auto;
}
JS:
var webH = $(window).height();
//这里显示遮罩
$("#inner").click(function(e){ //#inner就是你要点击出现遮罩的按钮
$(".shade,.tanceng").css("display","block");
$(".shade").height(webH);
$(".cue").html("亲，活动还在继续，5月6日-5月8日抽奖，要累计购买50万以上才可参加哦~");
//这个可以不要，这是我自己的东西
});
//这里隐藏遮罩
$(".okbtn").click(function(e){
$(".shade,.tanceng").css("display","none");
$(".shade").height(0);
})
3、html网页制作，javascript，select
<html>
<head>
<script language="JavaScript" type="text/javascript">
function displayfun(thisvalue){
$("#displaydiv").text(thisvalue);
}
</script>
</head>
<body>
<select onchange="displayfun(this.value)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<div id="displaydiv"></div>
</body>
</html>
4、如何制作网页首页导航菜单显示二级菜单
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.sever{ margin-top:4px;}
.sever_menu{ width:213px; background:#99ABB9;}
.sever_menu a{ display:block; }
.sever_menu img{ *margin-bottom:-2px;}
.help_menu,.help_menu_main{ line-height:25px; }
.help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}
.help_menu a{ background:url(../images/help_arr.jpg) no-repeat 43px center;}
#sever_left .help_menu:hover a{ color:#fff;}
.help_menu .hover{ background:url(../images/help_hover_arr.jpg) no-repeat 43px center; color:#FFFFFF;}
.help_menu_main ul{ text-indent:63px;}
.help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}
.help_menu_main ul li a{ color:#fff;}
</style>
<script>
// JavaScript Document
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body>
<div class="sever">
<div class="sever_menu L" id="sever_left">
<img src="images/sever_help.jpg" />
<div class="help_menu"><a id="help1" onclick="setTab('help',1,9)" class="hover">新手上路</a></div>
<div id="con_help_1" class="help_menu_main">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help2" onclick="setTab('help',2,9)">如何销售</a></div>
<div id="con_help_2" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help3" onclick="setTab('help',3,9)">如何采购</a></div>
<div id="con_help_3" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help4" onclick="setTab('help',4,9)">交易安全</a></div>
<div id="con_help_4" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help5" onclick="setTab('help',5,9)">操作指南</a></div>
<div id="con_help_5" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服务</a></div>
<div id="con_help_6" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help7" onclick="setTab('help',7,9)">商业资讯</a></div>
<div id="con_help_7" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help8" onclick="setTab('help',8,9)">展会帮助</a></div>
<div id="con_help_8" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help9" onclick="setTab('help',9,9)">广告帮助</a></div>
<div id="con_help_9" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
这个拿去参考一下吧~~
5、html网页制作，javascript，一个按钮如何有两种功能？为什么按钮点击两次才行？
当你点击按钮的时候，document.getElementById('text').style.display这个值是空，不是'block'，所以会进入else条件里，所以第一次隐藏不了
1. 你可以在div的style里加入display:block;让div的初始值为block，这样就能进入if里了
style="position:fixed; z-index:1;display:block;"
2. 或者不加display:block;，把js那段改成下面也可以：
if (document.getElementById('text').style.display==''){两种方法都可以，希望可以帮到你
6、求关于新浪页面上图片滚动效果的网页制作方法（加分贴）
这是我在新浪网上原有的基础修改了一下，还有一些简单的注释，图片部分自己可以修改，链接也可以，看看吧，感觉真的很麻烦，头都有点大。。。。。。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
<!--/*--><![CDATA[/*><!--*/
body { background-color:#FFF; margin:0px 0px;}
td,p,li,input,select,div,span {font-size:12px;page-break-after:auto;}
table,td,img,div,span,form{border: none;margin: 0 0 0 0;padding: 0 0 0 0;}
A img{border:none;}
A:link {color:#00f;}
A:visited {color:#800080;}
A:active {color:#f00;}
A:hover {color:#f00;}
.linkBlack a:link,.linkBlack a:visited {text-decoration: none;color:#000;}
.linkBlack a:active,.linkBlack a:hover {text-decoration: underline;color:#f00;}
.linkBlack{color:#000;}
a.mplink { text-decoration: none;}
a.mplink:link,a.mplink:visited {color:#000038;}
a.mplink:hover,a.mplink:active,a.mplink:focus { color:#ffffcc;}
.imgStar img {cursor:pointer; position:relative; top:2px;}
/* 定制焦点图 begin */
.focusPic{width:400px; height:320px; overflow:hidden; position:relative;}
.focusPicNum{position:absolute; width:100%; z-index:99; right:0; top:296px; background:#c0daeb; height:24px; padding-right:5px; width:395px;}
.focusPicNum .NumImg{float:right; width:145px;}
.focusPicNum .NumImg img{margin:5px 0 4px 5px;}
.NumLT{float:right; color:#006; text-align:right; font-size:12px; line-height:24px; padding-top:2px;}
.focusPicTextU01{position:absolute; height:5px; width:9px; z-index:99; left:267px; top:195px; overflow:hidden;}
.focusPicTextU02{position:absolute; height:5px; width:9px; z-index:99; left:295px; top:195px; overflow:hidden;}
.focusPicTextU03{position:absolute; height:5px; width:9px; z-index:99; left:322px; top:195px; overflow:hidden;}
.focusPicTextU04{position:absolute; height:5px; width:9px; z-index:99; left:348px; top:195px; overflow:hidden;}
.focusPicTextU05{position:absolute; height:5px; width:9px; z-index:99; left:377px; top:195px; overflow:hidden;}
.focusPicText{position:absolute; width:320px; height:96px; z-index:99; right:0; top:200px; background:#fff; text-align:left; padding:9px 70px 0 10px; line-height:19px; overflow:hidden; color:#333; line-height:19px;}
.focusPicText span{width:26px; line-height:19px; padding-left:19px; background:url(http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_002.gif) no-repeat left;}
.focusPicText .RedTi{color:#ce3201; font-weight:bold; font-size:12px; line-height:20px; padding-left:18px; background:url(http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_003.gif) 0 3px no-repeat; display:block; width:300px; text-align:left;}
.focusPicText .RedTi a:link,.focusPicText .RedTi a:visited{text-decoration:none;color:#ce3201;}
.focusPicText .RedTi a:active,.focusPicText .RedTi a:hover{text-decoration:underline;color:#f00;}
.focusPicText a:link,.focusPicText a:visited{text-decoration:underline;color:#006;}
.focusPicText a:active,.focusPicText a:hover{text-decoration:underline;color:#f00;}
/* 定制焦点图 end */
/*]]>*/-->
</style>
</head>
<body topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
<!-- 图1 begin -->
<div class="focusPic" id="focusPic1">
<div class="focusPicTextU01"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_001.gif" width="9" height="5" alt=""/></div>
<div class="focusPicText">
南丁格尔、白衣天使、制服系……经过Japan制造的家庭录影带洗礼之后，一般人对于护士的印象已经不是一张干净的白纸了。
<span class="RedTi"><a href="http://bn.sina.com.cn/ent/2006-09-18/160124581.html" target="_blank">超级两代电力公司：麻辣俏护士(上)</a> <a href="http://bn.sina.com.cn/ent/2006-09-18/160224582.html" target="_blank">(下)</a></span>
</div>
<div class="focusPicNum">
<div class="NumImg"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_01on.gif" width="23" height="15" alt=""/><a href="javascript:setFocus1(2);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_02off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(3);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_03off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(4);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_04off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(5);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_05off.gif" width="23" height="15" alt=""/></a></div>
<div class="NumLT">循环焦点图:</div>
</div>
<div class="focusPicImg"><a href="http://ent.sina.com.cn/bn/zongyi/" target="_blank"><img src="http://image2.sina.com.cn/book/.jpg" width="400" height="200" alt="《超级两代电力公司》：麻辣俏护士" title="《超级两代电力公司》：麻辣俏护士"/></a></div>
</div>
<!-- 图1 end -->
<!-- 图2 begin -->
<div class="focusPic" id="focusPic2" style="display:none;">
<div class="focusPicTextU02"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_001.gif" width="9" height="5" alt=""/></div>
<div class="focusPicText">
周笔畅现身华娱卫视《全明星歌会》，与笔迷亲密互动，除了现唱多首新歌外，还被揭发04年的时候，她与黄子佼和陶喆在华娱的前缘旧事。
<span class="RedTi"><a href="http://bn.sina.com.cn/music/2006-09-18/120524551.html" target="_blank">《全明星歌会》：周笔畅</a></span>
</div>
<div class="focusPicNum">
<div class="NumImg"><a href="javascript:setFocus1(1);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_01off.gif" width="23" height="15" alt=""/></a><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_02on.gif" width="23" height="15" alt=""/><a href="javascript:setFocus1(3);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_03off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(4);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_04off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(5);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_05off.gif" width="23" height="15" alt=""/></a></div>
<div class="NumLT">循环焦点图:</div>
</div>
<div class="focusPicImg"><a href="http://bn.sina.com.cn/music/2006-09-18/120524551.html" target="_blank"><img src="http://image2.sina.com.cn/book/.jpg" width="400" height="200" alt="《全明星歌会》：周笔畅" title="《全明星歌会》：周笔畅"/></a></div>
</div>
<!-- 图2 end -->
<!-- 图3 begin -->
<div class="focusPic" id="focusPic3" style="display:none;">
<div class="focusPicTextU03"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_001.gif" width="9" height="5" alt=""/></div>
<div class="focusPicText">
男人眼中女人最性感的部位是哪里？15%的人认为臀部是最性感的部位，而14%的人认为胸部是最性感的部位……男性更关注胸部，而女性则认为眼睛是最性感的部位。
<span class="RedTi"><a href="http://bn.sina.com.cn/z/06seafood/index.shtml" target="_blank"></a></span>
</div>
<div class="focusPicNum">
<div class="NumImg"><a href="javascript:setFocus1(1);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_01off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(2);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_02off.gif" width="23" height="15" alt=""/></a><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_03on.gif" width="23" height="15" alt=""/><a href="javascript:setFocus1(4);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_04off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(5);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_05off.gif" width="23" height="15" alt=""/></a></div>
<div class="NumLT">循环焦点图:</div>
</div>
<div class="focusPicImg"><a href="http://bn.sina.com.cn/cetv/2006-09-17/215324512.html" target="_blank"><img src="http://image2.sina.com.cn/book/.jpg" width="400" height="200" alt="《夜来女人香》半熟男女：最性感的部位" title="《夜来女人香》半熟男女：最性感的部位"/></a></div>
</div>
<!-- 图3 end -->
<!-- 图4 begin -->
<div class="focusPic" id="focusPic4" style="display:none;">
<div class="focusPicTextU04"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_001.gif" width="9" height="5" alt=""/></div>
<div class="focusPicText">
传奇，她今年九岁，跳舞时沉稳的架式，彷佛像个小大人。漂亮，她今年只有八岁，精湛的舞技是不是也让你感到相当不可思议呢？
<span class="RedTi"><a href="http://bn.sina.com.cn/ent/zongyi/index.html" target="_blank">点击进入新浪宽频“非常综艺”专区</a></span>
</div>
<div class="focusPicNum">
<div class="NumImg"><a href="javascript:setFocus1(1);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_01off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(2);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_02off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(3);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_03off.gif" width="23" height="15" alt=""/></a><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_04on.gif" width="23" height="15" alt=""/><a href="javascript:setFocus1(5);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_05off.gif" width="23" height="15" alt=""/></a></div>
<div class="NumLT">循环焦点图:</div>
</div>
<div class="focusPicImg"><a href="http://bn.sina.com.cn/ent/2006-09-15/175624488.html" target="_blank"><img src="http://image2.sina.com.cn/book/.jpg" width="400" height="200" alt="《我猜我猜我猜猜猜》：小小舞蹈高手" title="《我猜我猜我猜猜猜》：小小舞蹈高手"/></a></div>
</div>
<!-- 图4 end -->
<!-- 图5 begin -->
<div class="focusPic" id="focusPic5" style="display:none;">
<div class="focusPicTextU05"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_001.gif" width="9" height="5" alt=""/></div>
<div class="focusPicText">
1931年9月18日晚上，日本驻中国的侵略军，并借机突然袭击了东北军驻地北大营和沈阳城。随即侵占20多座城市及其周围的广大地区。这就是当时震惊中外的“九·一八”事变。
<span class="RedTi"><a href="http://bn.sina.com.cn/dv/" target="_blank"></a></span>
</div>
<div class="focusPicNum">
<div class="NumImg"><a href="javascript:setFocus1(1);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_01off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(2);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_02off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(3);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_03off.gif" width="23" height="15" alt=""/></a><a href="javascript:setFocus1(4);"><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_04off.gif" width="23" height="15" alt=""/></a><img src="http://image2.sina.com.cn/cctv/bn/wmp_pic/bn_focus_num_ws_05on.gif" width="23" height="15" alt=""/></div>
<div class="NumLT">循环焦点图:</div>
</div>
<div class="focusPicImg"><a href="http://bn.sina.com.cn/dv/2006-09-18/163524601.html" target="_blank"><img src="http://image2.sina.com.cn/book/.JPG" width="400" height="200" alt="不能忘却的纪念——《勿忘九一八》" title="不能忘却的纪念——《勿忘九一八》"/></a></div>
</div>
<!-- 图5 end -->
<script language="javascript" type="text/javascript">
//<![CDATA[
var time1 = 0; //打开页面时等待图片载入的时间，单位为秒，可以设置为0
var time2 = 5; //图片轮转的间隔时间
var timeout1 = time1*1000;
var timeout2 = time2*1000;
var nn = 1;//初始焦点
var curFileNum = 1;//传递给myPlayer对象 表示目前焦点序列值
if(navigator.appName == "Microsoft Internet Explorer"){
setTimeout('change_img()',timeout1);
}
function change_img(){
if(nn>5) nn=1
setTimeout('setFocus2('+nn+')',timeout1);
nn++;
tt=setTimeout('change_img()',timeout2);
}
function setFocus2(i){
curFileNum = i;
selectLayer1(i);
}
function setFocus1(i){
nn = i;
curFileNum = i;
selectLayer1(i);
}
function selectLayer1(i){
switch(i){
case 1:
document.getElementById("focusPic1").style.display="block";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic5").style.display="none";
break;
case 2:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="block";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic5").style.display="none";
break;
case 3:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="block";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic5").style.display="none";
break;
case 4:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="block";
document.getElementById("focusPic5").style.display="none";
break;
case 5:
document.getElementById("focusPic1").style.display="none";
document.getElementById("focusPic2").style.display="none";
document.getElementById("focusPic3").style.display="none";
document.getElementById("focusPic4").style.display="none";
document.getElementById("focusPic5").style.display="block";
break;
}
}
//]]>
</script>
</body>
</html>
7、制作网页时 内容的显示和隐藏的代码
好好回答一下，以下代码实现你所说的效果，演示之用：
代码是在网上转的，我作了一点注释，下面代码保存为.html可以看到效果。
<html>
<head>
<title></title>
<script type="text/javascript">
function show(){
if(document.getElementById("table_foot").style.display=="block")
{//如果id为table_foot的标签style.diplay属性为block，则执行：
document.getElementById("table_foot").style.display="none";
}else{
document.getElementById("table_foot").style.display="block";
}
}
</script>
</head>
<body>
<table border="1" width="100%">
<tr id="table_head" onclick="show()" style="cursor:pointer;">
<td align="center">点击这里显示内容</td>
</tr>
<tr id="table_foot" style="display:none;"><!--看这里ID值在这儿。 -->
<td height="300" align="center" valign="middle" >你看到我没啊？哈！圣诞快乐！</td>
</tr>
</table>
</body>
</html>
8、静态网页中弹出式菜单如何设计？
<! 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title>
<style type="text/css">
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>
<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!-- clear the floats if required -->
<div class="clear"> </div>
</div>
</body>
</html>