前端笔记记录---简单导航栏（浮动）

最新推荐文章于 2023-11-10 18:17:09 发布

兰兰的风。。。

最新推荐文章于 2023-11-10 18:17:09 发布

阅读量280

点赞数 1

分类专栏： # css # html 文章标签： html css

本文链接：https://blog.csdn.net/pilgrim_121/article/details/111088730

版权

css 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

8 篇文章 1 订阅

订阅专栏

声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！

实现效果

点击前：
在这里插入图片描述
点击后：

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*清除页面上的默认样式*/
		* {
			margin: 0;
			padding: 0;
        }

        /*清除页面上li元素的默认样式：即去掉小黑点*/
        li { 
        	list-style: none;

        }
        a {
            text-decoration: none;
        }

        .one {
        	width: 1202px;
        	height: 142px;
        	/*tips:当一个div里放图片时，最好一定要设置高度，不要指望图片的自然高度撑开div，因为会差4px*/
        	margin: 0 auto;
        	/*先设置盒子宽度，然后margin设置左右auto，使盒子居中显示在页面*/
        }
        .two {
        	margin: 0 auto;
        	width: 1202px;
        	background-color: #fe8a63;
        	height: 40px;
        }
        .two li {
            float: left;
            margin-right: 1px;
        }
        .two li a{
        	display: inline-block;
        	width: 150px;
        	height: 40px;
        	line-height: 40px;
        	text-align: center;
        	background-color: #ffaa71;
        	color: black;
        }
        .two li a:hover {
        	color: white;
        	background-color: #543243;
        }
	</style>
	
</head>
<body>
	
		<div class="one">
		   <img src="imgs/view.jpg" alt="">
	    </div>
		<div class="two">
			<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>
		</div>
</body>
</html>

兰兰的风。。。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
前端笔记记录---简单导航栏（浮动）

声明：以下内容为个人学习总结，可能有理解有误或记录错误之处，初衷是方便自己学习复习记录。实现效果点击前：点击后：实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen.
复制链接

扫一扫