22.仿传智播客导航栏案例（精灵图案例）

最新推荐文章于 2023-04-25 00:25:47 发布

neilro

最新推荐文章于 2023-04-25 00:25:47 发布

阅读量1k

点赞数 2

分类专栏： Div+Css 文章标签：精灵图

本文链接：https://blog.csdn.net/neilro/article/details/79245866

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

效果：

素材：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body,ul,li{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		.nav{
			background: #000;
			height: 48px;
			margin-top: 100px;
		}
		.nav-con{
			margin:0 auto;
			width: 1182px;
			height: 48px;
			position: relative;
			
		}
		.nav-con ul li{
			float: left;
		}
		.nav-con ul li a{
			text-decoration: none;
			color: #fff;
			display: inline-block;
			height: 48px;
			font:16px/48px microsoft yahei;
			padding:0 13px;
		}
		.nav-con ul li a:hover{
			background: #3A92D0;
		}
		.hot{
			width:31px;
			height:21px;
			background: url("images/sprite.png") -57px 0;
			position: absolute;
			left:246px;
			bottom:34px;

		}
		.new{
			width:31px;
			height:21px;
			background: url("images/sprite.png") -135px 0;
			position: absolute;
			left:636px;
			bottom:34px;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="nav-con">
		<div class="hot"></div>
		<div class="new"></div>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">Java</a></li>
				<li><a href="#">UI设计</a></li>
				<li><a href="#">前端与移动开发</a></li>
				<li><a href="#">问答专区</a></li>
				<li><a href="#">iOS</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">C/C++</a></li>
				<li><a href="#">python</a></li>
				<li><a href="#">网络营销</a></li>
				<li><a href="#">活动专区</a></li>
			</ul>
			
		</div>
	</div>
</body>
</html>

neilro

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
22.仿传智播客导航栏案例（精灵图案例）

效果：素材：代码： Document body,ul,li{ margin: 0; padding: 0; } li{ list-style: none; } .nav{ background: #000; height: 48px; margin-top: 100px; } .nav-con
复制链接

扫一扫