2013年1月28日
Javascript绝句欣赏
摘要： 1. 取整同时转成数值型：'10.567890'|0结果: 10'10.567890'^0结果: 10-2.23456789|0结果: -2~~-2.23456789结果: -22. 日期转数值：var d = +new Date(); //12956984167923. 类数组对象转数组：var arr = [].slice.call(arguments)4. 漂亮的随机码：Math.random().toString(16).substring(2); //14位Math.random().toString(36).substring(2); //11位5. 阅读全文
posted @ 2013-01-28 21:26 沉睡的泰坦尼克 阅读(134) 评论(0) 推荐(0)
2013年1月6日
让IE6崩溃的几种方法
摘要： 方法一<style>div { width:100px; }div a:hover { position:absolute }</style><div><a href="#">点我挂掉IE6<img src=""/><span></span></a></div>原理解析： IE6在处理图片的absolute时出现问题方法二<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona 阅读全文
posted @ 2013-01-06 23:12 沉睡的泰坦尼克 阅读(179) 评论(0) 推荐(0)
有利于SEO优化的DIV+CSS的命名规则小结
摘要： 一、CSS文件及样式命名1、CSS文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；2、CSS样式命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box_2of3 (三 阅读全文
posted @ 2013-01-06 23:02 沉睡的泰坦尼克 阅读(189) 评论(0) 推荐(0)
CSS 水平居中，垂直居中
摘要： CSS之居中CSS的居中会遇到很多种情况，不同的情况使用的方法不同。1．水平居中 (1)文本、图片等行内元索的水平居中给父元素设置text-align: center可以实现文本、图片等行内元素的水平居中，如代码清单1所示。代码清单1行内元素的水平居中<styletype="text/CSS">.wrap{background:#000;width:500px;height:100px;margin-bottom:10px;color:#fff;text-align:center} </style><divclass="wrap&qu 阅读全文
posted @ 2013-01-06 22:46 沉睡的泰坦尼克 阅读(7178) 评论(0) 推荐(0)
低权重原则——避免滥用子选择器
摘要： 低权重原则——避免滥用子选择器 CSS设置的样式是可以层叠的，如代码清单1所示。代码清单1CSS的层叠<styletype="text/CSS">span{font-size:40px} .test{color:red} </style><spanclass="test">1234567890</span> “1234567890”既可以得到“font-size:40px”的样式，又可以得到“color:red"的样式。如果两个不同选择符设置的样式有冲突，又会如何呢？如代码清单2所示。代码清单2C 阅读全文
posted @ 2013-01-06 22:37 沉睡的泰坦尼克 阅读(209) 评论(0) 推荐(0)
如何处理上下margin
摘要： 如何处理上下margin对于模块来说，其上下margin不确定，因为美术设计的需求不同，可能同样样式的模块，在不同位置上有不同的上下margin。如图1所示。图1图2中用线框出的部分有相同的样式、字号、颜色，且都有下划线。很明显，我们可以将它提取成一个通用的组件。如代码清单1所示。图2代码清单1 提取标题组件<styletype="text/CSS">.title{border-bottom:1pxdashed#B2BCC6;color:#0066CF;font-size:16px;font-weight:bold;) </style><h2c 阅读全文
posted @ 2013-01-06 22:36 沉睡的泰坦尼克 阅读(432) 评论(0) 推荐(0)
挂多个class还是新建class——多用组合，少用继承
摘要： 挂多个class还是新建class——多用组合，少用继承假设有如图1所示的模块。 图1 三个简单的模块我们如何设置它的CSS呢？方案一如代码清单1所示。代码清单1 方案一<styletype="text/CSS">.numberListl{border:1pxsolid#ccc;padding:1Opx} .numberList1li{height:20px;line-height:20px;font-size:12px} .numberList2{border:1pxsolid#ccc;padding:1Opx;} .numberList2li{height: 阅读全文
posted @ 2013-01-06 22:28 沉睡的泰坦尼克 阅读(264) 评论(0) 推荐(0)
高质量CSS之三 CSS的命名规范
摘要： CSS的命名——命名空间的概念 CSS的命名应该注意哪些问题昵？我们以下图为例，进行详细解析。首先，CSS的命名推荐使用英语，不要使用汉语拼音。我们可以根据内容来选用合适的英文单词命名CSS 。比如头部用head，底部用foot，主体部分用main，导航用nav，菜单用menu等，这些不是硬性的要求，但为了方便阅读和理解，提高可维护性，我们推荐使用这样的命名方式。很明显，上图是一个关于时间的无序列表，我们可以用timelist来命名它。如代码清单4-4所示。代码清单1 CSS命名方案一<styletype="text/CSS">.timeList{xxxxxxx 阅读全文
posted @ 2013-01-06 22:27 沉睡的泰坦尼克 阅读(322) 评论(0) 推荐(0)
高质量CSS之二 模块化CSS
摘要： 模块化CSS——在CSS中引入面向对象编程思想 如何划分模块——单一职责模块化可以让代码高度重用，显著提高开发效率。关于模块化，比较成熟的是编程领域的“类”。在面向对象编程方式中，“类”是个非常核心的概念，可以说面向对象思想的基础就是“类”。关于模块化，“类”有很多成熟的技巧，例如封装、多用组合少用继承原则等。CSS的模块化是个有趣的话题，它是个新的领域，很多人都有自己的见解。下面笔者谈谈自己的理解——借鉴编程中的“类”，将面向对象的编程思想引入到CSS的模块化里。从视觉上进行划分，样式和功能相对独立且稳定的一部分就可以视为模块。举个例子说明，对于图1所示的设计图，我们该如何划分模块呢？很明显 阅读全文
posted @ 2013-01-06 22:26 沉睡的泰坦尼克 阅读(319) 评论(0) 推荐(0)
高质量CSS之一 DTD、怪异模式、如何组织CSS
摘要： 怪异模式和DTD 为了确保向后兼容，浏览器厂商发明了标准模式和怪异模式这两种方法来解析网页。在标准模式中，浏览器根据规范表现页面；而怪异模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。这两种模式的差异比较大，比较典型的就是IE对盒模型的解析：在标准模式中，网页元素的宽度是由padding、border、width三者的宽度相加决定的；而在怪．异模式中，width本身就包括了padding和border的宽度。此外，标准模式下块级元素的经典居中方法——设定width，然后margin．left:auto，margin 阅读全文
posted @ 2013-01-06 22:24 沉睡的泰坦尼克 阅读(529) 评论(0) 推荐(0)