08_03导航圆角背景应用

最新推荐文章于 2025-12-23 21:31:13 发布

原创最新推荐文章于 2025-12-23 21:31:13 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

XHTML+CSS 专栏收录该内容

42 篇文章

订阅专栏

本文提供了一个从基础到高级的技术导航，涵盖了前端开发、后端开发、游戏开发、大数据开发等多个领域的关键技术和工具，同时深入探讨了AI音视频处理、自然语言处理、区块链等前沿技术。通过详细的介绍和实例，帮助读者全面了解和掌握信息技术领域的核心知识。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
body, ul {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
}
body {
	background-color: #23232f;
	padding: 20px;
}
.nav {
	background: #0f0f14 url(img/navL.png) no-repeat;
	float: left;
}
.nav .navR {
	background: url(img/navR.png) no-repeat right 0;
	float: left;
	padding: 4px 4px 0 3px;
}
.nav .navR li {
	float: left;
	padding-left: 1px;
}
.nav .navR li a {
	float: left;
	background: url(img/btnM.png) no-repeat;
}
.nav .navR li a span {
	float: left;
	background: url(img/btnR.png) no-repeat right 0;
	height: 31px;
	font-size: 14px;
	line-height: 30px;
	padding: 0 18px;
	color: #fff;
}
/*默认选中样式*/
.nav .navR li a:hover, .nav .navR li a.active {
	background: url(img/hoverL.png) no-repeat;
}
.nav .navR li a:hover span, .nav .navR li a.active span {
	background: url(img/hoverR.png) no-repeat right 0;
}
</style>
<body>
<div class="nav">
<ul class="navR">
  <li><a href="#" class="active"><span>主页</span></a></li>
  <li><a href="#"><span>博客</span></a></li>
  <li><a href="#"><span>关于</span></a></li>
</ul>
</body>
</html>