使用html，css实现导航栏二

最新推荐文章于 2024-05-19 09:58:49 发布

jay编程

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量442

点赞数

分类专栏： javaWeb # html # css

本文链接：https://blog.csdn.net/weixin_45986454/article/details/106521314

版权

javaWeb 同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

html

16 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

标题：使用html，css实现导航栏二

方式一：使用无序列表实现【上一篇blog：
https://blog.csdn.net/weixin_45986454/article/details/106520168】；
方式二：使用div实现导航栏【本篇blog】；

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			测试导航栏
		</title>	
		<style type="text/css">
		*{
		   margin:0px;
		   padding:0;
			}
		.nav{
		    /*设置宽度*/
		    width:800px;
		    /*设置背景*/
      background-color:pink;
      /*开启bfc*/
      overflow:hidden;
      /*设置位置*/
      margin:10px auto;
		}
		.nav .box{
		   /*浮动*/
		   float:left;
		   /*设置宽度*/
		   width:25%;
		}
		
		.box a{
		   /*内联元素-->块元素*/
		   display:block;
		   /*设置宽度 扩大点击的范围*/
		   width:100%;
		   /*设置字体颜色*/
		   color:black;
		   /*设置字体大小*/
		   font-size:20px;
		   /*设置字体对齐方式*/
		   text-align:center;
		   /*去掉下划线*/
		   text-decoration:none;
		   
		   
		}
		.box a:hover{
		   background-color:green;
		}	   		   
		</style>
					
	</head>
	<body>
	     <div class="nav">
	        <div class="box"><a href="#">首页</a></div>
	        <div class="box"><a href="#">新闻</a></div>
	        <div class="box"><a href="#">联系</a></div>
	        <div class="box"><a href="#">关于</a></div>
	        
	        <div class="box"><a href="#">首页</a></div>
	        <div class="box"><a href="#">新闻</a></div>
	        <div class="box"><a href="#">联系</a></div>
	        <div class="box"><a href="#">关于</a></div>
	     </div>
	     <img src="magazine-unlock-hi1057703.jpg" width="300"  alt="周杰伦"/><br/>			

	</body>
</html>