制作思路
- 静态网页的制作
- 动态特效的视线——下拉菜单的显示与隐藏【css方法实现/jQuery方法实现/JavaScript方法实现】
- 浏览器兼容
静态网页的制作(HTML+CSS)
- 项目列表:
<ul><li></li></ul>
标签 - 链接:
<a>
标签 - 浮动:
float
display:block
- 元素的定位:
position
版本1.0【CSS实现】代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单实现-CSS(版本1.0)</title>
<style type="text/css">
* {
/*盒子有自己默认的margin和padding,去掉这些*/
margin: 0;
padding: 0;
}
#menu {
background-color: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
}
ul {
list-style: none; /**/
}
ul li {
float: left; /*让列表横向显示*/
line-height: 40px; /*垂直居中*/
text-align: center; /*水平居中*/
position: relative; /*将下拉菜单放在指定位置第二步,让子菜单针对此菜单进行定位,而不是针对浏览器定位*/
}
ul li:hover ul{
display: block; /*其次,鼠标划过时下拉菜单显示*/
}
ul li ul {
position: absolute; /*将下拉菜单放在指定位置第一步*/
left: 0; /*绝对absolute定位要配合left和top使用*/
top: 40px;
display: none; /*首先,下拉菜单隐藏*/
}
ul li ul li {
float: none; /*子列表竖向显示*/
background-color: #eeeeee;
margin-top: 2px;
border: 1px solid #ff1212;
}
a {
padding: 0 20px; /*让宽度自适应文字大小*/
text-decoration: none; /*取消链接下划线*/
color: #000;
display: block; /*将a标签变为块级元素*/
height: 40px;
}
a:hover {
color: white; /*鼠标滑过时文字颜色为白色*/
background-color: #787f80; /*鼠标滑过时背景颜色*/
}
ul li ul li a {
width: auto; /*让下拉菜单框大小自适应文字多少*/
}
ul li ul li a:hover{
background-color: #ff1212; /*设置二级菜单的样式*/
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">前端学习</a>
<ul>
<li><a>HTMLHTMLHTMLHTMLHTMLHTML</a></li>
<li><a>CSS</a></li>
<li><a>JavaScript</a></li>
<li><a>jQuery</a></li>
</ul>
</li>
<li><a href="#">后端学习</a>
<ul>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
<li><a>JavaScript</a></li>
<li><a>jQuery</a></li>
</ul></li>
<li><a href="#">算法学习</a>
<ul>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
<li><a>JavaScript</a></li>
<li><a>jQuery</a></li>
</ul></li>
<li><a href="#">网络学习</a>
<ul>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
<li><a>JavaScript</a></li>
<li><a>jQuery</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
版本1.1【JavaScript实现】代码
onmouseover
、onmouseout
、getElementsById
、this
- 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单实现-JavaScript(版本1.1)</title>
<style type="text/css">
* {margin:0; padding:0;}
#menu{background-color:#eee; width:600px; height:40px; margin:0 auto;}
ul {list-style:none;}
ul li {float:left; line-height:40px; text-align:center; position:relative;}
a {text-decoration:none; color:black; display:block; width:90px;}
a:hover{color:white; background-color:gray;}
ul li ul{width:90px; position:absolute; left:0; top:40px; display:none;}
ul li ul li{float:none; border-left:none; margin-top:2px; background-color:#eee;}
</style>
<script type="text/javascript">
function showSubMenu(li) {
//获取li下的ul子菜单
var subMenu = li.getElementsByTagName('ul')[0];
subMenu.style.display = 'block';
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName('ul')[0];
subMenu.style.display = 'none';
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">前端学习</a>
<ul>
<li><a href="#">HTMLHTMLHTMLHTMLHTMLHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">后端学习</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul></li>
<li><a href="#">算法学习</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul></li>
<li><a href="#">网络学习</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
版本1.2【jQuery实现】代码
$(function(){})
、children()
、show()
、hide()
- 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单实现-CSS(版本1.0)</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(function () {
$('.outer').mouseover(function () {
$(this).children('ul').show();
});
$('.outer').mouseout(function () {
$(this).children('ul').hide();
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#menu {
background-color: #eeeeff;
width: 600px;
height: 40px;
margin: 0 auto;
}
ul {
list-style: none;
}
ul li {
float:left;
line-height: 40px;
text-align: center;
position: relative;
}
a {
text-decoration: none;
color: #000;
display: block;
width: 90px;
}
a:hover {
color: #FFFFFF;
background-color: #666666;
}
ul li ul li {
float: none;
border-left: none;
margin-top: 2px;
background-color: #eeeeff;
}
ul li ul {
width: 90px;
position: absolute;
left: 0px;
top: 40px;
display: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="outer"><a href="#">前端学习</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li class="outer"><a href="#">后端学习</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul></li>
<li class="outer"><a href="#">算法学习</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul></li>
<li class="outer"><a href="#">网络学习</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
版本1.3【变幻菜单】代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变幻菜单</title>
<style type="text/css">
.outer{
font-size: 12px;
font-weight: bold;
list-style: none;
border-bottom: 8px solid #40e0d0;
overflow: auto; /*使其包裹整个ul*/
}
.outer li{
float: left;
margin-right: 1px;
}
.outer li a{
line-height: 40px;
text-decoration: none;
background: #ddd;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.outer li a span {
display: none;
}
.outer li a:hover span{
display: block;
color: white;
background: #40e0d0;
}
.outer li a:hover{
margin-top: -40px;
}
</style>
</head>
<body>
<ul class="outer">
<li><a href="#">First<span>天头</span></a></li>
<li><a href="#">Third<span>书眉</span></a></li>
<li><a href="#">Forth<span>订口</span></a></li>
<li><a href="#">Fifth<span>封里</span></a></li>
<li><a href="#">Sixth<span>书脊</span></a></li>
<li><a href="#">Second<span>地脚</span></a></li>
</ul>
</body>
</html>
版本1.3【多级菜单】代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级菜单</title>
<style type="text/css">
.outer{
font-size: 12px;
font-weight: bold;
list-style: none;
}
.outer li{
float: left;
margin-right: 1px;
}
.outer li a{
line-height: 40px;
text-decoration: none;
background: #ddd;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.outer li a:hover{
counter: white;
background: red;
}
.outer li ul{
list-style: none;
display: none;
padding: 0;
position: relative;
}
.outer li ul li {
float: none;
}
.outer li:hover ul{
display: block;
}
.outer li:hover ul li ul{
display: none;
}
.outer li ul li:hover ul{
display: block;
top: 0;
left: 80px;
position: absolute;
}
</style>
</head>
<body>
<ul class="outer">
<li><a href="#">First</a></li>
<li><a href="#">Second</a>
<ul>
<li><a href="#">第一章</a>
<ul>
<li><a href="#">第一节</a></li>
<li><a href="#">第二节</a></li>
<li><a href="#">第三节</a></li>
<li><a href="#">第四节</a></li>
</ul>
</li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Third</a></li>
<li><a href="#">Forth</a></li>
<li><a href="#">Fifth</a></li>
<li><a href="#">Sixth</a></li>
</ul>
</body>
</html>
jQuery实现动画菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现动画菜单</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
.outer{
font-size: 20px;
font-weight: bold;
list-style: none; /*去掉圆点*/
}
.outer li{
float: left; /*让菜单横向显示*/
margin-right: 1px; /*让菜单间有1px的间距*/
}
.outer li a{
line-height: 60px; /*行高*/
text-decoration: none; /*去除下划线*/
background: #ddd;
color: #666666;
display: block;
width: 100px;
text-align: center; /*居中对齐*/
}
.outer li ul{
list-style: none;
display: none;
padding: 0;
position: absolute; /*特别注意!!!!!!*/
}
.outer li a:hover {
background: url("materials/grayMulti.png") 0 0 repeat-x;
}
.note {
color: #ddd;
display: block;
background: url("materials/grayMulti.png") 0 0 repeat-x;
}
.arrow{
display: block;
height: 40px;
background: url("materials/arrow.png") 30px 0 no-repeat;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.outer li').mouseover(function () {
$(this).find('ul').slideDown('1000');
});
$('.outer li').mouseleave(function () {
$(this).find('ul').slideUp('1000');
})
})
</script>
</head>
<body>
<ul class="outer">
<li><a href="#"><span class="note">START</span></a></li>
<li><a href="#">First</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Second</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Third</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Forth</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Fifth</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Sixth</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
</ul>
</body>
</html>
JS实现动画菜单
onmouseover
、onmouseout
、setTimeOut
、onmouseover
、onmouseleave
尤其要注意后面两个都是小写!!!- 代码示例;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JS实现动画菜单</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
.outer{
font-size: 20px;
font-weight: bold;
list-style: none; /*去掉圆点*/
}
.outer li{
float: left; /*让菜单横向显示*/
margin-right: 1px; /*让菜单间有1px的间距*/
}
.outer li a{
line-height: 60px; /*行高*/
text-decoration: none; /*去除下划线*/
background: #ddd;
color: #666666;
display: block;
width: 100px;
text-align: center; /*居中对齐*/
}
.outer li ul{
list-style: none;
display: none;
padding: 0;
position: absolute; /*特别注意!!!!!!*/
height: 0; /*为移动位置做准备*/
overflow: hidden; /*隐藏溢出的部分*/
}
.outer li a:hover {
background: url("materials/grayMulti.png") 0 0 repeat-x;
}
.note {
color: #ddd;
display: block;
background: url("materials/grayMulti.png") 0 0 repeat-x;
}
.arrow{
display: block;
height: 40px;
background: url("materials/arrow.png") 30px 0 no-repeat;
}
</style>
<script type="text/javascript">
window.onload = function () {
var ALi = document.getElementsByTagName('li');
for(var i=0;i<ALi.length;i++){
ALi[i].onmouseover = function () {
var oUl = this.getElementsByTagName('ul')[0];
if(oUl!=undefined){
oUl.style.display = 'block';
changeHeight(oUl.id, 1);
}
};
ALi[i].onmouseleave = function () {
var oUl = this.getElementsByTagName('ul')[0];
if(oUl!=undefined){
changeHeight(oUl.id, -1);
}
}
}
};
function changeHeight(id, speed) {
var aUl = document.getElementById(id);
var h = aUl.offsetHeight;
h += speed;
if(speed>0){
if(h<100){
aUl.style.height = h + 'px';
setTimeout("changeHeight('"+id+"',1)",10);
}
}else{
if(h>0){
aUl.style.height = h + 'px';
setTimeout("subHeight('"+id+"',-1)",10);
}else{
aUl.style.display = 'none';
}
}
}
function addHeight(id) {
var aUl = document.getElementById(id);
var h = aUl.offsetHeight;
h += 1;
if(h<100){
aUl.style.height = h + 'px';
setTimeout("addHeight('"+id+"')",10);
}
}
function subHeight(id) {
var aUl = document.getElementById(id);
var h = aUl.offsetHeight;
h -= 1;
if(h>0){
aUl.style.height = h + 'px';
setTimeout("subHeight('"+id+"')",10);
}else{
aUl.style.display = 'none';
}
}
</script>
</head>
<body>
<ul class="outer">
<li><a href="#"><span class="note">START</span></a></li>
<li><a href="#">First</a>
<ul id="f">
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Second</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Third</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Forth</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Fifth</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Sixth</a>
<ul>
<span class="arrow"></span>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
</ul>
</body>
</html>
CSS3实现动画菜单
CSS3实现菜单圆角:
border-radius
。
CSS3实现渐变背景:linear-gradient
。
CSS3实现阴影:box-shadow
。
CSS3实现透明:transition
。
CSS3实现尖角:before
。- 代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现动画菜单</title>
<style type="text/css">
.box {
display: block;
width: 0;
border-bottom: 10px solid red;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
}
.box2 {
display: block;
width: 0;
border-bottom: 10px solid red;
border-left: 10px solid green;
border-top: 10px solid blue;
border-right: 10px solid gray;
}
.outer{
width: 960px;
margin: 60px auto;
border: 1px solid #222222;
background-color: #111;
background-image: linear-gradient(#444,#111); /*渐变背景*/
border-radius: 6px; /*圆角*/
box-shadow: 0 1px 1px #777;
padding: 0;
list-style: none;
zoom: 1; /*清除浮动*/
}
/*清除浮动终极!!*/
.outer:before, .outer:after {
content: ' ';
display: table;
}
.outer:after {
clear: both;
}
.outer li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
.outer li a {
float: left;
padding: 12px 30px;
color: #999;
font-weight: bold;
font-size: 12px;
text-decoration: none;
text-shadow: 0 1px 0 #000; /*水平距离,垂直距离,模糊距离,颜色*/
}
.outer li a:hover {
color: #fafafa;
}
.outer li ul{
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
padding: 0;
background-color: #444;
background-image: linear-gradient(#444,#111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
opacity: 0; /*透明度*/
margin: 20px 0 0 0;
transition: all .2s ease-in-out;
_margin:0;
}
.outer li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
.outer ul li {
float: none;
display: block;
border: 0;
box-shadow: 0 1px 0 #111, 0 2px 0 #666; /*两个阴影叠加形成分割线的效果*/
}
.outer ul a {
padding: 10px;
width: 130px;
display: block;
float: none;
_height: 10px;
}
.outer ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
.outer ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
.outer ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
.outer ul li:first-child > a:before {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
.outer ul li:first-child > a:hover:before {
border-bottom-color: #04acec;
}
.outer ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
box-shadow: -1px 0 0 rgba(255,255,255,.3);
_margin:0;
}
.outer ul ul li:first-child a:before{
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid transparent;
}
.outer ul ul li:first-child a:hover:before{
border-bottom-color: transparent;
border-right-color: #0299d3;
}
</style>
</head>
<body>
<!--CSS3实现菜单圆角:border-radius-->
<!--CSS3实现渐变背景:linear-gradient-->
<!--CSS3实现阴影:box-shadow-->
<!--CSS3实现透明:transition-->
<!--CSS3实现尖角:before-->
<ul class="outer">
<li><a href="#">START</a></li>
<li><a href="#">First</a>
<ul>
<li><a href="#">第一章</a>
<ul>
<li><a href="#">第一节</a></li>
<li><a href="#">第二节</a></li>
<li><a href="#">第三节</a></li>
<li><a href="#">第四节</a></li>
</ul>
</li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Second</a>
<ul>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Third</a>
<ul>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Forth</a>
<ul>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Fifth</a>
<ul>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
<li><a href="#">Sixth</a>
<ul>
<li><a href="#">第一章</a></li>
<li><a href="#">第二章</a></li>
<li><a href="#">第三章</a></li>
<li><a href="#">第四章</a></li>
</ul>
</li>
</ul>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>