专注WEB前端开发

摘要： 一、 善用css缩写规则 /*注意上、右、下、左的书写顺序*/1. 关于边距（4边）：1px 2px 3px 4px (上、右、下、左)1px 2px 3px （省略的左等于右）1px 2px (省略的上等于下)1px （四边都相同）2. 简化所有：*/ body{margin:0}------------表示网页内所有元素的margin为0#menu{ margin:0}------------表示menu盒子下的所有元素的margin为03. 缩写（border）特定样式：Border:1px solid #ff... 阅读全文

摘要： 1.注意对图片设置宽高和转化为块2.文字超出的设置3.空白部分用空div来设置4.做之前考虑重用,重用部分命名不要和内容相关 尽量公共(comWidth area small big img list txt box line)5.需要复写的地方再加上一个class用后面的class复盖前面的样式6.多个class的运用 fl fr clearFix7.h1-h6不会继承父级样式需要设置大小和字体family8.图片列表左浮动 margin-right时 给最外层DIV固定宽度 overflow:hiden解决掉下来的问题9.li里可以嵌套DIV10. 负margin能解决看起来需要定位的问题 阅读全文

摘要： 转：http://www.gafish.net/archives/1514对前端开发工程师来说，前端性能优化的重要性是不言而喻的，最为大家所知的是YSLOW的23条优化规则，在我的理解中，性能优化不纯粹是指用户访问网站的速度，也包括开发的效率，这里我总结下我理解中的WEB前端性能优化。HTML部分语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；减少DOM节点：加速页面渲染；给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；正确的闭合标签：如避免使用 阅读全文

摘要： 转：http://www.smallni.com/element-nesting/先来看以下这样一段代码： 当然，我是不会告诉你这段代码来自于FACEBOOK的 ，各位认为以上元素的嵌套有没有问题呢？我们会在后面讨论这个。HTML4/XHTML的嵌套规则在我们的印象中会有这样的嵌套规则：内联元素不能嵌套块元素元素和元素不能嵌套块元素那么到底什么是块元素，什么是内联元素？以下是W3CCSS2.1规范中对块元素和内联元素的定义：Block-level elementsare those elements of the source document that are formatted vis.. 阅读全文

摘要： 前段时间得到一个腾讯电话面试的机会，就说说电话面试的内容 跟大家分享下。首先很常规:1说说工作经历 2做过什么项目 3对简历很针对的提问 4CSS考察 5JS考察工作经验我由于工作的关系在项目经验上很匮乏，基本是属于练习阶段，所以项目经验很少，我也实话实说了，然后面试官就说你平时做过那么多练习有没有想过要如何运用到实际的项目中，简历方面 他一再强调不要用精通即使是HTML方面，最好写熟练相隔时间有点长只记得部分css问题：1IE浏览器的几种模式，有什么区别 （这个没有复习，没答上）2常见的IE6BUG3盒模型另外还有几个但都算常规的面试题，就不一一列出来精华我觉得还是JS问题 因为JS方面他提 阅读全文

摘要： XHTML的标签有许多：div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、span、 strong……我们在运用这些标签搭建页面结构的时候，是可以将它们无限嵌套的，但是，嵌套也需要有一定规则，不能任由自己的个人习惯胡乱嵌套—— XHTML 必竟不是 XML。在 XHTML 的语言里，我们都知道：ul 标签包含着 li、dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分明确。但是，还有许多标签是独立的，它们没有被捆绑在一起，比如 h1、div、p……那么这些标签的嵌套规则到底是怎样的？今天就来说说这个话题。提到 XHTML 标签的嵌套规则，我们先得知道有这么 阅读全文

摘要： HTML:CSS:::-webkit-input-placeholder { /* WebKit browsers */ color: #999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999;}:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999;} 阅读全文

摘要： 1、jQuery限制字符字数的方法代码很简单，使用也很方便，如下：$(document).ready(function(){//限制字符个数$(“.zxx_text_overflow”).each(function(){var maxwidth=23;if($(this).text().length>maxwidth){$(this).text($(this).text().substring(0,maxwidth));$(this).html($(this).html()+’…’);}});});所产生的结果是：页面中class为“zxx_text_overflow”的标签内部字符的个 阅读全文

摘要： by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=56一、问题产生的条件对于14像素大小的字体是没有本篇所要探讨的单（复）选框与文字对齐的问题的。（见下图）14像素大小文字与单复选框无对齐的问题但是，对于12像素大小的文字，则就存在对齐问题了，尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。（见下图）12像素文字相对于单复选框位置偏下不对齐这就是本文所要研究与解决的问题。这种不对齐的根本原因我不清楚，但我可以肯定的是单复选框与文字默认以vertical-al 阅读全文

摘要： by zhangxinxu fromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=48引言：margin为css中非常常用的一个属性，其所包含的内容也是很多的。本文主要分三部分对margin做一些分析叙述，包括其属性，使用过程中会遇到的问题，以及一些高级应用等。对于JavaScript与margin的控制表达这里不叙述。导航：一、margin的相关属性二、margin常见的问题1.IE6下双边距问题2.margin重叠的问题3.margin不起作用的情况三、margin负值的相关应用1.页面上实现css 阅读全文