javascript代码规范小结
1. Javascript代码应符合Douban-JSLint检验标准 1-1. 语句必须都有分号结尾，除了for, function, if, switch, try, while 1-2. 只有长语句可以考虑断行，如： TEMPL_SONGLIST.replace('{TABLE}', da['results']) .replace('{PREV_NUM}', prev) .replace('... [阅读全文]
IE6/7/8/9中table元素align=center权重比margin:0大的实例说明
点评：这个错误很容易发生，关键是清空margin:0，这个规则多数写在reset.css中，而又想让table使用align属性居中，但这仅在IE浏览器中达到预期效果。 重现很简单，如下 !DOCTYPE html html head style * {margin:0;} /style /head body style="padding:50px;" div style="border:1px... [阅读全文]
IE6/7中使用setAttribute设置table的cellpadding和cellspacing的Bug
点评：新版邮箱项目中做页签功能时碰到的。table元素的 cellpadding 和 cellspacing 属性意义不提了。它们也有对应的css解决方案。复制代码代码如下:table { border-collapse:collapse; border-spacing:0; } th,td { padding: 0; } JS操作这两个属性有两种方式。 方式1，直接点操作 复制代码代码如下:ta... [阅读全文]
ie8ie6,IE6/7 and IE8/9（Q）中td的上下padding失效的解决方法
点评：IE6/7 and IE8/9(Q)中td的上下padding失效的解决方法，需要的朋友可以参考下。 如下 复制代码代码如下:!DOCTYPE HTML HTML HEAD meta charset="utf-8" titleIE6/7 and IE8(Q) 中td的上下padding失效/title style table { border:1px solid #555; } td { b... [阅读全文]
ul浮动,浮动的ul背景及图片的边框的使用
点评：ul中的li浮动时，无论给外层div的class写背景，还是给ul写背景，都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。 今天遇到的问题整理： 1.ul中的li浮动时，无论给外层div的class写背景，还是给ul写背景，都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。解决方... [阅读全文]
ul浮动,浮动的ul背景及图片的边框的使用
点评：ul中的li浮动时，无论给外层div的class写背景，还是给ul写背景，都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。 今天遇到的问题整理： 1.ul中的li浮动时，无论给外层div的class写背景，还是给ul写背景，都是没有效果的。这是因为li浮动时撑不起外层的高度。给li或者a加上display:block;也没有用。解决方... [阅读全文]
关于table的width:100%和margin导致溢出
点评：在网上搜了一下关于width:100%的解释，还是不太明白，先记住吧！ 今天在用表格的时候出现了个错误。 table { width:100%; height:252px; background:url(img/smbg.jpg) 0 0 repeat-x; margin:10px;} 表格撑破了外层。 原来width:100%时不能用margin，否则会溢出。 在网上搜了一下关于width... [阅读全文]
关于table的width:100%和margin导致溢出
点评：在网上搜了一下关于width:100%的解释，还是不太明白，先记住吧！ 今天在用表格的时候出现了个错误。 table { width:100%; height:252px; background:url(img/smbg.jpg) 0 0 repeat-x; margin:10px;} 表格撑破了外层。 原来width:100%时不能用margin，否则会溢出。 在网上搜了一下关于width... [阅读全文]
ie6bug,IE6 bug修正的10个小技巧 推荐
点评：我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。 1. 使用DOCTYPE 你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如： 复制代码代码如下:!DOCTYPE HTML PUBLIC "-//W3C//DTD H... [阅读全文]
纯divcss,纯CSS+Div 的标签实现代码
点评：纯CSS+Div 的标签实现代码，需要的朋友可以参考下。 CSS内容： 复制代码代码如下:@charset "utf-8"; /* CSS Document */ /* author:JiYun_Lai date:2011/01/11 desc:纯CSS+Div 的标签 */ /*舌签鼠标样式*/ .tongue a:visited, a:active, a:link { color:#66... [阅读全文]
css层叠样式表,CSS层叠与继承的使用深入剖析
点评：你对CSS层叠和继承的概念和用法你是否熟悉，这里和大家分享一下，文档中的一个元素可能同时被多个CSS选择器选中，每个选择器都有一些CSS规则，这就是层叠，而所谓继承，就是父元素的规则也会适用于子元素。 CSS技术理论：CSS层叠与继承 一、CSS层叠 我们知道文档中的一个元素可能同时被多个CSS选择器选中，每个选择器都有一些CSS规则，这就是层叠。这些规则有可能不矛盾的，自然这些规则将会同时... [阅读全文]
css遮罩,css 遮罩样式(支持IE和FireFox)
点评：css 遮罩样式（支持IE和FireFox） ，需要的朋友可以参考下。复制代码代码如下:.gSys-msg .mask { background-color: #000000; height: 100%; left: 0; filter:alpha(opacity=30); opacity:0.3; overflow: hidden; position: absolute; top: 0; ... [阅读全文]
浏览器兼容性,Web字体格式介绍以及浏览器兼容性一览
点评：文介绍主要的几种Web字体格式及各浏览器兼容情况。 目前，文字信息仍是网站最主要的内容，随着CSS3技术的不断成熟，Web字体逐渐成为话题，这项让未来Web更加丰富多彩的技术拥有多种实现方案，其中之一是通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这项技术，具体实现例子将在下一篇文章介绍，本文介绍主要的几种Web字体格式及各浏览器兼容情况。 Web字体格式介绍 Tr... [阅读全文]
css模块化,Css 模块化编码技巧
点评：原生Js因jQuery的"write less,do more"变得极简, Html因语义化编码变得简明, 那么, 有没有一种方式让Css也更加的高效精致呢? 当然有, 那便是模块化编码. Css的模块化,我们可以理解成(抑或本身就是)OOP思想, 重用性、灵活性、可扩展性便是它终极的目标, "类"便是它的核心, OOP的多用组合少用继承一样是它的基本原则. Css模块化是一个新颖高效的... [阅读全文]
Web前端开发规范文档（css/javascript）
点评：最近开始着手网站的改版，因为是团队协作，所有需要注意很多地方，也为了让我们的代码更加规范特收集了一些Web前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准... [阅读全文]
div+css布局及Web标准对网站优化和SEO方面的益处
点评：现在采用CSS+DIV建网站的朋友越来越多,我们今天就谈谈divcss布局及Web标准对网站优化和SEO方面的益处 一、用css+div,就要放弃以前表格排版的一些习惯,包括页面格式的一些习惯:1.以前用表格排版,一般都是用不规则的背景图片,跨单元格来做一些不规则的效果.css+div的特点就是格式和样式分开.2.css+div还是用块的行使排版比较好,页面简单,直观,不那么花哨.源码的结构... [阅读全文]
css最小高度,CSS网页布局中的最小高度问题的解决方法
点评：所谓的最小高度就是可以设定一个BOX的最小高度，当其内容较少时，也能保持BOX的高度为一定，超出就自动向下延伸。 假定有二个BOX，我们需要它的最小高度为150PX。 CSS 复制代码代码如下:div.box1,div.box2{ width: 300px; min-height: 150px; background: #EEE; float: left; margin-right: 20p... [阅读全文]
绝对定位,IE绝对定位元素神秘消失或被遮挡的解决方法
点评：在进行网页布局的时候，经常会根据需要设置相对，绝对以及浮动定位； 发现了一个奇妙的现象： 查了相关资料，高人有这样的解释： 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时，以及没有清除浮动时，IE6/7，FF中显示一致； 2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时，有清除浮动时，IE6/7不显示绝对定位层，FF显示； 3.当绝对定位层的邻近浮动层的宽度等于父层宽度时，以及没有清... [阅读全文]
经验之谈,经验之谈 CSS网页布局避免滥用DIV元素
点评：CSS网页布局应该避免滥用div元素一直是我们倡导的，以合适的HTML标签组织文档是CSS网页布局的基础。 页面中div与span元素的使用是一个新问题，我们也容易过多的使用它们。必要及合理的使用div可以明显的增强文档的结构性。这也是jb51.net一直提倡的。 如果你审视你的HTML文档，发现有着很多的div与span，那你就得换一个眼光来看问题了，是不是存在滥用的情况？ 是不是还有... [阅读全文]
css遮罩,css 遮罩样式(支持IE和FireFox)
点评：css 遮罩样式（支持IE和FireFox） ，需要的朋友可以参考下。复制代码代码如下:.gSys-msg .mask { background-color: #000000; height: 100%; left: 0; filter:alpha(opacity=30); opacity:0.3; overflow: hidden; position: absolute; top: 0; ... [阅读全文]
垂直文本框,用CSS让img input select button 图片，文本框，下拉菜单，按扭垂直居中的方法
点评：一直以来,在HTML中,img input select button 这里元素，垂直对齐,比较难。结果我长大了。我发现了一个现像，其实解决这些问题只是一句话的事。 如今这世道,各大浏览器横行,杯具的是还不按套路来。 方便了广大群众，害苦了网页设计师。 说实话真怀念当年微软垄断的时代。 只有一个IE6.什么事也不会发生。 虽然IE6也是相当的垃圾... 一直以来,在HTML中,img inp... [阅读全文]
经典诵读小结,27款经典的CSS框架小结 网页制作必备
点评： 利用 CSS 框架，可以简化你的工作，提高工作效率。CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块。 下面给你推荐了27款优秀的CSS框架，你可以选用。 1. 960gs 960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。 2. ... [阅读全文]
垂直文本框,用CSS让img input select button 图片，文本框，下拉菜单，按扭垂直居中的方法
点评：一直以来,在HTML中,img input select button 这里元素，垂直对齐,比较难。结果我长大了。我发现了一个现像，其实解决这些问题只是一句话的事。 如今这世道,各大浏览器横行,杯具的是还不按套路来。 方便了广大群众，害苦了网页设计师。 说实话真怀念当年微软垄断的时代。 只有一个IE6.什么事也不会发生。 虽然IE6也是相当的垃圾... 一直以来,在HTML中,img inp... [阅读全文]
margin负值,CSS中的边界margin的取值为负值说明
点评：CSS中的边界margin的取值也可以为负值，有时候我们不敢相信，这是一个有趣的话题，负值边界会给我们带来更多新奇的创意，让我们的工作更具刺激和挑战。 来看看一个实例吧 首先看一下CSS代码： style type="text/css"#box1,#box2{ float:left; width:200px; height:300px; color:#ffffff; font-si... [阅读全文]
margin负值,CSS中的边界margin的取值为负值说明
点评：CSS中的边界margin的取值也可以为负值，有时候我们不敢相信，这是一个有趣的话题，负值边界会给我们带来更多新奇的创意，让我们的工作更具刺激和挑战。 来看看一个实例吧 首先看一下CSS代码： style type="text/css"#box1,#box2{ float:left; width:200px; height:300px; color:#ffffff; font-si... [阅读全文]
css边框,巧用CSS边框 制作技能冷却效果
点评：下面的效果看起来还不错吧。在网页里，除了用Flash，我们还是有不少方法可以实现它。 在线演示：http://demo.jb51.net/js/2011/WarICONPrefect/index.htm上面的效果看起来还不错吧。在网页里，除了用Flash，我们还是有不少方法可以实现它。 显然这种效果不复杂，一张背景图片，加上前面带有透明度的多边形图层，在脚本控制下就可以转起来了。... [阅读全文]
css边框,巧用CSS边框 制作技能冷却效果
点评：下面的效果看起来还不错吧。在网页里，除了用Flash，我们还是有不少方法可以实现它。 在线演示：http://demo.jb51.net/js/2011/WarICONPrefect/index.htm上面的效果看起来还不错吧。在网页里，除了用Flash，我们还是有不少方法可以实现它。 显然这种效果不复杂，一张背景图片，加上前面带有透明度的多边形图层，在脚本控制下就可以转起来了。... [阅读全文]
web服务精髓,绝对定位才是WEB的精髓
点评：首先谈一个平时经常碰到的问题：元素水平垂直居中。当然如果之前做过类似的效果，你可以很快的从以前的代码里复制过来。 若是你从未碰到过此问题，并且非得用纯CSS来实现，我想你一时半了也是束手无策吧。这里不讨论如何实现的细节，网上关于此问题的解决方法也是层出不穷，但都有共同点：复杂，取巧。 且不论纯CSS的实现是否有意义，光是其CSS的代码就违背的HTML的思想：用简单的方法实现复杂的... [阅读全文]
web服务精髓,绝对定位才是WEB的精髓
点评：首先谈一个平时经常碰到的问题：元素水平垂直居中。当然如果之前做过类似的效果，你可以很快的从以前的代码里复制过来。 若是你从未碰到过此问题，并且非得用纯CSS来实现，我想你一时半了也是束手无策吧。这里不讨论如何实现的细节，网上关于此问题的解决方法也是层出不穷，但都有共同点：复杂，取巧。 且不论纯CSS的实现是否有意义，光是其CSS的代码就违背的HTML的思想：用简单的方法实现复杂的... [阅读全文]
CSS Usage CSS减肥工具（firefox插件）
点评：前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况，造成网站的CSS慢慢变得臃肿从而影响了网站的用户体验 这种情况下，给网站CSS文件减肥类似于海底捞针的大工程，因为稍不留神，一个不经意的删除，就会造成线上的产品的事故。下面我们就给大家推荐一款CSS减肥的工具–Firefox插件 CSS Usage. 首先，我们需要安装Firefox（点击此处下载）,... [阅读全文]
