结构与表现分离[div+css]带着我们了解了W3C标准，也成为了前段工程师必须掌握的技能，前端重构！让我们用更语义化的代码谱写我们的页面！
HTML 的空白符处理规则
HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。
我们知道，在默认情况下，HTML 源码中的空白符均被显示为空格，并且连续的多个空白符会被视为一个，或者说，连续的多个空白符会被合并。
然而在有些时候，我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现，或者需要源码中的换行符能起到真正的换行作用。于是，我们发现了 <pre> 标签，它可以真实还原它内部文本的空白符的真实情况。
于是我们经常会把一段表示计算机代码的文本放进 <pre> 标签中，它们在浏览器中会表现出自身的空格缩进和换行效果，而不需要我们增加额外的样式和标签来控制它的缩进和换行。
随着对 CSS 的了解不断深入，我们发现，原来这一切都是 white-space 属性在安排。<pre> 元素之所以如此神奇，是因为它自身具有 {white-space: pre;} 这一默认样式。
阅读全文…
译序：本文译自Smashingmagazine，但是原文讲述的内容有些浅，也不是很完整，前端观察在翻译的前提下，增加了更多的更系统的内容。如有不足之处，欢迎指正补充。
随着网络的发展，浏览器具有更强的渲染更高级代码的能力，我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常，而且形成了鼓励创新、避免hack、重前端脚本的氛围。
网络是一个非常好的环境，也是一个有丰富的知识来分享的协作社区。我们想要有圆角，我们就实现了它；我们想要多背景图片，我们实现了它；我们想要 边框图片，我们也让它实现了。所以需求从来不是问题，否则，我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道，网络无所不能。
阅读全文…
今天得到产品经理的一个需求
分类体系 一级分类 以及其子分类 在一个标题栏上展示 只显示5个子分类 其余显示为下拉列表 效果如下图
由于对前端比较痴迷 于是乎用前端来实现了一下 之前这样的需求 都是程序员去做判断 来实现的
查看DEMO
下载代码
已在如下浏览器测试 IE6 IE7 IE8 FF3.5.6 Opera10 Safari4
页面结构用前端实现如下
<div class="Area"> <div id="menu1" class="main_tit"> <h2><a href="http://www.iamued.com">IamUed.com-前端开发</a></h2> <ul class="sublist"> <li><a href="http://www.iamued.com">javascript</a></li> <li><a href="http://www.iamued.com">Ria</a></li> <li><a href="http://www.iamued.com">ActionScript</a></li> <li><a href="http://www.iamued.com">Flash</a></li> <li><a href="http://www.iamued.com">Flex</a></li> <li><a href="http://www.iamued.com">W3C</a></li> <li><a href="http://www.iamued.com">xhtml</a></li> </ul> </div> 一级内具体内容 </div>
可以看到 对于程序输出来讲 这样的结构不需要任何逻辑 相对代码结构清晰整洁
核心JS代码如下
阅读全文…
CSS3对于我们Web开发者来说不只是新奇的技术，更重要的是这些全新概念的web应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。
利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素，利用伪类选择器可以选择某一类元素，CSS3在选择器上的丰富支持让我们可以灵活的控制样式，而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。
阅读全文…
