CSS滑动门技术

最新推荐文章于 2023-04-17 22:18:39 发布

缘起性本空

最新推荐文章于 2023-04-17 22:18:39 发布

阅读量123

点赞数

分类专栏： IT相关文章标签： html

本文链接：https://blog.csdn.net/r77683962/article/details/121219162

版权

IT相关专栏收录该内容

107 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS滑动门技术</title>
<style type="text/css">
body,ul,li{ padding:0; margin:0 ; list-style:none;}

.all{
width:1200px;
margin:20px auto;
height:56px;
line-height:56px;
}

.all li{ float:left; }

.all a, span{
display:inline-block;
height:56px;
float:left; /*设置li中的3个盒子左浮动*/
}

.one{
width:22px;
background:url(images/left.png); /*定义左圆角背景图像*/
}

.two{
width:22px;
background:url(images/right.png); /*定义右圆角背景图像*/
}

.all a
{
color:yellow;
background:url(images/middle.png) repeat-x; /*定义中间的渐变背景*/
text-shadow:3px -3px 5px red;
}

.all a:hover
{
color:white;
background:url(images/middle.png) repeat-x; /*定义中间的渐变背景*/
}
</style>
</head>
<body>
<ul class="all">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">公司产品</a>
</li>
<li>
<a href="#">就业指导信息</a>
</li>
<li>
<a href="#">留言簿</a>
</li>
<li>
<a href="#">添加友情链接</a>
</li>
</ul>
</body>
</html>

缘起性本空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS滑动门技术

<!doctype html><html> <head> <meta charset="utf-8"> <title>CSS滑动门技术</title> <style type="text/css"> body,ul,li{ padding:0; margin:0 ; list-style:none;} ...
复制链接

扫一扫