如何简单制作一个菜单栏

最新推荐文章于 2021-12-14 15:30:18 发布

晴时初遇雨

最新推荐文章于 2021-12-14 15:30:18 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签： html css javascript

本文链接：https://blog.csdn.net/Python_BT/article/details/107738344

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>制作一个菜单栏</title>
	<style type="text/css">
		.menu{
			width: 694px;
			height: 50px;
			margin:20px auto 0; /*距离顶部20像素，居中对齐*/
			font-size: 0; /*消灭间距*/

		}

		.menu a{
			width: 98px; /*宽度*/
			height: 48px; /*高度*/
			background-color: #fff; /*中间有重叠部分，加个白色背景色去除*/
			margin-left:-1px; /*合并重合处*/
			text-decoration: none; /*去除下划线*/
			font-size:16px; /*字体大小*/
			border:1px solid gold; /*外边框1像素 粗实线 金色*/
			line-height: 50px; /*垂直对齐*/
			text-align:center; /*文本水平对齐*/
			display: inline-block; /*转变成内联块模型*/
			color: pink; /*字体粉色*/
			font-family: "雅黑"; /*字体格式*/
		}
		.menu a:hover{
			/*伪类*/
			background-color: #99FFFF; /*背景色*/
			color: #fff; /*字体颜色*/
			font-weight: bold;  /*加粗*/
			font-style: italic; /*倾斜*/
		}
		.box{
			width: 160px;
			background-color: gold;
			display: none;
			margin:0px auto;
		}
		.con:hover .box{
			display: block;  /*设置移动到页面标题会显示描述*/
		}

		.con h3{
			font-size: 30px;
			color:green;
			text-align: center;
		}
		

	</style>
</head>
<body>
	<div class="con">
	    <h3>公司详情</h3>
	    <div class="box">深圳腾讯科技有限公司</div>
	</div>
	<div class="menu">
		<a href="https://www.tencent.com/">首页</a>
		<a href="https://www.tencent.com/zh-cn/about.html">公司简介</a>
		<a href="https://www.tencent.com/zh-cn/business.html">业务</a>
		<a href="https://www.tencent.com/zh-cn/employees.html">员工</a>
		<a href="https://www.tencent.com/zh-cn/responsibility.html">企业责任</a>
		<a href="https://www.tencent.com/zh-cn/investors.html">投资者</a>
		<a href="https://www.tencent.com/zh-cn/media.html">媒体</a>
	</div>
	
</body>
</html>