DIV+CSS+JavaScript的簡單運用
上一篇 / 下一篇 2009-07-17 12:44:55 / 個人分類：開發框架
在設計HTML網頁時，CSS+ＤＩＶ＋ｊａｖａＳｃｒｉｐｔ這三種技術結合完全可以解決動態網頁的界面設計要求，特別是CSS樣式，提供了強大的修飾ＤＩＶ布局的屬性，只要你能想得到的布局方式，幾乎都提供了。
下面自己利用以上技術寫了一個比較簡單的ＨＴＭＬ界面，并利用JavaScript技術實現了界面的動態化（當你的鼠標移到某個具體的導航欄中時會動態出現相應的信息）。功能很簡單只是說明一下以上技術綜合運用的優勢。
下面試代碼，大家感興趣的話可以直接復制然后在瀏覽器中調試。
<!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. type="text/css">
a:link { color:#00CCFF } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
#top{
background:#00CCFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
line-height:15px;
font-style.:oblique;
background-position:center;
width:80%;
height:20px;
position:relative;
text-align:right;
vertical-align:text-bottom;
text-decoration:inherit;
margin-left:10%;
margin-right:5%;
margin-top:-8px;
}
#header{
background-position:center;
width:80%;
height:60px;
position:relative;
text-align:right;
vertical-align:text-bottom;
text-decoration:inherit;
margin-left:10%;
margin-right:5%;
margin-top:5px;
}
#header1{
width:15%;
height:60px;
float:left;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:32px;
line-height:55px;
font-style.:oblique;
}
#header2{
background:#00CCFF;
width:80%;
height:60px;
float:none;
margin-left:5%;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:32px;
line-height:55px;
font-style.:oblique;
}
#nav{
background:#00CCFF;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height:30px;
width:80%;
float:none;
}
#nav_4{
background:#00CCFF;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height:30px;
width:80%;
display:none;
float:none;
}
#nav_2{
background:#00CCFF;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height:30px;
width:80%;
display:none;
float:none;
}
#nav_3{
background:#00CCFF;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height:30px;
width:80%;
display:none;
float:none;
}
#foot{
margin-left:10%;
margin-right:10%;
height:20px;
width:80%;
margin-top:0.3%;
text-align:center;
}
li{
float: left;//確定li組件的擺放方式
margin-right: 1px;//調節li組件之間的相對位置
line-height: 20px;
text-decoration: none;
background;
display:block;
width: 80px;
text-align: center;
}
#content{
border:#0099FF;
border:thin;
border-style.:groove;
height:2000px;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:1%;
}
#firend_links{
height:100px;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:0.4%;
}
.title{
text-align:left;
background:#00CCFF;
margin-top:1px;
height:20;
}
#firend_links div.content{
border-style.:groove;
border-color:#00FFCC;
}
</style>
</head>
<body >
<div class="top" id="top">
<a href="#" class="welcome" title="登錄">您還未登錄 !</a>
<a href="Login.jsp" >登錄</a>
<a href="reg.jsp" >注冊</a>
</div>
<div class="header" id="header">
<div class="header1" id="header1">OnGoing!</div>
<div class="header1" id="header2" align="right">做最棒的大學生學習交流平臺！</div>
</div>
<div class="nav" id="nav">
<li id="b1" class="bi"><a href="#">首頁</a></li>
<li id="b2" class="bi"onMouseOver="switchTag('2');this.blur();" ><a href="#" >新聞</a></li>
<li id="b3" class="bi"onMouseOver="switchTag('3');this.blur();" ><a href="#" >論壇</a></li>
<li id="b4" class="bi"onMouseOver="switchTag('4');this.blur();"><a href="#">英語</a></li>
<li id="b5" class="bi"onMouseOver="switchTag('5');this.blur();"><a href="#">博客</a></li>
<li id="b6" class="bi"onMouseOver="switchTag('6');this.blur();"><a href="#">問答</a></li>
</div>
<div class="nav_4" id="nav_4">
<li><a id="bi" href="#">首頁</a></li>
<li><a id="bi" href="#">新聞</a></li>
<li><a id="bi" href="#">論壇</a></li>
<li><a id="bi" href="#">英語</a></li>
<li><a id="bi" href="#"></a></li>
<li><a id="bi" href="#">體育</a></li>
</div>
<DIV class="nav_2" id="nav_2">
<UL>
<LI><a href="/gwy/" >公務員考試</a>
<LI><a href="/gwy/xingzheng/">行政能力</a>
<LI><a href="/gwy/shenlun/">時政申論</a>
<LI><a href="/gwy/Profess/">專業筆試</a>
<LI><a href="/gwy/ms/">模擬面試題</a>
<LI><a href="/gx/">公開招選</a>
<LI><a href="/zj/">人民警察招考選拔</a>
<LI><a >公務員在線模擬考試</a>
<LI><a href="/gwy/wangxiao/">公務員考試培訓</a>
<LI><a href="/gwy/" >更多</a>
</UL>
</DIV>
<div class="nav_3" id="nav_3">
<li><a id="bi" href="#">開發語言</a></li>
<li><a id="bi" href="#">WEB開發</a></li>
<li><a id="bi" href="#">數據庫技術</a></li>
<li><a id="bi" href="#">集成開發</a></li>
<li><a id="bi" href="#">電腦技術大雜燴</a></li>
</div>
<div class="content" id="content"></div>
<div id="firend_links" class="cell"><div class="title">友情鏈接</div><div class="content"><a target="_blank">51CTO技術論壇</a><a target="_blank">51cto技術圈</a><a target="_blank">賽迪網技術社區 </a><a target="_blank">我是網管 </a><a target="_blank">中國IT實驗室 </a><a target="_blank">系統之家 </a><a target="_blank">中國郵箱網 </a><a target="_blank">龍帝國技術社區 </a><a target="_blank">華軍軟件園論壇 </a><a target="_blank">千家論壇 </a><a target="_blank">中國IDC圈 </a><a target="_blank">網界論壇 </a><a target="_blank">TechWeb技術論壇 </a><a target="_blank">Windows中文社區 </a><a target="_blank">程序超市網 </a><a target="_blank">卡巴一族 </a><a target="_blank">嬴政天下 </a><a target="_blank">IT專家網 </a><a target="_blank">Alexa工具條 </a><a target="_blank">中國站長論壇 </a><a target="_blank">51testing </a><a target="_blank">中國網絡 </a><a target="_blank">瑞星卡卡安全論壇</a><a target="_blank">天極群樂</a><a target="_blank">精睿.網絡安全</a><a target="_blank">中國教程網 </a><a target="_blank">Discuz </a><a target="_blank">DOIT論壇</a><a target="_blank">中國網管論壇</a><a target="_blank"> 豆豆網</a><a target="_blank">草根站長</a></div></div>
<div class="foot" id="foot">
聲明：OnGoing文章版權屬于作者，受法律保護。沒有作者書面許可不得轉載。若作者同意轉載，必須以超鏈接形式標明文章原始出處和作者。<br />
2003-2009 OnGoing!.com. All rights reserved. 成都WEB設計有限公司 [ 滬ICP備05023328號 ]
</div>
<script. type="text/javascript">
function switchTag(k){
var sub_arrays=new Array("nav_2","nav_3","nav_4");
for(i=0;i<sub_arrays.length;i++){
my_sub=document.getElementById(sub_arrays[i]);
my_sub.style.display="none";
}
c=document.getElementById("nav_"+k);
c.style.display="block";
}
</script>
</body>
</html>
下面自己利用以上技術寫了一個比較簡單的ＨＴＭＬ界面，并利用JavaScript技術實現了界面的動態化（當你的鼠標移到某個具體的導航欄中時會動態出現相應的信息）。功能很簡單只是說明一下以上技術綜合運用的優勢。
下面試代碼，大家感興趣的話可以直接復制然后在瀏覽器中調試。
<!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. type="text/css">
a:link { color:#00CCFF } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
#top{
background:#00CCFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
line-height:15px;
font-style.:oblique;
background-position:center;
width:80%;
height:20px;
position:relative;
text-align:right;
vertical-align:text-bottom;
text-decoration:inherit;
margin-left:10%;
margin-right:5%;
margin-top:-8px;
}
#header{
background-position:center;
width:80%;
height:60px;
position:relative;
text-align:right;
vertical-align:text-bottom;
text-decoration:inherit;
margin-left:10%;
margin-right:5%;
margin-top:5px;
}
#header1{
width:15%;
height:60px;
float:left;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:32px;
line-height:55px;
font-style.:oblique;
}
#header2{
background:#00CCFF;
width:80%;
height:60px;
float:none;
margin-left:5%;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:32px;
line-height:55px;
font-style.:oblique;
}
#nav{
background:#00CCFF;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height:30px;
width:80%;
float:none;
}
#nav_4{
background:#00CCFF;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height:30px;
width:80%;
display:none;
float:none;
}
#nav_2{
background:#00CCFF;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height:30px;
width:80%;
display:none;
float:none;
}
#nav_3{
background:#00CCFF;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height:30px;
width:80%;
display:none;
float:none;
}
#foot{
margin-left:10%;
margin-right:10%;
height:20px;
width:80%;
margin-top:0.3%;
text-align:center;
}
li{
float: left;//確定li組件的擺放方式
margin-right: 1px;//調節li組件之間的相對位置
line-height: 20px;
text-decoration: none;
background;
display:block;
width: 80px;
text-align: center;
}
#content{
border:#0099FF;
border:thin;
border-style.:groove;
height:2000px;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:1%;
}
#firend_links{
height:100px;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:0.4%;
}
.title{
text-align:left;
background:#00CCFF;
margin-top:1px;
height:20;
}
#firend_links div.content{
border-style.:groove;
border-color:#00FFCC;
}
</style>
</head>
<body >
<div class="top" id="top">
<a href="#" class="welcome" title="登錄">您還未登錄 !</a>
<a href="Login.jsp" >登錄</a>
<a href="reg.jsp" >注冊</a>
</div>
<div class="header" id="header">
<div class="header1" id="header1">OnGoing!</div>
<div class="header1" id="header2" align="right">做最棒的大學生學習交流平臺！</div>
</div>
<div class="nav" id="nav">
<li id="b1" class="bi"><a href="#">首頁</a></li>
<li id="b2" class="bi"onMouseOver="switchTag('2');this.blur();" ><a href="#" >新聞</a></li>
<li id="b3" class="bi"onMouseOver="switchTag('3');this.blur();" ><a href="#" >論壇</a></li>
<li id="b4" class="bi"onMouseOver="switchTag('4');this.blur();"><a href="#">英語</a></li>
<li id="b5" class="bi"onMouseOver="switchTag('5');this.blur();"><a href="#">博客</a></li>
<li id="b6" class="bi"onMouseOver="switchTag('6');this.blur();"><a href="#">問答</a></li>
</div>
<div class="nav_4" id="nav_4">
<li><a id="bi" href="#">首頁</a></li>
<li><a id="bi" href="#">新聞</a></li>
<li><a id="bi" href="#">論壇</a></li>
<li><a id="bi" href="#">英語</a></li>
<li><a id="bi" href="#"></a></li>
<li><a id="bi" href="#">體育</a></li>
</div>
<DIV class="nav_2" id="nav_2">
<UL>
<LI><a href="/gwy/" >公務員考試</a>
<LI><a href="/gwy/xingzheng/">行政能力</a>
<LI><a href="/gwy/shenlun/">時政申論</a>
<LI><a href="/gwy/Profess/">專業筆試</a>
<LI><a href="/gwy/ms/">模擬面試題</a>
<LI><a href="/gx/">公開招選</a>
<LI><a href="/zj/">人民警察招考選拔</a>
<LI><a >公務員在線模擬考試</a>
<LI><a href="/gwy/wangxiao/">公務員考試培訓</a>
<LI><a href="/gwy/" >更多</a>
</UL>
</DIV>
<div class="nav_3" id="nav_3">
<li><a id="bi" href="#">開發語言</a></li>
<li><a id="bi" href="#">WEB開發</a></li>
<li><a id="bi" href="#">數據庫技術</a></li>
<li><a id="bi" href="#">集成開發</a></li>
<li><a id="bi" href="#">電腦技術大雜燴</a></li>
</div>
<div class="content" id="content"></div>
<div id="firend_links" class="cell"><div class="title">友情鏈接</div><div class="content"><a target="_blank">51CTO技術論壇</a><a target="_blank">51cto技術圈</a><a target="_blank">賽迪網技術社區 </a><a target="_blank">我是網管 </a><a target="_blank">中國IT實驗室 </a><a target="_blank">系統之家 </a><a target="_blank">中國郵箱網 </a><a target="_blank">龍帝國技術社區 </a><a target="_blank">華軍軟件園論壇 </a><a target="_blank">千家論壇 </a><a target="_blank">中國IDC圈 </a><a target="_blank">網界論壇 </a><a target="_blank">TechWeb技術論壇 </a><a target="_blank">Windows中文社區 </a><a target="_blank">程序超市網 </a><a target="_blank">卡巴一族 </a><a target="_blank">嬴政天下 </a><a target="_blank">IT專家網 </a><a target="_blank">Alexa工具條 </a><a target="_blank">中國站長論壇 </a><a target="_blank">51testing </a><a target="_blank">中國網絡 </a><a target="_blank">瑞星卡卡安全論壇</a><a target="_blank">天極群樂</a><a target="_blank">精睿.網絡安全</a><a target="_blank">中國教程網 </a><a target="_blank">Discuz </a><a target="_blank">DOIT論壇</a><a target="_blank">中國網管論壇</a><a target="_blank"> 豆豆網</a><a target="_blank">草根站長</a></div></div>
<div class="foot" id="foot">
聲明：OnGoing文章版權屬于作者，受法律保護。沒有作者書面許可不得轉載。若作者同意轉載，必須以超鏈接形式標明文章原始出處和作者。<br />
2003-2009 OnGoing!.com. All rights reserved. 成都WEB設計有限公司 [ 滬ICP備05023328號 ]
</div>
<script. type="text/javascript">
function switchTag(k){
var sub_arrays=new Array("nav_2","nav_3","nav_4");
for(i=0;i<sub_arrays.length;i++){
my_sub=document.getElementById(sub_arrays[i]);
my_sub.style.display="none";
}
c=document.getElementById("nav_"+k);
c.style.display="block";
}
</script>
</body>
</html>
相關閱讀:
- 用于調試CSS/JavaScript兼容性的工具 (snooker, 2008-11-05)
- CS/CSS架構應用的軟件性能測試模型分析 (wangyajing, 2009-3-24)
- JavaScript軟件性能測試 (wangyajing, 2009-3-26)
- 軟件測試過程中度量JavaScript程序的代碼覆蓋率的工具JSCoverage (huangw, 2009-5-14)
導入論壇 引用鏈接 收藏 分享給好友 推薦到圈子 管理 舉報
TAG: CSS JavaScript Javascript javascript DIV
