导航条

最新推荐文章于 2023-03-22 15:29:07 发布

zmnmh

最新推荐文章于 2023-03-22 15:29:07 发布

阅读量145

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/zmnmh/article/details/92580475

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/**清除浏览器默认格式 **/
			*{margin: 0;padding: 0;}
			/**设置导航栏父元素样式 **/
			ul{
				width:1000px;
				height: 50px;
				margin: 10px auto;
				}
			/**设置li子元素样式 **/
			li{
				list-style:none;
				width: 25%;
				text-align: center;
				background-color: deepskyblue;
				padding: 5px 0;
				float: left;
				}
			/**设置li鼠标滑过的样式**/
			li:hover{background-color: darkred;}
			/**清除链接默认格式，并设置为16px大小加粗黑色微软雅黑字体 **/
			a{
				text-decoration: none;
				font: bold 16px "微软雅黑" ;
				color: black;
				}
		</style>
	</head>
	<body>
		<!--建立无序列表内容-->
		<ul>
			<li class='shouye'><a href="#">首页</a></li>
			<li class='chanpin'><a href="#">产品</a></li>
			<li class='lianxi'><a href="#">联系</a></li>
			<li class='guanyu'><a href="#">关于</a></li>
		</ul>
	</body>
</html>

zmnmh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航条

效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /**清除浏览器默认格式 **/ *{margin: 0;padding: 0;} ...
复制链接

扫一扫