HTML一级导航制作

2017-01-09 12:54:10来源:cnblogs.com作者:Samcc人点击

今天分享一下简单导航栏的制作方法:

第一步:引入css样式表,新建一个id为nav的层,使用<ul>、<li>、<a>标签来制作完成效果。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>    </head>    <body>        <div id="nav">            <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>            </ul>        </div>    </body></html>

第二步设置CSS样式:

1.设置nav的属性

#nav{    width: 500px;    height: 50px;    border: 1px solid red;}

展示效果如下所示:

  

2.清除<ul>标签前面自带的点

#nav ul{	list-style: none;}

3.设置<ul>下包含的<a>标签的属性

#nav ul li a{	width: 98px;	height: 50px;	float: left;	border: 1px solid red;	text-align: center;	line-height: 50px;	text-decoration: none;}

  4.设置鼠标滑过效果

#nav ul li a:hover{	background-color: #ABCDEF;}

  最终效果:

完整HTML代码部分:

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<link rel="stylesheet" type="text/css" href="css/yiji.css"/>	</head>	<body>		<div id="nav"><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></ul>		</div>	</body></html>

  完成CSS样式代码部分:

*{	margin: 0;	padding: 0;}#nav{	width: 500px;	height: 50px;	border: 1px solid red;	margin: 30px;}#nav ul{	list-style: none;}#nav ul li a{	width: 98px;	height: 50px;	float: left;	border: 1px solid red;	text-align: center;	line-height: 50px;	text-decoration: none;}#nav ul li a:hover{	background-color: #ABCDEF;}

  

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台