各种导航的制作

最新推荐文章于 2020-11-04 11:40:37 发布

clqxmt

最新推荐文章于 2020-11-04 11:40:37 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：各种导航的制作

本文链接：https://blog.youkuaiyun.com/weixin_43755513/article/details/97809235

CSS 专栏收录该内容

68 篇文章

订阅专栏

各种导航的制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			/*  nav1  */
			.nav1{width:489px;height:42px;}
			
			.nav1 h1{margin-left:5px;}
			.nav1 a{float:left;height:28px;width:77px;text-align:center;line-height:28px;text-decoration:none;font-size:10px;color:#7d796d;background: #dadada;margin-top:6px;}
			.nav1 p{height:8px;width:489px;background:#fee00c;clear:both;border-bottom:1px solid #d7b760;display:block;}
		.nav1 a:hover{background:#fce10e;margin-top:0;height:34px;line-height:36px;}
		
		</style>
	</head>
	<body>
		<!--nav1-->
	   <div class="nav1">
	      <h1>
			<a href="#">sample</a>
			<a href="#">sample</a>
			<a href="#">sample</a>
			<a href="#">sample</a>
			<a href="#">sample</a>
	      </h1>
	     <p></p>
     </div>
     
  
	</body>
</html>

在这里插入图片描述
2.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
			
		/*  nav2  */
		.nav2{margin-top:100px; width:450px; background:#ff0; border-bottom:1px solid #000; padding-left:30px; height:39px;}
		.nav2 ul li{list-style:none;}
		.nav2 ul li a{text-decoration:none; font-size:9px; color:#beb1a9; padding:0px 14px 0px; float:left; background:#f7f7f7; margin-left:9px; margin-top:3px; border:1px solid #999; border-bottom:none; height:35px; line-height:35px;}
		.nav2 ul li a:hover{background:#fff;margin-top:0;height:40px;/*line-height:40px;*/border-color:#000;}
		
	
		</style>
	</head>
	<body>
	
     <!--nav2-->
     <div class="nav2">
     	<ul>
			<li><a href="#">sample</a></li>
			<li><a href="#">sample</a></li>
			<li><a href="#">sample</a></li>
			<li><a href="#">sample</a></li>
			<li><a href="#">sample</a></li>
	      </ul>
     </div>
  
	</body>
</html>

3
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;}
		
		/* nav3  */
		.nav3{width:477px;height:34px;margin-top:50px; border-bottom:1px solid #000;}
	    .nav3 ul li{list-style:none;background:#ff0;}
	    .nav3 ul li a{text-decoration:none; height:32px; line-height:32px; font-size:8px; color:#f1ffff; float:left;padding:0 10px;margin-top:1px;border-top:1px solid #000; background:#1a79bd;}
	    .nav3 ul li a:hover{height:33px;margin-top:0;background:#2586d7;}
		</style>
	</head>
	<body>

     <!--nav3-->
     <div class="nav3">
     	<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">sample</a></li>
			<li><a href="#">sample</a></li>
			<li><a href="#">sample</a></li>
			<li><a href="#">sample</a></li>
			<li><a href="#">sample</a></li>
			<li><a href="#" style="border-right:1px solid #000;">sample</a></li>
	      </ul>
     </div>
	</body>
</html>