网站上的常驻条
2015-12-28 10:40
423 查看
很多网站都会有一个常驻条,上面写的二维码,qq,电话,回到顶部,鼠标滑动上去会有提示,看起来可酷炫了,其实我们小虾米也会做的就看谁更会用学到的知识
第一点,集成性:我们要将其写成ul li a结构,这样在滑动时很多效果其实是可以只写一个,都运用的到
第二点,灵活性:我们将图片初始设为a链接的背景图片,hover时,增加js控制效果
第三点,开始内容:
<div class="float-block">
<ul>
<li><a href="javascript:void(0)">二维码</a></li>
<li >
<a href="#">在线咨询</a>
</li>
<li class="">
<a class="tel_bg fs-12" href="javascript:void(0)">客服</a>
</li>
<li class="totop">
<a class="totop_bg fs-12" href="javascript:void(0)"> TOP</a>
</li>
</ul>
<div class="erweima"><img src=".png"/><i class="sanjiao"></i></div>
<div class="tel-400">010—60678582<i class="sanjiao"></i></div>
</div>
图片设为背景,样式位置居中,文字高度为0;
当鼠标hover时,增加一个样式,图片位置靠上15px,这时文字的位置也有了显示文字,当hover时设置文字的高度是25px
其实并没有想象中的那么难,是吧!小伙伴们都学起来吧,样式你们看需要来,我只提供思路
第一点,集成性:我们要将其写成ul li a结构,这样在滑动时很多效果其实是可以只写一个,都运用的到
第二点,灵活性:我们将图片初始设为a链接的背景图片,hover时,增加js控制效果
第三点,开始内容:
<div class="float-block">
<ul>
<li><a href="javascript:void(0)">二维码</a></li>
<li >
<a href="#">在线咨询</a>
</li>
<li class="">
<a class="tel_bg fs-12" href="javascript:void(0)">客服</a>
</li>
<li class="totop">
<a class="totop_bg fs-12" href="javascript:void(0)"> TOP</a>
</li>
</ul>
<div class="erweima"><img src=".png"/><i class="sanjiao"></i></div>
<div class="tel-400">010—60678582<i class="sanjiao"></i></div>
</div>
图片设为背景,样式位置居中,文字高度为0;
当鼠标hover时,增加一个样式,图片位置靠上15px,这时文字的位置也有了显示文字,当hover时设置文字的高度是25px
其实并没有想象中的那么难,是吧!小伙伴们都学起来吧,样式你们看需要来,我只提供思路
相关文章推荐
- 读<阿里亿级日活网关通道架构演进>有感
- connect源码分析——基础架构
- 深度解读 - Windows 7核心图形架构细致分析
- 学网站设计有感二
- JAVA抓取网站网页内容
- Master/Slave架构
- Keepalived+mysqlAB高可用
- 建站随笔-互联之家—hulianw.cn
- 如何迁移mycncart网站系统到其他服务器空间
- 移动端webApp滚屏特效、HTML5+CSS3手机整屏滚动 、mobile网站翻页滚屏特效!
- 魅族实时消息推送架构
- 面向服务架构相关概念
- 编译器架构的王者LLVM——(11)深入理解GetElementPtr
- MapReduce整体架构分析
- 架构师于小波:魅族实时消息推送架构
- [转]C#三层架构登陆实例
- 初步掌握HDFS的架构及原理4
- 初步掌握HDFS的架构及原理3
- 数据中心架构部署
- 初步掌握HDFS的架构及原理2