第八章 利用CSS制作导航菜单

已于 2024-12-05 09:25:52 修改
阅读量584 收藏 7
点赞数 13
文章标签： css 前端
于 2024-11-12 10:48:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_81894196/article/details/143358735
版权

  8.1 水平顶部导航栏 

  8.1.1 简单水平导航栏的设计与实现 

 8.1.1.1导航栏的创建 

    <center>
            <h3>简单水平菜单导航栏</h3>
        </center>
        <hr>
        <nav>
            <ul>
                <li><a hreaf="#">前端</a></li>
                <li><a hreaf="#">后台</a></li>
                <li><a hreaf="#">移动应用</a></li>
                <li><a hreaf="#">数据库</a></li>
                <li><a hreaf="#">操作系统</a></li>
                <li><a hreaf="#">服务器</a></li>
            </ul>
        </nav>

  8.1.1.2 列表样式的设计 

<meta charset="utf-8" />
        <title>水平导航栏制作</title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            li{
                float:left;
            }
            a{
                display:block;
                width:80px;
                padding:10px;
                text-align: center;
                text-decoration: none;
            }

8.1.1.3 超链接样式的设计 

    a:link,a:visited{
                background-color:#ff0000;
                color:#ffffff;
            }
            a:hover,a:active{
                background-color:#ffffff;
                color:#ff0000;
            }

  8.1.1.4 鼠标事件 

    padding:10px;

8.1.2 下拉子菜单导航栏的设计与实现 

8.1.2.1导航栏的创建 

<nav>
            <div id="nav">
                <ul>
                    <li><a href="#">前端</a>
                        <ol>
                            <li><a href="#">HTML5</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">Javascript</a></li>
                        </ol>
                    </li>


        8.1.2.2 列表样式的设计 

    <li><a href="#">后台</a>
                        <ol>
                            <li><a href="#">Java</a></li>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">Python</a></li>
                        </ol>
                    </li>

  8.1.2.3 二级菜单的隐藏和显示设计

        width: 80px;
                padding: 10px;
                text-align:center;
                text-decoration: none;
            }

    8.1.2.4 DIV样式的设计 

    a{
                display:block;
                width:80px;
                padding:10px;
                text-align: center;
                text-decoration: none;
            }

  8.1.2.5 超链接样式的设计 

ul li ol{
                display: none;
            }
            ul li ol{
                display:block;
            }

 8.1.2.6 鼠标事件 

    ul li ol{
                display:block;
            }
            a{
                width: 80px;
                padding: 10px;
                text-align:center;
                text-decoration: none;
            }
            ul li a{
                background-color:#ff0000;
                color:#dddddd;
            }

 8.2 纵向侧边导航栏 

        8.2.1 简单纵向导航栏的设计与实现 

 8.2.1.1导航栏的创建 

<body>
			<nav>
				<div id="nav">
					<h3 class="tit">所有商品分类</h3>
					<ul>
						<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>
						<li><a href="#">运动器材</a></li>
					</ul>
				</div>
			</nav>
		</body>


         8.2.1.2 DIV样式的设计 

<head>
			<meta charset="utf-8" />
			<title>纵向导航栏制作</title>
			<style type="text/css">
		    #nav{
				width:150px;
				background-color: #aaccff;
			}
			h3{
				text-align: center;
			}
			</style>
			</head>


         8.2.1.3 列表样式的设计 

ul{
				margin:0;
				padding:0;
				list-style-type:none;
			}
			ul li{
				border:#aaffff solid 2px;
				text-align: center;
				line-height:40px;
			}


        8.2.1.4 超链接样式的设计 

ul li{
				border:#aaffff solid 2px;
				text-align: center;
				line-height:40px;
				background-color: #dddddd;
				color:#ff0000;
				text-decoration:none;
			}
			a:hover,a:active{
				background-color:#ff0000;
				color:#dddddd;
			}


        8.2.2 出式子菜单导航栏的设计与实现 

 8.2.2.1 导航栏的创建 

ul li ol{
				display: none;
				position: absolute;
				left: 150px;
			}
			ul li ol a{
				display: 120px;
				width:120px;
				background-color:#eeeeee;
				color:#00cc33;
			}


         8.2.2.2 DIV样式的设计 

a:hover,a:active{
				background-color:#ff0000;
				color:#dddddd;
				background:ur1(img);
			}


         8.2.2.3 二级菜单的隐藏和显示设计 

<style type="text/css">
			#nav ul li{
				height:30px;
				line-height: 30px;
				text-align:center;
				border-bottom: 1px solid gray;
				position:relative;
			} 
			#nav ul li ol{
				display:none;
				width:120px;
				border:1px solid red;
				position:absolute;
				top:-1px;
				left:150px;
			}
			#nav ul li:hover ol{
				display:block;
			}
		</style>


         8.2.2.4 列表样式的设计 

<style type="text/css">
			#nav ul,#nav ol{
				margin:0px;
				padding:0px;
				list-style-type:none;
				background-color:white;
			}
		</style>


         8.2.2.5 超链接样式的设计 

   

<style type="text/css">
#nav ul li a:link,a:visited{
display :block;
font-size:18px;
color:brown;
text-decoration:none;
}
#nav ul li:hover{
background-image:url(img/bg2. JPG);
font-weight:bold;
}
#nav ul li ol li a:link{
font-size:15px;
}
#nav ul li ol li a:hover{
background-color:red;
color:white;
}
</style>


         8.3 底部固定导航栏 


        8.3.1 导航栏的创建 

<body>
<nav>
<div class="fix-footer">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">前端</a></li>
<li><a href="#">后台</a></li>
<li><a href="#">移动应用</a></li>
</ul>
</div>
</nav>
</body>


        8.3.2 列表样式的设计 

<style type="txt/css">
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
width:25%;
float:left;
line-height:50px;
}
</style>


        8.3.3 菜单固定底部的设计 

<style type="text/css">
.fix-footer{
height:50px;
width:100%;
background-color:lightgreen;
border-top:2px solid blue;
text-align:center;
z-index:9999;
position:fixed;
bottom:0;
left:0;
}
</style>


        8.3.4 超链接样式的设计 

<style type="text/css">
a:link,a:visited{
display:block;
font-size:20px;
color:black;
text-decoration:none;
font-weight:bold;
}
</style>


         8.3.5 鼠标事件 

<style type="text/css">
a:hover,a:active{
background-color:darkgray;
border-let:2px solid white;
border-reight:2px solid white;
font-size:16px;
color:red;
font-weight:bold;
}
</style>


         8.4 综合案例——优名养生馆 


         

！--综合案例-封面页.html-->
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<itle>优名养生馆</title>
<style type=" text/css">
body{
background-imoge:url(img/bg. jpg);
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
width:25%;
float; left;
line-height:50px;
}
img{
margin-top:70px;
margin-right:40px;
}
. footer{
height:50px;
width:100%;
background-image:url(img/footer-bg. jpg);
border-top:3px solid gray;
text-align:center;
z-index:9998;
position:fixed;
bottom:0;
left:0;
}
. footer-top{
height:90px;
width:90px;
text-align:center;line-height:90px;z-index:9999;
position:fixed;
bottom:0;
left:45%;
}
. footer-top a{
border-radius :90px;
}
. footer-top a:link,a:visited{
display:block;font-size:20px;color:brown;
text-decoration:none;
font-weight: bold;
border-top:3px solid gray;
background-image:url(img/footer-top-bgl. jpg);
}
. footer-top a;hover{
background-image : url(img/footer-top-bg2.jpg);
color: white;
}
footer a: link,a: visited{
display:block;font-size:20px;color:brown;
text-decoration:none;
font-weight:bold;
}
. footer a:hover{
background-color:darkgray;
border-left:2px solid white;
border-right:2px solid white;
font-size:16px;
color: red;
}
</style>
</head>
<body>
<div>
<marquee direction=" right" scrollamount="20">
< img src="img/marqueel. jpg" />< img src="img/marquee2. jpg" />< img src=" img/ marquee3. jpg" /></ marquee>
</div>
<nav>
<div class="footer-top">
</div>
进入官网
<div class="footer">
<ul>
<li>奇幻世界</li><li>主题风采</li><li>加盟相关</li><li>友情推荐</li></ul>
</div>
</nav>
</body>
</html>


          
        

傾魂
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值