总结里的作业，求大神们公布答案，搞了半天，只能勉强做出一个看上去像的，感觉写的满不合理及美观的，求解答！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<style type="text/css">
    *{margin:0;padding:0}
	ul{list-style:none;background:url(%E8%83%8C%E6%99%AF%E7%81%B0%E8%89%B2.png);width:600px;height:40px;font:"微软雅黑";font-size:20px;}
	a{
		text-decoration:none;
		dislay:block;
		float:left;
		width:200px;
		height:40px;
		line-height:40px;
		color:#FFF;
		text-indent:20px;
		}	
	span{font-size:30px;}
		
	#a1:hover{background:url(%E8%83%8C%E6%99%AF.png)}
    #a2:hover{background:url(%E8%83%8C%E6%99%AF.png) -200px 0;margin-left:-20px}
	#a3:hover{background:url(%E8%83%8C%E6%99%AF.png) -200px 0;margin-left:-30px}
    </style>
</head>

<body>
<div>
<ul>
<li><a href="#" id="a1"><span>1</span>STEP1</a></li>
<li><a href="#" id="a2" class="on"><span>2</span>STEP2</a></li>
<li><a href="#" id="a3"><span>3</span>STEP3</a></li>
</ul>
</div>
</body>
</html>

狗宝

2015-09-09

源自：导航条菜单的制作 6-1

关注问题我要回答

1148

操作

收起

3 回答

飞鸟的护佑回答被采纳 +3 积分
2017-04-28

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 默认样式清除 设置基本样式 */
* {
margin: 0;
padding: 0;
}

.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after {clear:both;}
.clearfix{
   *zoom:1;/*IE/7/6*/
}

html {
font-size: 62.5%;
}

body {
font-size: 1.6rem;
font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1;
}

ul li {
list-style: none;
}

a {
text-decoration: none;
color: #5e5e5e;
}

/* 效果样式 */
.wrap {
width: 800px;
margin: 10% auto;
}

.nav li {
float: left;
}

.nav a {
font-size: 3rem;
color: #fff;


display: block;
width: 150px;
padding: 10px;
background-color: #3e3e3e;

position: relative;
}

.nav a small {
font-size: 1.5rem;
text-transform: uppercase;
vertical-align: 30%;
}

.nav a:after {
content: "";
position: absolute;
right: -25px;
z-index: 9;
margin-top: -10px;

border-left:solid 25px #3e3e3e;
  border-top:solid 25px rgba(0,0,0,0);
  border-bottom:solid 25px rgba(0,0,0,0);
}

.nav li + li > a {
padding-left: 30px;
}

.nav li a:hover {
background-color: #FFB90F;
}

.nav li a:hover::after {
border-left:solid 25px #FFB90F;
}

</style>
</head>
<body>
<div class="wrap">
<ul class="nav clearfix">
<li><a href="#">1 <small>step1</small></a></li>
<li><a href="#">2 <small>step2</small></a></li>
<li><a href="#">3 <small>step3</small></a></li>
</ul>
</div>
</body>
</html>