代码改变世界

随笔档案-2013年12月

30个最常用css选择器解析(zz)

2013-12-10 15:16 by 很大很老实, 235 阅读, 收藏,
摘要: 你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。1. ** { margin: 0; padding: 0; }星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。 *选择符也可以在子选择器中使用。#container * { border: 1px solid black; }上面的代码中会应用于id为container元素的所... 阅读全文

Moment.js学习(一)源代码

2013-12-10 12:22 by 很大很老实, 2756 阅读, 收藏,
摘要: 本篇主要是学习Moment.js。类库源代码如下:2.4版本。//! moment.js//! version : 2.4.0//! authors : Tim Wood, Iskren Chernev, Moment.js contributors//! license : MIT//! momentjs.com(function (undefined) { /************************************ Constants ************************************/ var moment, ... 阅读全文

Highcharts选项配置详细说明文档(zz)

2013-12-09 11:45 by 很大很老实, 1259 阅读, 收藏,
摘要: http://www.helloweba.com/view-blog-156.htmlHighcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全。这里,我把Highcharts常用的最核心的参数选项配置整理成文档,与大家分享。Chart:图表区选项Chart图表区选项用于设置图表区相关属性。参数描述默认值backgroundColor设置图表区背景色#FFFFFFborderWidth设置图表边框宽度0borderRadius设置图表边框圆角角度5renderTo图表放置的容器,一般在html中放置一 阅读全文

CSS For Bar Graphs(maybe old)

2013-12-06 12:39 by 很大很老实, 275 阅读, 收藏,
摘要: Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side.Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simpl 阅读全文

学习CSS3BUTTON(二)

2013-12-06 10:48 by 很大很老实, 359 阅读, 收藏,
摘要: 今天,继续学习其源代码:button { margin-left: 0; margin-right: 0; *padding: 5px 5px 3px 5px; }/*margin-left:设定元素的左外边距;margin-right:设定元素的右外边距。这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。这里的*,主要是针对特定的浏览器*/a.button { -moz-user-selec 阅读全文

学习CSS3BUTTON(一)

2013-12-05 16:34 by 很大很老实, 530 阅读, 收藏,
摘要: CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.引用方式: 。每个样式表都需要包含相同的样式选择器,但是有不同的规则声明,以便适应不同的输出设备。即此处的媒体描述符media,这是它的两个value,screen是为了输出到屏幕的,而print是为了适合打印的,他们是对立的关系。第一段:a.button, button { display: inline-block;//参见:http://www.cnblogs.com/aomi/p/3459419.htmlpaddi 阅读全文

CSS CURSOR属性

2013-12-05 16:14 by 很大很老实, 490 阅读, 收藏,
摘要: cursor -- 定义鼠标样式取值: [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit[ ,]*: 根据用户定义的资源显示auto: 正常鼠标crosshair: 十字鼠标default: 默认鼠标pointer: 点状鼠标move: 移动鼠标e-resize,n 阅读全文

CSS3的文字阴影—text-shadow

2013-12-05 15:00 by 很大很老实, 503 阅读, 收藏,
摘要: text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。text-shadow曾经在css2中就出现过,但在css2.1版本中又被抛弃了,现在css3.0版本又重新捡回来了。这说明text-shadow这个属性非常值得我们做前端的人员重视。现在很多项目中,css3有很多属性被前端工程师们使用了,我在前面也分别介绍过css3中的渐变,透明度,圆角三个属性的使用,而且css3这么多属性中,我个人觉得text-shad 阅读全文

display:inline-block; 到底是个啥玩意?

2013-12-05 14:05 by 很大很老实, 1148 阅读, 收藏,
摘要: display:inline; 内联元素,简单来说就是在同一行显示。display:block; 块级元素,简单来说就是就是有换行,会换到第二行。display:inline-block; 就是在同一行内的块级元素。说概念太模糊,来个真实案例吧。链接一链接一A默认就是一行,所以inline用在这里是废的。宽高度设置也是费的。链接一链接一块状,这里高宽度就生效了,但是因为是块状,前后有换行符,所以这是两行了。链接一链接一这样就是同时达到块状,而且在同一行显示。 阅读全文

CSS中的class与id区别及用法

2013-12-04 10:51 by 很大很老实, 617 阅读, 收藏,
摘要: 我们平常在用DIV CSS制作Xhtml网页页面时,常会用到class 和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的。接下来我们就来详细了解CLASS与ID基本属性及用法。Class 在程序中称“类”,同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名如: .css5{属性:属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如: .css5{属性:属性值;} 选择器在html 阅读全文

史上最全的css hack(ie6-9,firefox,chrome,opera,safari) (zz)

2013-12-04 09:59 by 很大很老实, 285 阅读, 收藏,
摘要: 在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心,主要体现在javascript和css上面。javascript我这次就不谈了,先说说css。 为了适应不同浏览器不同的版本(版本主要就ie来说),ie这朵奇葩现在我们要兼容6-9,它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器,以及ie的版本,这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了,直接上代码 Css Hack test 上面这段代码大家可以直接copy出来,保存成htm... 阅读全文

CSS之CSS hack

2013-12-04 09:57 by 很大很老实, 581 阅读, 收藏,
摘要: 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对。类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .c 阅读全文

HTML语言的一些元素(五)

2013-12-03 12:33 by 很大很老实, 266 阅读, 收藏,
摘要: 一、table表格语法与结构 或者: 以上2个表格结构中td和th使用,没有区别均可使用。 班级 日期 标题 一班 2012-5-10 标题1 二班 2012-5-20 标题2 阅读全文

HTML语言的一些元素(四)

2013-12-03 11:13 by 很大很老实, 213 阅读, 收藏,
摘要: 以下资料整理自网路1.锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。英文名:anchor使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。首先,创建命名锚记,然后创建到该命名锚记的链接。示例代码在HTML页面中适当位置定义如下的锚点:这里是TOP部分这里是CONTENT部分这里是FOOT部分(您可以使用 id 属性来替代 name 属性,命名锚同样有效。[1])对于如上锚点的访问有两种方法一种是利用超 阅读全文

HTML语言的一些元素(三)

2013-12-03 10:35 by 很大很老实, 255 阅读, 收藏,
摘要: 本章节主要介绍:和可以通过 和 将 HTML 元素组合起来。HTML 元素是块级元素,它是可用于组合其他 HTML 元素的容器。 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用, 元素可用于对大的内容块设置样式属性。 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。HTML 元素是内联元素,可用作文本的容器。 元素也没有特定的含义。当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。1)、在DIV+CSS切图布局重构技术中,提... 阅读全文

CSS文档流与块级元素和内联元素

2013-12-03 10:23 by 很大很老实, 553 阅读, 收藏,
摘要: CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆css布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行, 浮动元素 阅读全文

内联元素和块级别元素

2013-12-03 10:22 by 很大很老实, 395 阅读, 收藏,
摘要: block(块)元素的特点:①总是在新行上开始;②高度,行高以及外边距和内边距都可控制;③宽度缺省是它的容器的100%,除非设定一个宽度。④它可以容纳内联元素和其他块元素inline元素的特点:①和其他元素都在一行上;②高,行高及外边距和内边距不可改变;③宽度就是它的文字或图片的宽度,不可改变④内联元素只能容纳文本或者其他内联元素(中文叫法有多种内联元素、内嵌元素、行内元素、直进式元素)。块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性 阅读全文

CSS的叠加

2013-12-02 14:47 by 很大很老实, 843 阅读, 收藏,
摘要: CSS中的叠加分为以下三种:1、上下叠加CSS部分:#div1{ width:200px; height:50px; margin-bottom:30px; background:#ffff00;} #div2{ width:200px; height:50px; margin-top:20px; background:#ff00ff;}HTML部分: 当一个div有向下空白边,第二个div有向上空白边时,两者的空白边发生叠加,叠加后的空白边值取值大者。2、内部叠加CSS部分:#div3{ width:200px; height:100px; margin-top:50px; bac... 阅读全文

HTML语言的一些元素(二)

2013-12-02 14:32 by 很大很老实, 230 阅读, 收藏,
摘要: 3)表示元素:,,,,,,,,,, 标签呈现粗体文本效果。 标签是基于内容的样式标签 的物理版本,但它没有后者的扩展意义。 标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体。如果某种加粗的字体不可用,浏览器将使用一些其他的表现方法,例如反相显示或者加下划线等。 标签显示斜体文本效果。 标签和基于内容的样式标签 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。提示: 标签一定要和结束标签 结合起来使用。 标签可定义下划线文本。已经被替代。 标签可定义上标文本。包含... 阅读全文

HTML语言的一些元素(一)

2013-12-02 13:57 by 很大很老实, 247 阅读, 收藏,
摘要: 1)标题的六个等级:,,,,,。如果写了诸如:等,则作为正文显示,实际上就失效了。2)段落,预先格式化的一节,换行和地址. 首先,相同之处是br和p都是有换行的属性及意思;其次,区别是只需一个单独使用,而和是一对使用;再次,br标签是小换行提行,p标签是大换行(分段)各行作用,相当于2个br。 具体看:http://www.divcss5.com/html/h78.shtmlpre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 标签的一个常见应用就是用来表示计算机的源代码。可以导致段落断开的标签(例如标题、 和 标签)绝不能包含在. 阅读全文