训练营 坚持完成打卡任务 报名费全额返 更多>>
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
搜索
历史记录 清除记录
- 你还没搜索过喔。
点击刷新
图像拼合
<!DOCTYPE html>
<html>
<head>
<style>
img.home {
width: 46px;
height: 44px;
background: url(/statics/images/course/img_navsprites.gif) 0 0;
}
img.next {
width: 43px;
height: 44px;
background: url(/statics/images/course/img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img class="home" src="/statics/images/course/img_trans.gif"><br><br>
<img class="next" src="/statics/images/course/img_trans.gif">
</body>
</html>
图像拼合-导航列表
<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('/statics/images/course/img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('/statics/images/course/img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('/statics/images/course/img_navsprites.gif') -91px 0;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="https://www.lmonkey.com/"></a></li>
<li id="prev"><a href="https://www.lmonkey.com/"></a></li>
<li id="next"><a href="https://www.lmonkey.com/"></a></li>
</ul>
</body>
</html>
悬停效果与图像拼合
<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('/statics/images/course/img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') 0 -45px;}
#prev{left:63px;width:43px;}
#prev{background:url('/statics/images/course/img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') -47px -45px;}
#next{left:129px;width:43px;}
#next{background:url('/statics/images/course/img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('/statics/images/course/img_navsprites_hover.gif') -91px -45px;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
© 著作权归作者所有
举报
综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论
发表评价或提出疑问（可获得2-8个猿宝）
文章评分：
请选择内容评分
难易程度：
太简单
简单
适中
有点难
太难了
请选择课程难易程度 (+2个猿宝)