制作水平导航栏

最新推荐文章于 2022-12-19 16:08:57 发布

qixibalei

最新推荐文章于 2022-12-19 16:08:57 发布

阅读量666

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/qixibalei/article/details/54578321

版权

HTML 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<title>制作水平导航栏</title>
<style type="text/css">
	ul{
		list-style-type:none;/*无下划线*/
		
	}
	a{
		display: block;/*记得把a标签设置成block块元素*/
		height:30px;
		line-height:30px;/*文字正中间*/
		width: 100px;
		float:left;
		text-align:center;
		/*text-indent: 5px;如果不想让文字居中，可以选着缩进*/
	}
	ul a:link, ul a:visited {
		font-size: 16px;
		color: black;
		text-decoration: none;/*超链接无下划线*/

	}
	ul a:hover, ul a:active {
		font-size: 16px;
		background-color: #be3948;
		text-decoration: none;
	}

</style>
</head>

<body>
<h3>课程难度</h3>
	<ul>
		<li><a href="#">全部</a></li>
		<li><a href="#">初中</a></li>
		<li><a href="#">中级</a></li>
		<li><a href="#">高级</a></li>
	</ul>
</body>
</html>

qixibalei

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
制作水平导航栏

Document制作水平导航栏 ul{ list-style-type:none;/*无下划线*/ } a{ display: block;/*记得把a标签设置成block块元素*/ height:30px; line-height:30px;/*文字正中间*/ width: 100px; float:left; text-align:center;
复制链接

扫一扫