Pivot Code

头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态态：status 投票：vote 合作伙伴：partner

CSS Attribute ：text-shadow 近期在自己的项目中用到了这个属性，以前经常见到在精彩网页设计中以文字搭配阴影呈现的立体文字效果彰明较著，自己也曾有过跃跃欲试的冲动，后来在网上查了下它的兼容性，结果对IE所有版本浏览器都不兼容，由于IE浏览器的市场份额还是占多数，因此对于这个属性只是简单了解，没有深入研究并使用。 而现在，在项目中需要用到这个属性，那么就不得不为此细究一下了。 text-shadow属性在Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5下被支持，对于IE只能期盼下一个版本了（对于IE浏览器的阴影效果微软提供了官方的解决方案，请继续往下看）。 此属性基本写法： text-shadow:[颜色 x轴 y轴 模糊半径] x,y轴控制阴影的偏移位置 颜色代表阴影的颜色 模糊半径可以控制阴影的模糊与不模糊 另外某些浏览器支持多层阴影，而对于多层阴影的表现方式是用逗号隔开在加一组属性，例如： text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径] (注：safari4.0后才支持多层阴影) 示例： text-shadow:black 2px 2px 0 DEMO 那么IE浏览器该怎么办呢？毕竟多数人还在使用IE。 IE浏览器对于好多css的新特性支持都不是很好，尤其是IE6（警告大家IE6不要再用了，否则你的电脑会成为病毒的温床）那么有个什么好的方案解决IE对于这个属性的兼容性问题呢？尤其是IE6！ 对于这个疑问，微软提出了官方的解决方案——利用shadow滤镜来实现： filter: dropshadow(OffX=1, OffY=1, Color=’#f5f5f5′, Positive=’true’) OffX对应text-shadow属性的X轴 OffY对应text-shadow属性的y轴 Color对应text-shadow属性的颜色 Positive设置为true就可以了 欲了解更多关于IE的这个滤镜，请查看官网介绍： Dropshadow ok，现在可以放心的使用文字阴影来实现你想要的效果了。

jQuery 1.4 最近发布了。 超乎大家的预期，这次并非简单的修修补补，1.4 包含了很多新特性、功能增强和性能提升！本文即向您介绍这些可能对你十分有用的新特性和优化增强。 你可以立刻下载jQuery 1.4试用： http://code.jquery.com/jquery-1.4.js 1. 传参给 jQuery(…) 之前，jQuery可以通过 attr 方法设置元素的属性，既可传属性的名和值，也可以是包含几组特定 属性名值对 的 对象。在 jQuery 1.4 中，你可以把一个参数对象作为第二个参数传给 jQuery 函数本身，同时创建HTML元素。 比方说你想要创建一个带有几个属性的锚记元素（<a></a>）。在1.4中，一切如此简单： jQuery(‘<a/>’, { id: ‘foo’, href: ‘http://google.com’, title: ‘Become a Googler’, rel: ‘external’, text: ‘Go to Google!’ }); 你大概也能猜到，这个锚记元素没有的 text 属性会调用 jQuery 的私有方法”.text()” ，把元素里的文字设置为“Go to Google!” 针对这一用法，下面是更有用的实例： jQuery(‘<div/>’, { id: ‘foo’, css: { [...]

图像如果显示在一个限制了宽度的div容器中时，图像有多大，它便会显示多大,当布局小于图像大小时便会产生溢出。同样的问题在table容器中一样。 那么你会说可以在CSS中定义布局中图像的宽度。那么如果图像小于布局的宽度时，图像便会被拉伸变形。那么有什么好的办法让这个图像即不会溢出，又能保持它原来的大小呢？这个时候我们可以用CSS的max-width方法来限制图像的最大宽度解决这个问题，具体用法就是: .layout{width:600px;} .layout img{max-width:600px;height:auto;}/*如果不希望图片会因为限制宽度而变形的话，那么把高度设置为自适应*/ 如此，问题解决，但是并不是所有问题都解决了，浏览器兼容性是永远都是前段工程师的噩梦，因为该死的IE6并不对这个属性提供支持。所以我们不得不针对IE6做一些处理。接下来就是只有IE支持的属性值：expression IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 用法是expression(statement),例如我们上面的CSS，我们需要在规则中加入 .layout{width:600px;} .layout img{max-width:600px;width:expression(this.width > 600 ? 600: true);height:auto;}/*this是指当前元素‘.’操作符中文代表中文意义的‘的’,width字面翻译宽度，后面是三元判断表达式，意思是说当img的宽度大于600时，img的宽等于600，否则不进行任何操作*/

最近做的一个项目经常会用到块级元素（block）浮动定位（float）的方式做的一个类似于BBS文章列表多行多列的布局方案。 我大概看了一下网上对于此种布局的布局办法，发现大多都是用表格来做的。连豆瓣、discuz的论坛也都是表格布局。 但是我对表格的布局有种敬而远之的畏惧感，一个是它的代码量很大，虽然用DW里添加表格的工具很快的添加，但是对于它的自适应元素的问题，我始终难以控制的行云流水。因此，我还是决定用css来做。 我选择用ul元素做列表框架，li元素做列表行，span元素做各列的容器的布局方式实现。 【css部分】 @charset "utf-8"; /* CSS Document */ ul li{margin:0; padding:0; list-style:none; font-size:12px; color:#333}/*初始化ul,li元素，让我们更方便使用*/ ul li{width:800px; height:35px; line-height:35px; border-bottom:1px dashed #ccc}/*定义高35像素的li元素，宽是布局的宽，还定义了一个虚线的下边框*/ ul li span{display:block; float:left; height:35px; line-height:35px;}/*定义span元素为块级元素，左浮动，高为li元素的高*/   /*分别定义需要的列span元素的宽度*/ ul li span.listOne{width:300px;} ul li span.listTwo{width:200px;} ul li span.listThr{width:100px;} ul li span.listFou{width:100px;} ul li span.listFiv{width:100px;} 【html部分】             <ul> [...]

即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2. 检查CSS是否书写正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 3. 用删除法确定错误发生的位置 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5. float元素的父元素不能指定clear属性 MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 6. float元素务必指定width属性 很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 另外指定元素时尽量使用em而不是px做单位。 7. float元素不能指定margin和padding等属性 IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。 8. float元素的宽度之和要小于100% 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 9. 是否重设了默认的样式？ 某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 10. 是否忘记了写DTD？ 如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。 注: 本文来源于网络，出处不明。