html第八节课
导航
1、首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果（从网站上下载即可）
1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2、插入div（这里我的div是带有锚点效果的，已经用红色标出锚点，定位到了网页顶端，也就是<body>开始的地方写了一句<a name="top">top</a>，如果不给name一个初始值，就写上a href="#"同样有回到顶端的效果）
1 <div id="apDiv1" ><img src="img/logo.bmp" /> 2 <nav id="menu"> 3 <div class="daohang" style="background-image:url(img/bg.png)"> 4 <a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a> 5 <a href="about us.html" target="_blank"><div> 6 关于我们</div></a> 7 8 <a href="services.html" target="_blank"><div>咖啡文化</div></a> 9 10 <a href="price list.html" target="_blank"><div>价格清单</div></a>11 12 <a href="contact.html" target="_blank"><div>联系我们</div></a>13 14 </div>15 </nav>16 <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">17 <input style="color:#fff; border:none; width:100%; background-image:url(img/menu-hover.png); font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /></div>18 <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>19 </div>
3、CSS样式表的制作(一些属性设置换上你们需要的属性就可以了)
1 /*————导航—————*/ 2 #apDiv1 { 3 position:fixed;//fixed;left:auto;top:auto用来实现悬浮的效果
4 left: auto; 5 top: auto; 6 bottom:auto; 7 width: 237px; 8 height:auto; 9 z-index: 2;10 margin-top:-8px;11 margin-left:40px;12 text-align:center;14 font-size:16px;15 font-family:"黑体";16 color:#965D28;17 background-image:url(../img/bg.png);18 }19 #menu{20 display:none;21 }22 .daohang div{23 height: 30px;24 z-index: 2;25 margin:0 auto;26 text-align:center;27 padding-top:5px;28 overflow:hidden;29 padding-top:10px;30 color:965D28;31 }32 .daohang div:hover{33 height:30px;34 z-index:2;35 margin:0 auto;36 background-image:url(../img/menu-hover.png);37 text-align:center;38 overflow:visible;39 color:#fff;40 }41 42 .daohang li{43 margin-left:237px;44 list-style-type:none;45 46 width:160px;47 line-height:30px;48 color:#422B1D;49 position:relative;50 top:-40px;51 background-image:url(../img/bg.jpg);52 border:solid thin;53 border-color:#965D28;54 z-index:1;55 }56 .daohang li:hover{57 margin-left:237px;58 list-style-type:none;59 background-color:#D3A23A;60 width:160px;61 line-height:50px;62 color:#fff;63 position:relative;64 top:-40px;65 border:solid thin;66 border-color:#965D28;67 background-image:url(../img/bg.png);68 z-index:1;69 }70 .daohang a:link,a:visited{71 text-decoration:none;72 color:#965D28;73 }74 .daohang a:hover{75 text-decoration:none;76 color:#fff;77 }
4、鼠标点击事件的触发（写在body里面）
1 <script>2 function menuvisible() {3 $("nav").toggle();/*开关*/4 } 5 </script>
<!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>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#apDiv1 {
position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
left: auto;
top: auto;
bottom:auto;
width: 237px;
height:auto;
z-index: 2;
margin-top:-8px;
margin-left:40px;
text-align:center;
font-size:16px;
font-family:"黑体";
color:#965D28;
background-image:url(../img/bg.png);
}
#menu{
display:none;
}
.daohang div{
height: 30px;
z-index: 2;
margin:0 auto;
text-align:center;
padding-top:5px;
overflow:hidden;
padding-top:10px;
color:965D28;
}
.daohang div:hover{
height:30px;
z-index:2;
margin:0 auto;
background-image:url(../img/menu-hover.png);
text-align:center;
overflow:visible;
color:#fff;
}
.daohang li{
margin-left:237px;
list-style-type:none;
background-color:#D3A23A;
width:160px;
line-height:30px;
color:#422B1D;
position:relative;
top:-40px;
background-image:url(../img/bg.jpg);
border:solid thin;
border-color:#965D28;
z-index:1;
}
.daohang li:hover{
margin-left:237px;
list-style-type:none;
background-color:#D3A23A;
width:160px;
line-height:50px;
color:#fff;
position:relative;
top:-40px;
border:solid thin;
border-color:#965D28;
background-image:url(../img/bg.png);
z-index:1;
}
.daohang a:link,a:visited{
text-decoration:none;
color:#965D28; }
.daohang a:hover{
text-decoration:none;
color:#fff;
}
</style>
</head>
<body>
<script>
function menuvisible()
{
$("nav").slideToggle(1400);/*开关*/
}
</script>
<div id="apDiv1" >
<img src="" />
<nav id="menu">
<div class="daohang" style=" background-color:#630">
<a href="index.html">
<div style=" background-color:#FC0; color:#fff">首页
</div>
</a>
<a href="about us.html" target="_blank"><div>关于我们
</div>
</a>
<a href="services.html" target="_blank"><div>咖啡文化
</div></a>
<a href="price list.html" target="_blank"><div>价格清单
</div>
</a>
<a href="contact.html" target="_blank"><div>联系我们
</div></a>
</div>
</nav>
<div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">
<input style="color:#fff; border:none; width:100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" />
</div>
<div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP
</a>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
咖啡
</body>
</html>
<!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>
*{
margin:0px;
padding:0px;
}
.aa{
height:40px;
width:80px;
top:100px;
left:100px;
position:absolute;
overflow:hidden;
line-height:40px;
text-align:center;
background-color:#0FF;
}
.aaa{
height:40px;
width:80px;
top:100px;
left:100px;
position:absolute;
overflow:visible;
line-height:40px;
text-align:center;
background-color:red;
}
#bb{
height:120px;
width:80px;
top:40px;
left:0px;
}
table{
height:120px;
width:80px;
border:0px;
text-align:center;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'">新闻动态
<div id="bb" >
<table cellpadding="0" cellspacing="0">
<tr bgcolor="#99CC00"><td>场景</td></tr>
<tr bgcolor="#FF99CC"><td>活动</td></tr>
<tr bgcolor="#0000FF"><td>杂谈</td></tr>
</table>
<script>
function over(){
var a=document.getElementById("aa")
a.setAttribute("style","overflow:visible;background-color:#F00")
}
function out(){
var a=document.getElementById("aa")
a.setAttribute("style","overflow:hidden;background-color:#0FF")
}
</script>
</div></div>
</body>
</html>
html第八节课的更多相关文章
- centos shell编程4【分发系统】 服务器标准化 mkpasswd 生成密码的工具 expect讲解 expect传递参数 expect自动同步文件 expect指定host和要同步的文件 expect文件分发系统 expect自动发送密钥脚本 Linux脚本执行方式 第三十八节课
centos shell编程4[分发系统] 服务器标准化 mkpasswd 生成密码的工具 expect讲解 expect传递参数 expect自动同步文件 expect指定host和要 ...
- centos tomcat/resin安装配置 卸载系统自带的java tomcat安装配置 安装JDK resin安装配置 第二十八节课
centos tomcat/resin安装配置 卸载系统自带的java tomcat安装配置 安装JDK resin安装配置 第二十八节课 tomcat和java都不需要编译 tom ...
- centos linux系统日常管理复习 CPU物理数逻辑核数,iftop ,iotop ,sar ,ps,netstat ,一网卡多IP,mii-tool 连接,ethtool速率,一个网卡配置多个IP,mii-tool 连接,ethtool速率 ,crontab备份, 第十八节课
centos linux系统日常管理复习 物理CPU和每颗CPU的逻辑核数,uptime ,w,vmstat,iftop ,iotop ,sar ,ps,netstat ,一个网卡配置多个IP,mii ...
- centos vim编辑器 第八节课
centos vim编辑器 第八节课 其他编辑器: nanogeditemacs 腾讯云上的vim版本~ VIM - Vi IMproved ~ ~ version 7.4.629 ~ by Br ...
- 风炫安全WEB安全学习第三十八节课 越权漏洞演示与讲解
风炫安全WEB安全学习第三十八节课 越权漏洞演示与讲解 越权漏洞 0x01 漏洞介绍 越权漏洞的危害与影响主要是与对应业务的重要性相关,比如说某一页面服务器端响应(不局限于页面返回的信息,有时信息在响 ...
- 风炫安全web安全学习第二十八节课 CSRF攻击原理
风炫安全web安全学习第二十八节课 CSRF攻击原理 CSRF 简介 跨站请求伪造 (Cross-Site Request Forgery, CSRF),也被称为 One Click Attack 或 ...
- 风炫安全WEB安全学习第十八节课 使用SQLMAP自动化注入(二)
风炫安全WEB安全学习第十八节课 使用SQLMAP自动化注入(二) –is-dba 当前用户权限(是否为root权限) –dbs 所有数据库 –current-db 网站当前数据库 –users 所有 ...
- Linux第八节课学习笔记
su命令可以切换用户身份,一般不用,而是用sudo. visudo命令中可执行命令列表不用ALL,我们可以先使用whereis命令找出命令所对应的保存路径,然后把配置文件第99行的用户权限参数修改成对 ...
- 《linux就该这么学》第八节课：第六章存储结构与磁盘划分
笔记 (借鉴请修改) 6.3.文件系统与数据资料 目前linux最常见的文件系统: ext3:日志文件系统.宕机时可自动恢复数据资料,容量越大恢复时间越长,且不能保证百分百不丢失. ext4:e ...
- php第二十八节课
文件上传 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- 设计模式C++实现——外观模式
模式定义: 外观模式提供了一个统一的接口,用来訪问子系统中的一群接口.外观定义了一个高层接口,让子系统更easy使用. 模式结构: watermark/2/text/aHR0cDovL2Jsb2cuY ...
- SharePoint 2013 关闭 customErrors
在SharePoint 2013上做开发时,如果不把customErrors 关掉,那调试起来那真叫一个费劲.在2013里,关闭customErrors 和2010一样,只要把文件路径改成15目录下即 ...
- HTML5开发移动web应用——SAP UI5篇(7)
SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...
- Android 高亮指示层提示
此库出自翔神之手 用起来绝对方便 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0J ...
- css3 动态背景
动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.当中的80% 20%为 ...
- Android入门之文件系统操作（一）简单的文件浏览器
版权声明:本文为博主原创文章,未经博主允许不得转载. import java.io.File; import java.util.*; import android.app.Activit ...
- [Apple开发者帐户帮助]一、开始（1）关于您的开发者帐户
Apple开发人员网站提供了为Apple平台制作出色应用所需的工具和信息.如果您不熟悉Apple平台上的开发,可以免费使用.只需接受Apple开发者协议,即可为您创建一个帐户.使用此帐户下载测试版软件 ...
- C#中动态读取配置
有些时候,文件修改需要及时的响应,这个时候就需要实时读取文件,预先想的是写一个计时器,每隔多久运行一次,但是不能实时响应,所以采用监听文件的方式实现读取数据 C#监听文件变化 /// <summ ...
- 【专题系列】单调队列优化DP
Tip:还有很多更有深度的题目,这里不再给出,只给了几道基本的题目(本来想继续更的,但是现在做的题目不是这一块内容,以后有空可能会继续补上) 单调队列——看起来就是很高级的玩意儿,显然是个队列,而且其 ...
- BZOJ 3876 有上下界的网络流
思路: 套用有上下界的网络流 就好了 (这算是裸题吧) 比如 有条 x->y 的边 流量上限为R 下限为L 那么du[x]-=L,du[y]+=L 流量上限变成R-L du[x]>0 ...