CSS-浮动布局配合ul+li制作菜单

最新推荐文章于 2022-11-26 11:32:04 发布

Go· again

最新推荐文章于 2022-11-26 11:32:04 发布

阅读量697

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/qq_43766304/article/details/104750733

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

写给自己：制作菜单一般都用这种方法

ul li标签是有语义的，方便爬虫去爬

本文这里有很多的知识点
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS-浮动布局配合ul+li制作菜单</title>
	<style type="text/css">
		.menu{
			width:694px;
			height: 50px;
			/* background-color: #00FFFF; */
			
			list-style: none;  /* 去掉列表的小圆点*/
			margin: 50px auto 0;  /* 覆盖原始浏览器的margin值*/
			padding: 0;          /* 覆盖原始浏览器的padding值*/ 
			}
		.menu li{
			width: 98px;
			height: 48px;
			border: 1px solid gold;     /* 设置边框*/
			background-color: #fff;      /* 设置背景色*/
			float: left;       /* 浮动布局*/
			margin-left:-1px ;
			
			
			
		}
		.menu li a{
			/* background-color: gold; */
			display: block;      /* a 标签转化为块元素*/
			height: 48px;
			width: 98px;
			text-align: center;
			line-height: 48px;/* 垂直居中 */
			color: deeppink;
			text-decoration: none;    /* 设置下划线要在a标签里面设置*/
			font-size: 16px;
			font-family: "microsoft yahei";
		}
		.menu li a:hover{
			background-color: #00FFFF;
			color: blueviolet;
			font-size: 20px;
			
		}
		
		
		
		
	</style>
</head>
<body>
	<!-- ul.menu>(li>a{公司简介})*7    快捷键 -->
	<ul class="menu">
		<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>
		<li><a href="#">加入我们</a></li>
	</ul>
	
</body>
</html>

Go· again

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS-浮动布局配合ul+li制作菜单

写给自己：这里有很多的知识点<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫