导航条的制作详解

最新推荐文章于 2024-04-14 12:10:13 发布

小贾爱编程

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量554

点赞数

分类专栏： .NET 文章标签：导航条制作

本文链接：https://blog.csdn.net/qq_37589387/article/details/88749049

版权

.NET 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

css文件编码：

body{font-size:6px;}

#globallink{width:800px;height:33px;background-image: url(../img/navbg.png);}
#globallink ul{list-style: none;padding:0px;margin:0px;}

#globallink li{float:left;width:70px;text-align:center;}
#globallink a{display:block;padding:8px 6px 10px 7px;margin:0px;}
#globallink a:link,#globallink a:visited{color:white;text-decoration: none;}
#globallink a:hover{color:aquamarine;text-decoration:underline;}

HTML调用CSS样式表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单导航条的制作</title>
		<link href="css/导航条的制作.css " rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="globallink">
			<ul>
				<li><a href="#">读书首页</a></li>
				<li><a href="#">作品总库</a></li>
				<li><a href="#">VIP作品</a></li>
				<li><a href="#">完成作品</a></li>
				<li><a href="#">编辑推荐</a></li>
				<li><a href="#">精华作品</a></li>
				<li><a href="#">排行榜</a></li>
				<li><a href="#">出版基地</a></li>
				<li><a href="#">出版展示</a></li>
			</ul>
		</div>
	</body>
</html>

小贾爱编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
导航条的制作详解

css文件编码：body{font-size:6px;}#globallink{width:800px;height:33px;background-image: url(../img/navbg.png);}#globallink ul{list-style: none;padding:0px;margin:0px;}#globallink li{float:left;width...
复制链接

扫一扫