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>