随笔分类 -  HTML

使用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)
HTML5应用之时钟
摘要：利用HTML5的Canvas API可以完成我们以前意想不到的动画效果，以前我们想在网页上放置一个时钟，需要先用flash工具制作一个钟表，并写上复杂的ActionScript代码，然后载入到页面中。而HTML5的到来，我们可以直接在页面中使用canvas标签并配合javascript就可以完成一个 阅读全文
posted @ 2017-05-24 09:19 reaf 阅读(468) 评论(0) 推荐(0)
H5各种头部meta标签功能大全
摘要：<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 <meta http-equiv=”X-UA-Compatible” co 阅读全文
posted @ 2017-04-18 17:22 reaf 阅读(16151) 评论(0) 推荐(0)
javascript无缝滚动
摘要：无缝滚动好像是互联网广告最大的一个载体，可以用“无处不在”来形容它。不过它比起早期的闪光字体，浮动广告算进步了。由于需求巨大，做前台迟早会遇到它。我先给出结构层部分，再慢慢讲解其实现原理。 <dl id="marquee"> <dt> <img src="http://images.cnblogs. 阅读全文
posted @ 2016-09-07 22:55 reaf 阅读(415) 评论(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)