码迷,mamicode.com
首页 > 其他好文 > 详细

用图片做导航栏

时间:2017-08-20 18:25:27      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:导航   intro   over   com   href   base   htm   shang   hang   

					<ul class="index-nav">
						<li id="myimg1">
							<a href="index.html">
								<div></div>
							</a>
						</li>
						<li id="myimg2">
							<a href="breadintro.html">
								<div></div>
							</a>
						</li>
						<li id="myimg3">
							<a href="dishes.html">
								<div></div>
							</a>
						</li>
						<li id="myimg4">
							<a href="probase.html">
								<div></div>
							</a>
						</li>
						<li id="myimg5">
							<a href="join.html">
								<div></div>
							</a>
						</li>
						<li id="myimg6">
							<a href="stores.html">
								<div></div>
							</a>
						</li>
						<li id="myimg7-hover">
							<a href="contact.html">
								<div></div>
							</a>
						</li>
					</ul>

  

#myimg1 a div {
	background: url(../images/common/shouye.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg1:hover a div {
	background: url(../images/common/shouye-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg2 a div {
	background: url(../images/common/pinpai.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg2:hover a div,
#myimg2-hover a div {
	background: url(../images/common/pinpai-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg3 a div {
	background: url(../images/common/tese.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg3:hover a div,
#myimg3-hover a div {
	background: url(../images/common/tese-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg4 a div {
	background: url(../images/common/shengchan.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg4:hover a div,
#myimg4-hover a div {
	background: url(../images/common/shengchan-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg5 a div {
	background: url(../images/common/zhaoshang.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg5:hover a div,
#myimg5-hover a div {
	background: url(../images/common/zhaoshang-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg6 a div {
	background: url(../images/common/qixia.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg6:hover a div,
#myimg6-hover a div {
	background: url(../images/common/qixia-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg7 a div {
	background: url(../images/common/lianxi.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg7:hover a div,
#myimg7-hover a div {
	background: url(../images/common/lianxi-1.png) 0 0 no-repeat;
	background-size: cover;
}

  

用图片做导航栏

标签:导航   intro   over   com   href   base   htm   shang   hang   

原文地址:http://www.cnblogs.com/candy-Yao/p/7400464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!