课程 \
按钮特效
4-2 编程挑战
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}
li { float: left;display:block; height:27px;color:#21530C;}
li a{
text-decoration:none;
display:block;
color:#21530C;
line-height:27px;
padding:0 10px;
}
li a:hover{
background:#21530C;
color:#fff;
border-radius:3px 3px 0 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="ac"><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>
</body>
</html>
2018-11-04
查看完整代码
3-3 编程练习
<!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>
input{ width:120px; height:40px; border:none; background:url(http://img1.sycdn.imooc.com/538584af0001ba6301000040.jpg)}
a{ display:inline-block; height:40px; line-height:40px; text-decoration:none; background:url(http://img1.sycdn.imooc.com/53857edf00012c6403000160.jpg); padding-left:15px; }
a:hover{ background-position:0 -80px}
a span{ display:inline-block; height:40px; color:#fff; background:url(http://img1.sycdn.imooc.com/53857edf00012c6403000160.jpg) right -40px; padding-right:15px}
a span:hover{ background-position:right -120px}
</style>
</head>
<body>
<input type="button" value="按钮" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<br />
<br />
<a href="javascript:;"><span>按钮按钮按钮按钮按钮按钮</span></a>
</body>
</html>
2018-11-04
查看完整代码