导航布局（HTML+CSS+JavaScript）
来源：互联网 发布：独孤信印 淘宝 编辑：程序博客网 时间：2024/06/05 20:01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--声明当前页面的三要素-->
<title> </title>
<meta name="Keywords" content="关键词,关键词,关键词">
<meta name="description" content="">
<!--css 层叠样式表 一件美丽的外衣-->
<style type="text/css">
*{margin:0px;padding:0px;}
img{border:0px;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
/*以“.”开头css样式称之为 类样式*/
.top{width:100%;height:100px;}
.top .header{width:980px;height:100px;margin:0 auto;position:relative;}
.top .header .logo{float:left;}
.top .header .qq{font-size:20px;float:right;height:66px;line-height:66px;}
.top .header .qq span{color:#ff5f25;}
.top .header .menu{width:100%;height:40px;}
.top .header .menu ul li{list-style:none;float:left;}
.top .header .menu ul li a{height:26px;display:block;line-height:26px;
padding:0 25px 0 25px;font-size:15px;text-decoration:none;color:#222;}
.top .header .menu ul li a:hover{background:#2578d8;color:#fff;}
.adv{width:100%;height:360px;background:#2578d8;text-align:center;}
.top .header .menu ul li .menu_list{background:#FFFFFF;
position:absolute;
/*兼容所有浏览器透明技术*/
opacity:0.8;filter:alpha(opacity=80);
display:none;
}
.web{width:800px;height:200px;}
.seo{width:500px;height:200px;}
.sem{width:300px;height:100px;}
</style>
</head>
<body>
<!--以class="自定义名称" 称之为 类样式-->
<div class="top">
<div class="header">
<div class="logo">
<a href="#"><img src="images/logo.png" width="215" height="66" alt="潭州学院"/></a>
</div>
<div class="qq">报名咨询QQ：<span>910984013</span></div>
<div style="clear:both;"></div>
<div class="menu">
<!--无序列表-->
<ul>
<li>
<a href="#">首页</a>
</li>
<li class="flip">
<a href="#">网页制作</a>
<div class="menu_list web"></div>
</li>
<li class="flip">
<a href="#">SEO培训</a>
<div class="menu_list seo"></div>
</li>
<li class="flip">
<a href="#">网络营销</a>
<div class="menu_list sem"></div>
</li>
<li>
<a href="#">PS培训</a>
</li>
<li>
<a href="#">淘宝VIP</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
</ul>
</div>
</div>
</div>
<div class="adv">
<img src="images/nav.jpg"/>
</div>
<div class="bottom">end</div>
<script type="text/javascript" src="http://demo.tanzhouedu.net/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".menu .flip").hover(function(){
$(this).children(".menu_list").slideDown();
},function(){
$(this).children(".menu_list").slideUp();
});
});
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--声明当前页面的三要素-->
<title> </title>
<meta name="Keywords" content="关键词,关键词,关键词">
<meta name="description" content="">
<!--css 层叠样式表 一件美丽的外衣-->
<style type="text/css">
*{margin:0px;padding:0px;}
img{border:0px;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
/*以“.”开头css样式称之为 类样式*/
.top{width:100%;height:100px;}
.top .header{width:980px;height:100px;margin:0 auto;position:relative;}
.top .header .logo{float:left;}
.top .header .qq{font-size:20px;float:right;height:66px;line-height:66px;}
.top .header .qq span{color:#ff5f25;}
.top .header .menu{width:100%;height:40px;}
.top .header .menu ul li{list-style:none;float:left;}
.top .header .menu ul li a{height:26px;display:block;line-height:26px;
padding:0 25px 0 25px;font-size:15px;text-decoration:none;color:#222;}
.top .header .menu ul li a:hover{background:#2578d8;color:#fff;}
.adv{width:100%;height:360px;background:#2578d8;text-align:center;}
.top .header .menu ul li .menu_list{background:#FFFFFF;
position:absolute;
/*兼容所有浏览器透明技术*/
opacity:0.8;filter:alpha(opacity=80);
display:none;
}
.web{width:800px;height:200px;}
.seo{width:500px;height:200px;}
.sem{width:300px;height:100px;}
</style>
</head>
<body>
<!--以class="自定义名称" 称之为 类样式-->
<div class="top">
<div class="header">
<div class="logo">
<a href="#"><img src="images/logo.png" width="215" height="66" alt="潭州学院"/></a>
</div>
<div class="qq">报名咨询QQ：<span>910984013</span></div>
<div style="clear:both;"></div>
<div class="menu">
<!--无序列表-->
<ul>
<li>
<a href="#">首页</a>
</li>
<li class="flip">
<a href="#">网页制作</a>
<div class="menu_list web"></div>
</li>
<li class="flip">
<a href="#">SEO培训</a>
<div class="menu_list seo"></div>
</li>
<li class="flip">
<a href="#">网络营销</a>
<div class="menu_list sem"></div>
</li>
<li>
<a href="#">PS培训</a>
</li>
<li>
<a href="#">淘宝VIP</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
</ul>
</div>
</div>
</div>
<div class="adv">
<img src="images/nav.jpg"/>
</div>
<div class="bottom">end</div>
<script type="text/javascript" src="http://demo.tanzhouedu.net/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".menu .flip").hover(function(){
$(this).children(".menu_list").slideDown();
},function(){
$(this).children(".menu_list").slideUp();
});
});
</script>
</body>
</html>
0 0
- 导航布局（HTML+CSS+JavaScript）
- HTML,CSS,JavaScript学习笔记--导航
- 【初识前端】CSR导航——HTML+CSS+JavaScript
- HTML CSS 水平导航
- css+html导航条
- HTML+CSS+JavaScript（1）
- Html（11）CSS的布局模型
- html与css布局（含flex）
- html&css--------布局（11/6）
- HTML+CSS布局小节
- html css 布局心得
- html+css布局
- 【Html】css布局模型
- 【HTML&CSS】混合布局
- HTML+CSS布局
- HTML布局之CSS
- html css布局漂浮
- html +css 布局技巧
- 微信公众账号开发，将消息转发到指定客服java 代码
- 关于Qt5 WA_TranslucentBackground not displayed
- App Store Review Guidelines中文版－上部
- Android 断点续传下载功能实现
- 变量的声明与定义
- 导航布局（HTML+CSS+JavaScript）
- 背包专题
- android学习笔记-布局
- Android官方导航栏ActionBar（二）—— Action View、Action Provider、Navigation Tabs的详细用法
- 2015年第一季度总结
- SQL语言和T-SQL语言简介
- Android网络编程 HttpUrlConnection HttpClient AsyncTask
- Java中的Enum的使用与分析
- Hadoop2.6.0在Win7下的配置
