09 2013 档案
摘要：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
阅读全文
摘要：关于fontOK，我们先从font来谈起。如下一段代码：div{font-size:14px;font-family:'\5FAE\8F6F\96C5\9ED1';font-weight:bold;font-style:italic;line-height:28px;}OK，我们看到，这一系列的操作都是针对font的。这些样式，其实我们是可以缩写的。div{font:italicbold14px/28px'\5FAE\8F6F\96C5\9ED1';}5行的代码用一个font搞定，那么这样写是什么意思呢？首先，font系列，也是可以缩写的我们来分析一下上面的例子
阅读全文
摘要：最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性。上网收集了一下解决方案比较好的方案就是利用css表达式进行解决补充：CSS Expression （CSS 表达式），是一种使用动态设置 CSS 属性的方式，并且被 IE5 以上的版本所支持，但是 IE8 的标准模式已不再支持 CSS 表达式了IE7和以上的浏览器都支持position:fixed；之前写过一篇介绍过固定页脚的文字,那时候没在ie6下测试方法一优点:比较简单，方便！就针对IE6的hack缺点：一个页面只能有一个元素是position：absolute 不然所有设置absolute的元素都会浮动方法二
阅读全文
摘要：CSS hack 在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。 为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩以前我们要兼容6-9，而现在10也出来了，在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行去搜索吧。不过ie10这朵奇葩，丫的居然不支持条件注释。在这里向ie10的开发工程师的全家问“好”。Ok，废话不多说了。直接上代码。.test{background:#f00;/*各浏览器都认识，主要给..
阅读全文
摘要：在IE6下使用浮动可能会出现文字重复的情况.在IE6下，浮动层之间有注释文字的话，之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制，但是代码里查看文字可并没有多出来。看个例子：HTML 歌剧院的魅影用IE6看一下，你会发现真的会多出一只“猪”！问题原因以及解决方法：原因：由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。解决办法：1、不放置注释。最简单、最快捷的解决方法；2、注释不要放置于2个浮动的区块之间；3、将文字区块包含在新的之间，...
阅读全文
摘要：li在IE中底部空行的BUG但是这次li在IE中底部出现的不是3像素而是一整条空白行，如图：HTML代码： 第1条连接 第2条连接 第3条连接CSS代码：* {padding:0;margin:0;}li { }li a {background:#CCC;border-bottom:1px #000 solid;text-decoration:none;display: block;}li a:hover {background:#BBB;}查看demo，请使用IE6查看：http://www.css88.com/demo/IE6_bug/ie6-li/ie6-bug.htmlIE6中列...
阅读全文
摘要：1、生成四个不同颜色方向的梯形#ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00; }2、只显示一个方向的梯形#ladder-top{ width:20px; height:20px; border:10px solid; border-color:#ff3300 transparent transparent transparent; border-style:solid dashed dashed dashed; }#ladder-bottom{
阅读全文
摘要：现在流行的设计里总是使用了大量的阴影，看看Vista、win7里夸张的box阴影，mac里的阴影比比皆是。CSS3的box-shadow属性可以让我们轻松实现图层阴影效果，使我们可以不再总是依赖于使用图片。实现盒模型阴影的综合代码：/*Internet Explorer*/background:#fff;/*Internet Explorer 8 */-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6) progid:DXImageTransfor...
阅读全文
摘要：li下用了浮动IE6的问题直接看HTML 沃尔沃认为认为 沃尔沃认为认为 沃尔沃认为认为 沃尔沃认为认为html代码很简单CSSul{ clear:both; overflow:hidden; padding:10px 10px 0;}ul li{ float:left; width:210px; line-height:24px; height:24px; background:red url(../images/greenicon.gif) no-repeat 0px 8px; padding-left:12px; }要实...
阅读全文
