html和css实现一级菜单和二级菜单学习笔记
实现一级菜单：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> body{
font-family: "宋体";
font-size: 12px;
line-height: 1.5;
} a{
color:#000;
} a:HOVER{
color:#F00;
} .menu{
width:100px;
border:1px solid #CCC;
/* border:1px solid red; */
background-color: silver;
} .menu ul{
margin:0px;
padding:0px;
background-color: pink; } .menu li{
list-style-type: none;
background-color: #eee;
padding:0px 8px;
height:26px;
line-height: 26px;
border-bottom:1px solid #CCC; }
</style> </head> <body>
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版布局</a></li>
<li><a href="#">div+css教程</a></li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">经常使用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div> </body>
</html>
显示效果：
二级菜单的实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript">
var startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");/* 得到id */
var allli = navRoot.getElementsByTagName("li");/*得到li全部的元素 */
for (var i=0; i<allli.length; i++) {
var node = allli[i];
node.onmouseover=function() {/*注冊函数 */
this.className+=" current";
};
node.onmouseout=function() {/*注冊函数 */
this.className=this.className.replace(" current", "");
};
}
} };
window.onload=startList;/* 载入完成，运行 */
</script> <style type="text/css"> body{
font-family: "宋体";
font-size: 15px;/* 字体的大小 */
line-height: 1.5;/* line-height 属性设置行间的距离（行高）。 */
} a{
color:#f0f;/*正常的a标签的字体元素 */
text-decoration: none;/* 取消下划线 */
} /*鼠标悬浮时，字体的颜色 */
a:HOVER{
color:#F00;
} /* id为menu的菜单 */
#menu{
width:200px;/*设置宽度 */
/* border:1px solid #CCC; */
border:2px solid blue;/* 设置边框 */
/* background-color: silver; */
background-color: red; /*背景颜色为红色 */
border-bottom: none;/*下边框的宽度 */
} #menu ul{
margin:0px;/*ul的外边距 */
padding:0px;/*ul的内边距 */
width:120px;/* 块元素的宽度 */
background-color: pink;/*设置背景颜色 */ } #menu ul li{
list-style-type: none;
background-color: #eee;
/* background-color: red; */
width:90px;
padding:0px 8px;
height:26px;
line-height: 26px;
border-bottom:1px solid #CCC;
/* border-bottom:1px solid red; */
position:relative; } #menu ul li ul{
position:absolute;/*绝对定位 */
left:100px;/* 向右移动100px */
top:0px;/* 向下移动0px */
display:none;/*默认不显示 */
width:100px;/*宽度 */
border:1px solid #CCC;/* 边框 */
border-bottom: none;
} #menu ul li.current ul{
display:block;/*以块元素显示 */
} #menu ul li:hover ul{
display:block;/*以块元素显示 */
} </style> </head> <body>
<div id="menu">
<ul>
<li><a href="@#">首页</a></li>
<li><a href="#">网页版布局</a>
<ul>
<li><a href="#">自适用宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li> <li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手新手教程</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li> <li><a href="#">div+css实例</a></li>
<li><a href="#">经常使用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div> </body>
</html>
显示效果例如以下：
代码里面都有凝视，就不做过多的解释了。
http://blog.csdn.net/j903829182/article/details/38735639
html和css实现一级菜单和二级菜单学习笔记的更多相关文章
- CSS导航菜单（二级菜单）
index.html <div class="nav"> <ul> <li> <a href="#">Java& ...
- MyBatis的一级缓存和二级缓存简介笔记
关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...
- QT之二级菜单（二级菜单的箭头可以使用QSS设置图片）
QT之二级菜单 QT之二级菜单 开场白 效果图 上代码 可参考文章 下代码 结尾 开场白 今天我们一起来了解下,在我们QT中,二级菜单是如何实现的,在上篇我们学习了QT之系统托盘,QT之自定义菜单, ...
- HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...
- crm 一级菜单排序,二级菜单选中并且展开,非菜单权限的归属,权限粒度控制到按钮级别
排序 /rbac/templatetags/rbac.py from django import template from django.conf import settings import re ...
- 《精通CSS：高级Web标准解决方案》学习笔记（下）
1. background-position: left center; 两个参数分别是x和y轴方向的position 2. background-position: 10% 20%; 用百分数表示时 ...
- 《精通CSS：高级Web标准解决方案》学习笔记（上）
鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...
- CSS规范—分类方法（NEC规范学习笔记）
一.CSS文件的分类和引用顺序 Css按照性质和用途,将Css文件分成“公共型样式”.“特殊型样式”.“皮肤型样式”,并以此顺序引用,有需要可以添加版本号 1.公共型样式:包含以下几个部分 标签的重置 ...
- CSS+HTML网页设计与布局（学习笔记1）
1.在宽度未知时,使div块居中,可以添加以下属性: display:table;margin:0 auto;
随机推荐
- CUGBACM_Summer_Tranning 组队赛解题报告
组队赛解题报告: CUGBACM_Summer_Tranning 6:组队赛第六场 CUGBACM_Summer_Tranning 5:组队赛第五场 CUGBACM_Summer_Tranning 4 ...
- [Javascript] Call Stack
Every time when a function run it will be push into the call stack and put on the top, you can thin ...
- thinking in java知识小记(一)
知识点一(javadoc): 使用javadoc时特别注意选择encoding和charset为utf-8,要不然生成的javadoc会是乱码,命令:javadoc -encoding utf-8 - ...
- 获取sqlserver数据库中所有库、表、字段名的方法
获取sqlserver数据库中所有库.表.字段名的方法 2009年03月12日 星期四 下午 12:51 1.获取所有数据库名: SELECT Name FROM Master..SysDatabas ...
- XML配置silverlight ，wcf 解析xml
XML 代码: <?xml version="1.0" encoding="utf-8" ?><ChartSet xmlns:xsi=&qu ...
- vc2015编译protobuf
下载地址:https://github.com/google/protobuf 1.编译通过cmake生成sln文件来编译用cmd命令 cd 到3.0.0-beta-4\cmake mkdir bui ...
- Windows8.1使用博客客户端写博客
1.首先去微软官网下载客户端(Windows live writer) http://windows.microsoft.com/zh-cn/windows-live/essentials 安装步骤 ...
- ssh-agent自启动加key脚本
公司使用到阿里云. 需要使用 ssh-agent forward 来跳转.为了方便自己就写了这个脚本 1 #!/bin/sh 2 # auto start ssh-agent and add key ...
- jQuery中Ajax事件顺序及各参数含义
Ajax会触发很多事件.有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle ...
- JSON.stringify 语法实例讲解 字符串
语法: JSON.stringify(value [, replacer] [, space]) var student = new Object(); student.name = "La ...