CSS的滑动门技术

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


<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>Documenttitle>
 <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 中更改背景图即可。

你可能感兴趣的:(html5,css3)