随笔分类 -  CSS

使用CSS3和jQuery可伸缩的搜索条
摘要：搜索条在我们网站是必不可少的，尤其是在有限的页面空间里，放置一个重要的搜索条是个难题，今天我将结合实例给大家介绍一下如何使用CSS3和jQuery来实现一个可伸缩功能的搜索条。 HTML 在需要放置搜索条的页面中放置如下html代码，搜索条#search_bar包含一个form#myform表单，表 阅读全文
posted @ 2017-05-25 08:59 reaf 阅读(461) 评论(0) 推荐(0)
开发备必：WEB前端开发规范文档
摘要：为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分 阅读全文
posted @ 2017-05-24 09:32 reaf 阅读(276) 评论(0) 推荐(0)
响应式web网站设计制作方法
摘要：在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，希望可以和大家一起讨论。总结下来，响应式比之前想象的要复杂得多。 1. ie9以下（不包括ie9）采用ie条件注释，为ie8以及一下单独开一个样式文件 2. 一个模块的mq样式整体放在这个模块的样式的之后，符合层叠逻辑，也同时以免被层叠。 3. 阅读全文
posted @ 2016-09-06 23:39 reaf 阅读(1840) 评论(0) 推荐(0)
认识：before和：after伪类
摘要：有时候，我们需要大量的重复代码去实现一个非常简单的功能，这不仅浪费时间，而且效率低下，例如： <div class="aa">你好</div><div class="aa">我好</div><div class="aa">大家好</div><div class="aa">前面和后面</div> 我们 阅读全文
posted @ 2016-08-31 21:57 reaf 阅读(539) 评论(0) 推荐(0)
运动的border，仿当当简易效果
摘要：突然想到以前看到当当上有个效果，当鼠标移上去，图片边框是运动添加上的，还以为是css3或者是canvas做的呢，做完幽灵按钮后，才知道，so easy,只不过是animate+position的杰作。附上代码 当然，其他的你想要的样式，不妨举一反三做一下，也很简单，只是个运动而已 阅读全文
posted @ 2016-08-31 14:40 reaf 阅读(336) 评论(0) 推荐(0)
幽灵按钮实例
摘要：幽灵按钮，听名字有点不解？无碍，简单的来说就是一个按钮，移上去背景动一下，然后弹出个提示框，提示框在按钮的正上方而且居中，按钮上方有个图片，移上去有旋转360deg效果。不多说了，还是附上代码吧。由于采用了css3属性，所以，只兼容高级浏览器 主要知识点：transformtransitionbox 阅读全文
posted @ 2016-08-31 14:34 reaf 阅读(926) 评论(0) 推荐(0)
固定标题和左侧栏的表格初试
摘要：记得曾经做过一个公交查询系统的二期开发，其中一个模块要求固定标题和左侧栏，当时不知道是哪根筋抽了，一门心思想着position：fixed；在margin：0；padding0；还是可以用的，但是当margin和padding改变值以后就不能用了，以至于弄了一天都没弄出个啥，好在当时要求不高，还是勉 阅读全文
posted @ 2016-08-27 01:24 reaf 阅读(596) 评论(0) 推荐(0)
z-index和transform,你真的了解吗？
摘要：z-index和transform是CSS中的属性，但很少同学将二者联系到一起，感觉他们八杆子打不上。事实真的是这样吗？如果你也不能确认，这篇文章就值得你花点时间阅读。因为阅读完了，你会有所收获的。 堆叠上下文(Stacking Context) 在开始今天的主题之前，先得回忆一下CSS中的Stac 阅读全文
posted @ 2016-08-19 19:13 reaf 阅读(11498) 评论(0) 推荐(3)