简单滑动门效果

最新推荐文章于 2024-10-17 15:53:46 发布

wujf1986630

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量318

点赞数

分类专栏： css 文章标签： url xhtml float html 文档

本文链接：https://blog.csdn.net/wujf1986630/article/details/6640286

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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:0px;padding:0px;}
ul{background:url(13.gif) 0px bottom;height:31px;}
li{float:left;list-style:none;margin-left:8px;display:inline;line-height:28px;}
a{float:left;display:block;height:28px;padding-left:18px;background:url(13.gif) left -28px no-repeat;text-decoration:none;color:#f27602;}
a span{display:block;padding-right:18px;background:url(13.gif) right -28px no-repeat;}
a:hover{background:url(13.gif) left 0px no-repeat;color:#fff;}
a:hover span{background:url(13.gif) right 0px no-repeat;}
</style>
</head>

<body>
<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>网页版式布局</span></a></li>

</ul>
</body>
</html>