DIV+CSS+JavaScript的简单运用

在设计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_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">

</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的简单运用相关推荐

HTML+CSS+Javascript制作简单版网页时钟
HTML+CSS+Javascript制作简单版网页时钟 <!DOCTYPE html> <html><head><meta charset="ut ...
什么是前端？以及HTML/DIV+CSS/JavaScript技术是什么？（1）
这篇文章适用范围: 适用于:对前端.HTML/DIV+CSS/JavaScript有所耳闻,但是不理解含义不适用:学习过3天以上前端的入门者(-.- )你去看点高阶的好么.. ...
HTML5期末大作业：美食网页制作——餐饮料里(12页) HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:美食网页制作--餐饮料里(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
web网页设计与开发：个人明星介绍主题网站设计——张艺兴(10页) HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码网页设计作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
DIV+CSS建设网页简单的6个步骤
大家都知道用DIV+CSS的布局来设计网站便于优化,容易被收录,比如两个网站同时上线,拥有同样的外链,推广2个月后,保证使用DIV+CSS布局的站点获得的排名比传统的TABLE 要好,用DIV+CSS ...
html+css+JavaScript的简单笑话生成器
** 在JavaScript MDN上面看到的一个挺简单的小案例注意:尽量不要把js文件放到head里面,会监听不到事件 ** // html<body><div><l ...
基于HTML+CSS+JavaScript制作简单的大学生网页设计——我的家乡湖南
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
HTML+CSS+JavaScript实现简单的日历效果
初学前端花了一下午写了一个简单的日历效果: 可以选择按月或者按年切换,当前日期会有绿色的背景显示, 所有的日期都会正确的对应星期几. 所有代码: <!DOCTYPE html&g ...
js读取div从html中导入,在html中div+css布局的简单应用...-js+div+css下拉导航菜单完整代...-CSS文件的条件导入 - Gene Li_169IT.COM...
方案一: 在HTML文档中使用条件导入,如在HEAD中插入如下代码: 1: 4: .csharpcode, .csharpcode pre{font-size: small;color: black; ...
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理

DIV+CSS+JavaScript的简单运用

DIV+CSS+JavaScript的简单运用相关推荐

最新文章

热门文章