在设计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 href="http://ks.examda.com/1/">公务员在线模拟考试</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 href="http://bbs.51cto.com " target="_blank">51CTO技术论坛</a><a href="http://g.51cto.com " target="_blank">51cto技术圈</a><a href="http://bbs.tech.ccidnet.com " target="_blank">赛迪网技术社区 </a><a href="http://bbs.54master.com " target="_blank">我是网管 </a><a href="http://bbs.chinaitlab.com/ " target="_blank">中国IT实验室 </a><a href="http://www.xtzj.com/index.php " target="_blank">系统之家 </a><a href="http://bbs.chinaemail.com.cn " target="_blank">中国邮箱网 </a><a href="http://bbs.mscode.cc " target="_blank">龙帝国技术社区 </a><a href="http://bbs.newhua.com " target="_blank">华军软件园论坛 </a><a href="http://www.1000bbs.com/index.asp " target="_blank">千家论坛 </a><a href="http://www.idcquan.com " target="_blank">中国IDC圈 </a><a href="http://bbs.cnw.cn " target="_blank">网界论坛 </a><a href="http://tech.techweb.com.cn " target="_blank">TechWeb技术论坛 </a><a href="http://bbs.winos.cn " target="_blank">Windows中文社区 </a><a href="http://www.cxcs.com.cn " target="_blank">程序超市网 </a><a href="http://bbs.kaspersky.com.cn/ " target="_blank">卡巴一族 </a><a href="http://bbs.winzheng.com/ " target="_blank">嬴政天下 </a><a href="http://bbs.ctocio.com.cn/ " target="_blank">IT专家网 </a><a href="http://bbs.51cto.com/tigerding/AlexaInstaller_51cto.com-20.exe " target="_blank">Alexa工具条 </a><a href="http://bbs.chinaz.com " target="_blank">中国站长论坛 </a><a href="http://bbs.51testing.com " target="_blank">51testing </a><a href="http://www.cnfan.net " target="_blank">中国网络 </a><a href="http://bbs.ikaka.com" target="_blank">瑞星卡卡安全论坛</a><a href="http://q.yesky.com/" target="_blank">天极群乐</a><a href="http://bbs.vc52.cn" target="_blank">精睿.网络安全</a><a href="http://bbs.jcwcn.com " target="_blank">中国教程网 </a><a href="http://www.discuz.net/ " target="_blank">Discuz </a><a href="http://bbs.doit.com.cn/" target="_blank">DOIT论坛</a><a href="http://bbs.bitsCN.com" target="_blank">中国网管论坛</a><a href="http://www.ddvip.com" target="_blank"> 豆豆网</a><a href="http://www.236z.com" 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>
分享到：
相关推荐
网页设计与开发中，Div+CSS以及JavaScript是两个至关重要的技术。Div+CSS主要用于页面布局和样式控制，而JavaScript则负责交互性和动态效果。在这个"Div+Css特效及JavaScript网页特效实例"压缩包中，包含了两个子...
3. `blog.html`：这个文件可能是用于展示博客文章的页面，可能会包含文章列表、分类、搜索功能等，同样会运用<div>和CSS来实现响应式和易读的布局。 4. `table.html`：可能展示了如何使用CSS美化HTML表格，包括...
《构建基于DIV+CSS+JAVASCRIPT+FLASH的简单设计网站详解》 在Web开发领域，一个优秀的网站设计不仅需要美观的界面，还需要良好的用户体验和技术支持。本篇文章将深入探讨如何利用DIV+CSS+JAVASCRIPT+FLASH技术来...
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
而`DIV+CSS简单登录界面模板`文件可能是一个HTML文件，包含了`Div`元素和对应的`CSS`样式，以及可能的JavaScript代码来处理表单验证或提交。 总结来说，`DIV+CSS`简单登录界面模板展示了如何用HTML结构和CSS样式...
网页设计是构建互联网内容的核心部分，而`DIV+CSS+JavaScript`是现代网页设计的三大核心技术，它们共同构建了丰富、交互式的用户体验。本资源提供了一个完整的网站首页示例，旨在帮助学习者理解和掌握这些技术的实际...
基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是为了存储数据DIV是为了架设...
"韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记" 本资源主要讲解了 DIV+CSS 的概念和应用， DIV 是 HTML 文档中用来提供结构和背景的元素，而 CSS 是一种用来表现 HTML 或 XML 等文件式样的...
总结来说，纯div+css实现的图片轮播图片、电子相册功能，结合了CSS的布局和动画特性，以及JavaScript的交互处理，可以创建出丰富的用户体验。开发者需要对CSS3的`display`、`transition`、`transform`和`animation`...
总结来说，这个设计实例集为开发者提供了一个学习和参考的平台，通过实际的项目案例，可以学习到如何运用`div`进行页面布局，如何利用`CSS`美化和优化界面，以及如何借助`JavaScript`增强网页的交互性和功能性。...
通过这个简单的例子，我们可以看到`DIV+CSS+JavaScript`的结合如何实现一个基本的选项卡功能。这只是前端开发中的一种常见应用，随着技术的发展，还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程...
《DIV+CSS教程—十天学会web标准div+css标准之路》是一份全面且深入的教程，旨在帮助初学者在短时间内掌握网页布局的核心技术——DIV和CSS。此教程以Word文档的形式提供，易于阅读和打印，适合自学或者作为教学参考...
【描述】提到的"中国音乐网"案例，是一个运用`DIV+CSS`技术的实际项目，旨在创建一个专门展示和分享中国音乐的平台。这个案例可能包含了各种网页元素的布局，如导航栏、主体内容区、侧边栏、页脚等，通过`CSS`来控制...
标题 "160个DIV+CSS网页模板" 暗示了这是一份包含大量基于Div和CSS设计的网页布局示例的资源包。这些模板是网页开发者在创建响应式、结构化的网页时的重要参考资料，可以帮助他们快速理解和应用Div+CSS技术。 Div，...
通过这些实例，你可以学习如何使用HTML5创建结构化的网页，利用CSS3实现美观的样式，以及运用JavaScript实现动态交互功能。记住，理论知识是基础，但只有通过实际编写代码，才能真正掌握这些技能。 总的来说，这个...
标题和描述中提到的"div +css"是一个常见的前端网页布局技术，主要涉及到HTML和CSS两个部分。在网页设计和开发中，`div`（Division）是HTML中的一个块级元素，常用来作为容器，组织和分隔页面内容。而CSS（Cascading...
《深入理解div+css+javascript：构建动态网页的...通过深入学习这些内容，你将能够熟练地运用`div+css`进行网页布局，利用`javascript`提升用户体验，并借助在线编辑器进行实践操作，逐步成为一名优秀的前端开发者。
本篇文章将围绕"DIV+CSS绿色音乐模板"这一主题，深入探讨如何运用这种技术来创建一个美观且功能丰富的音乐主题网页。 首先，我们需要理解什么是DIV+CSS。DIV，全称是Division，即分隔，是HTML中的一个块级元素，...