div+css 08 使用div css 滑动门技术 编写 好看实用的按钮

2009-10-27  分类：DIV+CSS 标签:  作者:fanzg


今天不说 布局问题了， 做一个很好看又实用的东西， 看看效果吧。

就是这样的一个 搜索 效果页面， 如果你觉得 其实就是一张搜索 图片

那就错了。背景的确是一张图片， 再结合 css 中的 滑动门 技术

让鼠标点击过去 就感觉 更换了图片那样，其实 只有一张图片

只是背景图片改变了位置而已。。。

这是网页制作上 很经常用到的， 就说道这里 ，现在 开始 编写 div 和 css 来实现吧！

=================

开始还是老样子， 先编写一个 搜索的div框。。

#search {
 width: 200px;
 height: 40px;
 border: 2px solid #eee;
}

不用太精确， 有一个大概的 div 框架出来先 ， 宽度 高度 可以慢慢 调整

下面 开始加入 搜索链接

<div id="search">
 <a href="#">搜 索</a>
</div>

开始加入 背景图片了。

#search a {
 background: url('back.gif') no-repeat 0 0;
}

这个就是 让 刚才连接使用 back.gif 这个背景图片。no-repeat 0 0;  不移动图片

line-height: 34px; 让文字 垂直居中。

那水平居中呢 ？

text-align: center; 这个用得比较多。

=========================

 width: 75px;
 height: 34px;
 display: inline-block;

这里要注意的就是   display: inline-block;  以块状来显示，不然

即使设置了 宽度 高度， 显示出来的大小还是 不会改变的。

现在效果 有点出来了 呵呵， 我们现在才来修改 刚才div search 的高度吧。

再改变一下 字体颜色 和 大小。

大小 font-size: 16px;
粗体 font-weight: bold;

颜色：  color: #ffffff;  这里 #ffffff 也可以写成 #fff

再去掉 下横线  text-decoration: none;

效果 就出来， 但是 现在 鼠标 移动过去 没有任何 反应的。

===============================
好，现在加入 鼠标效果。

#search a:hover {
 background-position: 0 -34px;
}

这就是重点， 这个大概就是这样的， 我说一下

本来 背景图片 是有2种颜色的， 当鼠标移动到按钮上面时候

就移动背景图片， 显示下面比较浅色的部分。。。这就是滑动门技术吧。呵呵

好，现在 在 Firefox 3.5.3 版本下 也是 正常显示出来的。
===========================================
最后 加入一个 文本输入框吧

再把 input 文本框 用 css 简单定义一下。。。因为这不是我们的重点。。

刚才按钮的效果才是 我们重点。

现在 出现 文本框 和 按钮 不对齐。。主要是 文本框 靠上边去了，

需要加入  vertical-align: middle;

这个 css 语句 是 让文本框 在垂直上 处于中间的位置。

最后别 忘记 去掉 开始我们定义的 div 边框。。

好， 这样就出来了， 字体有点不居中， 加入  line-height: 25px;

完美。。。呵呵， 希望大家喜欢吧。

演示就到这里， 是不是很简单就出来了 呵呵。。。  8


“div+css 08 使用div css 滑动门技术 编写 好看实用的按钮”没有评论

有任何疑问或建议，可以给作者留言：



公告：

  • 2010年5月之前的视频是文字解说演示，没有声音。
  • 2010年5月以后的视频全部带声音。

标签