仿拉手菜单

最新推荐文章于 2021-05-26 18:27:57 发布

崔国瑞

最新推荐文章于 2021-05-26 18:27:57 发布

阅读量420

点赞数

分类专栏： div+css 文章标签： div+css菜单拉手菜单

本文链接：https://blog.csdn.net/yulin_xp/article/details/8455352

版权

div+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
  body{margin:0px;padding:0px;}
  .nav {width: 949px;margin: 0px auto;height: 38px;padding-left: 0px;}
	.nav-wrap,.nav a,.nav a:hover,.nav a:hover span,.nav a.current,.nav a.current span,.nav a.current:hover,.nav a.current:hover span{background:url(images/header-year.png) no-repeat;}
	.hdt-wrap{background-repeat:repeat-x;}
	.nav-wrap{background-color:#B80100;background-position:0 -105px;background-repeat:repeat-x;}
	.nav a{background-position:right -361px;}
	.nav a{color: #fff;padding-right: 17px;height: 38px;width: auto;display: block;float: left;font: bold 14px/38px 宋体;background-position: right -361px;position: relative;}
	.nav a:hover{background-position:right -181px;}
	.nav a:hover span{background-position:left -181px;}
	.nav a.current{background-position:right -219px;margin: 0px 2px 0px -2px;}
	.nav a.current span{background-position:left -219px;}
	.nav a.current:hover{background-position:right -219px;}
	.nav a.current:hover span{background-position:left -219px;}
a {
    text-decoration: none;
}
.nav a span {
    display: inline-block;
    padding-left: 15px;
    cursor: pointer;
}
  </style>
 </HEAD>

 <BODY>
 <div class="nav-wrap">
		<div class="nav">
			<a href="#" class="current"><span>团购</span></a>
			<a href="#" class="lashou"><span>身边团购</span></a>
			<a href="#"><span>今日新单</span></a>
			<a href="#"><span>拉手商城</span></a>
			<a href="#"><span>限时特卖</span></a>
			<a href="#"><span>电影订座</span></a>
			<a href="#"><span>电影KTV</span></a>
			<a href="#"><span>酒店旅游</span></a>
		</div>
	</div>
 </BODY>
</HTML>

预览图：

用到的素材

崔国瑞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿拉手菜单

New Document body{margin:0px;padding:0px;} .nav {width: 949px;margin: 0px auto;height: 38px;padding-left: 0px;} .nav-wrap,.nav a,.nav a:hover,.nav a:hover span,.nav a.current,.nav
复制链接

扫一扫