CSS无需表格的菜单实现

最新推荐文章于 2024-07-12 20:49:16 发布

hml988

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量325

点赞数

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

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

版权

HTML+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

通过ul，li生成竖排列表项目；
在li元素设置了下划线，以分割各个超链接；
通过display属性将元素转换成块元素；去掉a元素的下划线，border边框增加左右边线；
通过伪类属性a:link a:visited a:hover设置背景色和字体颜色实现，点击链接的变化转换。
通过div设置宽度

在这里插入图片描述

<html>
<head>
	<title>无表格菜单</titile>
	<meta charset="utf-8>
	<style type="text/css">
		#navigation{   /*div块设置整体的宽度与字体*/
			width:200px;
			font-family:Arial;
		}
		#navigation ul{
		list-style-type:none;    /*隐藏列表项符号 ,无外边距和内边距*/
		margin:0px;
		padding:0px;
		}
		#navigation li{  /*添加下划线，以分割各个超链接*/
		border-bottom:1px solid #ed9f9f;
		}
		#navigation li a{
			display:block;  /*转换为块元素*/
			text-decoration:none;
			border-left:12px solid #711515;
			border-right:1px solid #711515;
			padding:5px 5px 5px 5px;
		}
		#navigation li a:link,#navigation li: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="#">Friend</a></li>
			<li><a href="#">Next Station</a></li>
			<li><a href="#">Contact Me</a></li>
		</ul>  
	</div>
</body>
</html>
</html>