CSS样式网页导航条

最新推荐文章于 2023-12-24 02:19:38 发布

Solo_two

最新推荐文章于 2023-12-24 02:19:38 发布

阅读量1.7k

点赞数 2

分类专栏： android学习之路 HTML5 学习笔记文章标签： html html5 css 导航

本文链接：https://blog.csdn.net/Solo_two/article/details/51442699

版权

android学习之路同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

HTML5 学习笔记

13 篇文章 0 订阅

订阅专栏

1、图片素材：

2、实现代码：

</pre><p><pre name="code" class="html"><!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>导航栏</title>
		<style type="text/css">
			li {
				list-style: none;
				float: left;
				font-size: 14px;
				text-align: center;
			}
			
			a:link,
			a:visited {
				display: block;
				width: 84px;
				font-weight: bold;
				color: black;
				text-align: center;
				text-decoration: none;
			}
			
			a:hover,a:active{
				background:url(img/nav_bg.gif);
				width: 84px;
				height: 26px;
				position: relative;
				line-height: 28px;
				text-align: center;
				font-size: 14px;
				letter-spacing: 3px;/*字符间距*/
				margin-top: -7px;
				/*z-index: -1;*/
			}
			
			.bg {
				margin-left: 100px;
				color: #F8A046;
				font-size: 18px;
				font-weight: bold;
				background-image: url(img/h_bg.jpg);
				background-repeat: no-repeat;
				width: 1200px;
				height: 150px;
				white-space: nowrap;
				background-position: -20px 1px;
			}
			
			ul {
				padding-top: 104px;
				padding-left: 2px;
			}
		</style>

	</head>

	<body>
		<div class="bg">
			<ul>
				<li><a href="">首  页</a></li>
				<li><a href="">家用电器</a></li>
				<li><a href="">手机数码</a></li>
				<li><a href="">日用百货</a></li>
				<li><a href="">书  籍</li>
				<li><a href="">帮助中心</li>
				<li><a href="">免费开店</li>
				<li><a href="">全球资讯</li>
				
			</ul>
		</div>
	</body>
</html>

3、实现效果：

Solo_two

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS样式网页导航条

1、图片素材：2、实现代码：导航栏 li { list-style: none; float: left; font-size: 14px; text-align: center; } a:link, a:visited { display: block;
复制链接

扫一扫