导航菜单水平显示

最新推荐文章于 2024-06-01 16:06:49 发布

hml988

最新推荐文章于 2024-06-01 16:06:49 发布

阅读量1.2k

点赞数

分类专栏： HTML+CSS 文章标签： css html

本文链接：https://blog.csdn.net/hml988/article/details/108220597

版权

HTML+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过ul列表不通过表格制作了竖排导航栏：

通过ul 、li元素设置菜单项目，将它含在div区块中；
通过div设置整个的字体；
通过list-style-type属性设置ul不显示列表项目符号；
通过float属性设置li列表项目竖排转水平排列；
通过display将a内联元素转成块元素；
通过伪类属性a:link,a:visited,a:hover设置链接单击时的背景颜色和字体颜色，实现点击时的颜色转换。

<html>
<head>
	<title>导航菜单水平显示</title>
	<meta charset="utf-8">
	<style type="text/css">
		#navigation{   /*不需要设置宽度*/
			font-family:Arial;   
		}
		#navigation ul{
		list-style-type:none;
		margin:0px;
		padding:0px;
		}
		#navigation li{
		float:left;   /***将项目列表转成水平显示***/
		}
		#navigation li a{
		display:block;	/*将a元素转成块元素，目的是当鼠标进入该块的任何部分时都会被激活。*/
		border:1px solid #711515;
		padding:3px 6px 3px 6px;
		margin:2px;
		text-decoration:none;
		}
		#navigation li a:link,#navigation li a:visited{
		background-color:#c11136;
		color:#ffffff;
		}
		#navigation li a:hover{
		background-color:#990020;
		color:#ffff00;
		}
	</style>
</head>
<body>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">My Blog</a></li>
			<li><a href="#">Friends</a></li>
			<li><a href="#">Next Station</a></li>
			<li><a href="#">Contact Me</a></li>
		</ul>
	</div>
</body>
</html>

显示结果如下：在这里插入图片描述

hml988

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
导航菜单水平显示

通过ul列表不通过表格制作了竖排导航栏：通过ul 、li元素设置菜单项目，将它含在div区块中；通过div设置整个的字体；通过list-style-type属性设置ul不显示列表项目符号；通过float属性设置li列表项目竖排转水平排列；通过display将a内联元素转成块元素；通过伪类属性a:link,a:visited,a:hover设置链接单击时的背景颜色和字体颜色，实现点击时的颜色转换。<html><head> <title>导航菜单水平显示
复制链接

扫一扫