CSS的滑动门技术

最新推荐文章于 2024-04-13 19:50:27 发布

xiao____ming

最新推荐文章于 2024-04-13 19:50:27 发布

阅读量1.3k

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/xiao____ming/article/details/108719957

版权

在制作导航栏等网页元素时，常常需要为其设置特殊形状的背景，为了使各种特殊形状的背景能够自适应元素中文本的多少，即实现自由拉伸滑动，就出现了CSS滑动门技术。
微信的导航栏：
在这里插入图片描述
滑动门简单使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  a {
   display: inline-block;
   height: 33px;
   line-height: 33px;
   background: url(to.png) no-repeat;
   margin: 100px;
   padding-left: 15px;
   color: #fff;
  }

  a span {
   display: inline-block;
   height: 33px;
   /*一定注意 span 需要背景图片 右对齐*/
   background: url(to.png) no-repeat right top;
   padding-right: 15px;
  }
  a:hover {
  	background: url(ao.png);
  }
  a:hover span {
  	background: url(ao.png);
  }
 </style>
</head>
<body>
 <a href="#">
  <span>首页</span>
 </a>
 <a href="#">
  <span>公司新闻</span>
 </a>
</body>
</html>

这里有几个注意点：
1、因为整个导航栏都是链接所以 a 要包含 span；
2、a 是设置左侧背景（左门），span 是设置右侧背景（右门）；
3、因为我们是滑动门，要实现左右推拉，跟文字内容多少有关系，所以此处只给盒子设置背景图片的高度，不给宽度，并将 a 转换为行内块，然后为盒子设置左右 padding 避免文字压住边缘。
4、想要在鼠标悬停时改变背景图，只需要在a:hover 中更改背景图即可。

xiao____ming

关注

1
点赞
踩
3

收藏

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

在制作导航栏等网页元素时，常常需要为其设置特殊形状的背景，为了使各种特殊形状的背景能够自适应元素中文本的多少，即实现自由拉伸滑动，就出现了CSS滑动门技术。微信的导航栏：滑动门简单使用：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> a { display
复制链接

扫一扫