Tag: HTML
-
如何去除 html 代码标签之间换行产生的空格
当使用 inline-block 时，HTML 元素之间的空白会显示在页面上，为了保持代码的美观，不建议使用全部写在一行内或者影响美观的方法。 推荐方法：在父元素上设置 font-size: 0; 例子： 效果预览： 修改后代码： 效果预览：
-
display:inline、block、inline-block 的区别
display:block 就是将元素显示为块级元素. block 元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的 100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li > 是块元素的例子。 display:inline 就是将元素显示为行内元素. inline 元素的特点是： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和 < em > 是 inline 元素的例子。 inline 和 block 可以控制一个元素的行宽高等特性，需要切换的情况如下： 让一个 inline 元素从新行开始； 让块元素和其他元素保持在一行上； 控制 inline 元素的宽度（对导航条特别有用）； 控制 inline 元素的高度； 无须设定宽度即可为一个块元素设定与文字同宽的背景色。 display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 inline-block 的元素特点： 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) 并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari 在 IE 中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发…
-
window 和 screen 的尺寸总结
#尺寸总结 window 和 screen 相关 window 兼容性，这四个属性在 IE9 及以上才支持。 ###screen 没有兼容性问题。 ### 元素相关 client-* 没有兼容性问题，各个浏览器表现一致。但是要注意 mac 和 windows 下滚动条策略不同，windows 下默认有滚动条，而 mac 下只有滚动时才有滚动条。 offset-* offsetWidth 和 offsetHeight 基本没有什么兼容性问题，而 offsetTop 和 offsetLeft 在不同浏览器下的表现不太一样。但是测试了新的 chrome、fireFox 是一样的，都是上面所说的规则。 scroll-* 两个特殊的元素 docmuentElement 和 body 规则：（注意下面的规则对于的宽高是独立的） 规则： 在 fireFox 和 chrome 表现不一致，上面写到的都是 chrome 中的规则。 获取视口大小的兼容性写法 本来按上面写的 document.documentElement.clientWidth 才是正确的，这么做主要是为了兼容低版本浏览器或者没有加 doctype 的一些情况： Event 的五个坐标
-
网页上生成报表模块的功能
这个功能实在 b2cube 项目的 app/c/report.php 文件里面 这里的功能算是相当的复杂，自己以前都没有做过的。 还有这个在后台的配置的功能选项。（其实我觉得这两个功能是相互关系的，配置决定表单界面的生成结果） 我的任务就是在 vc800 项目当中整合 “基金” 和 “配置” 两个项目，关键性的功能放进 vc800 里面。
-
懒惰（但聪明地）载入内容
看了下面这一行的 jQuery 代码，明白动态地加载是怎么样做的。 还有进步的空间，可以将图像设定成只显示于指定屏幕，令脚本取决于分辨率。再如，若要限制脚本在小屏上加载，可在脚本上加入简单的分辨率测试。 在 JavaScript 里，开头的 if 陈述等同于媒体查询的 min-width:480px，若屏幕窄于 480px，内附的 JavaScript 就不会失效了。 这个方法还可以精炼。例如，可用轻型的 JavaScript 载入器 LabJS（http://labjs.com）或者 HeadJS（http://headjs.com）, 动态地加载 jQuery、走马灯插件和 custom.js。或者，可以在分辨率高于某个数值时才载入 JavaScript。