自己学习韩顺平的【可爱屋】 导航条 部分，求助一下下O(∩_∩)O
css吧
全部回复
仅看楼主
level 5
专注弹力球 楼主
【原版实例】：
【我做出来的烂样子】
背景图片根本位置压根儿不对。。。。[惊哭][汗]
【以下是我写的代码】：
HTML文件：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>图片动态按钮</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="navi">
<ul>
<li><a href="#"><span>首页<span></a></li>
<li><a href="#"><span>金饰<span></a></li>
<li><a href="#"><span>钻石<span></a></li>
<li><a href="#"><span>925银饰<span></a></li>
<li><a href="#"><span>流行饰品<span></a></li>
<li><a href="#"><span>珍珠<span></a></li>
<li><a href="#"><span>品牌专卖<span></a></li>
<li><a href="#"><span>订制<span></a></li>
<li><a href="#"><span>优惠券<span></a></li>
</ul><div>
</body>
</html>
CSS文件：
*{
font-size: 12px;
margin: 0;
padding: 0;
border: 0;
}
#navi{
width:770px;
float:left;
margin-top:2px;
margin-left:6px;
text-align:center;
}
#navi a span{
font-size:14px;
font-weight:bold;
color:#666666;
display:block;
background:url(*nav_bg_right.gif*);
padding-top:10px;
padding-bottom:10px;
}
#navi a:hover span{
background-position: 100% -50%;
}
#navi a:link{
text-decoration:none;
}
#navi li{
list-style-type:none;
float:left;
margin-left:1px;
width:84px;
}
2014年08月21日 11点08分 1
level 5
专注弹力球 楼主
我写的代码都是韩顺平视频里写的，里面所有CSS选择器里写的项目都是照着抄写的，不多不少，咋滴？？难道电脑玩我？？[汗]
2014年08月21日 12点08分 2
level 13
程式猎人☞
换换浏览器试试
2014年08月21日 14点08分 3
专注弹力球
火狐浏览器也这幅德行啊。。。
2014年08月21日 21点08分
level 2
超1399761616
用的是i.e. 6？！
2014年08月21日 16点08分 4
专注弹力球
IE11
2014年08月21日 21点08分
level 5
专注弹力球 楼主
注入防沉补丁！[酷]
2014年08月22日 09点08分 5
level 1
qq137194
话说栏目不是用ul做么
2014年08月22日 15点08分 6
level 11
沉睡的老狐狸
a下面的span的高和行高没定，再就是鼠标划过hover的样子呢？不行就那内间距顶！
2014年08月22日 16点08分 7
level 1
修卡鲁
html文件
<div id="nav">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>金饰</span></a></li>
<li><a href="#"><span>钻石</span></a></li>
<li><a href="#"><span>925银饰</span></a></li>
<li><a href="#"><span>流行饰品</span></a></li>
<li><a href="#"><span>珍珠</span></a></li>
<li><a href="#"><span>品牌专卖</span></a></li>
<li><a href="#"><span>订制</span></a></li>
<li><a href="#"><span class="last">优惠券</span></a></li>
</ul>
</div><!-- #nav -->
2014年09月09日 03点09分 8
level 1
修卡鲁
CSS文件：
* {
color: #666;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
}
#nav {
width:770px;
margin:0 auto;
}
#nav li {
display:inline;
list-style-type: none;
}
#nav a {
font-size:14px;
font-weight: bold;
color:#666;
background:url(../img/nav_bg_left.gif) no-repeat;
padding-left:4px;
float: left;
border-bottom:1px solid #666;
}
#nav a span {
display:block;
padding:13px 22px 9px 18px;
background: url(../img/nav_bg_right.gif) no-repeat right top;
}
#nav .last {
padding:13px 24px 9px 20px;
border-right: 1px solid #666;
}
#nav a:hover {
background-position: 0 -50px;
}
#nav a:hover span {
color:#C39;
background-position: 100% -50px;
padding-top: 14px;
padding-bottom:8px;
}
2014年09月09日 03点09分 9
level 1
格林第二季
html中的span，div没封口
css中的position 重定位y轴要用px；
2018年03月09日 09点03分 11
level 1
夜深呤曲
楼主 你还有可爱屋的图片素材么？
2018年07月13日 14点07分 12
level 1
千里走单骑andy
楼主 你还有可爱屋的图片素材么？
2018年08月26日 13点08分 13
1