02 2014 档案

display:inline-block的深入理解
摘要：在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是 初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。 display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在 同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有：（Opera,Safariie8,ie9,chrome,firefox3.6+） ，ie6，ie7 是不支持这个属性的。 但很遗憾，ie6，ie7，firefox 是不支持这个属性的。(在 Firef... 阅读全文
posted @ 2014-02-28 15:24 唸随爱 阅读(148) 评论(0) 推荐(0)
CSS display 属性详解
摘要：定义display 属性设置是否及如何显示元素。 继承性： No 说明 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不 谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的 这种层次结构，所有 display 是绝对必要的。 注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。此元素会被显示为内联元素，元素... 阅读全文
posted @ 2014-02-28 15:12 唸随爱 阅读(261) 评论(0) 推荐(0)
ul 、ol li 继承原有样式的问题
摘要：如： 1、为什么我的服务器无法远程了? 2、为什么我的服务器总是自动重启? 3、为什么我的服务器总是自动重启? 以前写这种类型的列表，都是自己用键盘输入这些数字，其实不然，ul 、ol li本身就自带 了这个样式，我们没有好好利用起来而已。 按照平常写样式，我们会先用reset.css来清除浏览器的样式，这样的话，就会将li 上原 本自带的列表样式清除掉，所以我们一般写样式的时候，这些列表样式是显示不出来 的。 现在我们就来解决列表样式不显示的问题： ul{list-style-type: decimal; }ul li{ display: list-item;} 这样... 阅读全文
posted @ 2014-02-27 15:38 唸随爱 阅读(338) 评论(0) 推荐(0)
CSS的继承性
摘要：所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的 应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即 可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则，应 用的时候容易让人迷惑。 CSS是层叠样式表(Cascading Style Sheets)的简称，它的规范代表了互联网历史上一 个独特的发展阶段。现在对于从事网页制作的朋友来说，很少没有听说过CSS了吧，因 为在制作网页过程中我们经常需要用到。 CSS允许我们为文档设置更为丰富且便于修改的外观，可以减轻网页设计者的工作负 担。这里我们主要想和... 阅读全文
posted @ 2014-02-27 15:31 唸随爱 阅读(383) 评论(0) 推荐(0)
CSS文档流与块级元素和内联元素（文档）
摘要：CSS文档流与块级元素(block)、内联元素(inline)，之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东 西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了 它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我 根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独... 阅读全文
posted @ 2014-02-26 16:35 唸随爱 阅读(591) 评论(0) 推荐(0)
HTML5 中的块级链接
摘要：英文叫做 “Block-level” links，我以为只有我厂那些鸟毛不知道，没想到不知道的还挺多， 需要普及一下。 最近看了 kejun 的 PPT 前端开发理论热点面对面：从怎么看，到怎么做?，p21 引用了 10 HTML Tag Crimes You Really Shouldn’t Commit 中的一条： 很遗憾，Web 标准中处处充满了打脸行为，这条规则现在已经失效了!在那篇文章发 布一个月后，HTML5doctor 发表了 “Block-level” links in HTML5，引述一下，就是原先你要这么写：Bruce Lawson voted sexi... 阅读全文
posted @ 2014-02-26 16:09 唸随爱 阅读(446) 评论(0) 推荐(0)
CSS3新的字体尺寸单位rem
摘要：CSS3引入新的字体尺寸单位 rem ，可以简单记忆为root rm。 CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上 是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的 了解rem。 em单位是相对于父节点的font-size，会有一些组合的问题，而rem是相对于根节点 (或者是html节点)，意思就是说你可以在html节点定义一个单独的字体大小，然后所 有其他元素使用rem相对于这个字体的百分比进行设置，这样就意味着，我们只需要在 根元素确定一个参考值，在根元素中设置多大的字体... 阅读全文
posted @ 2014-02-25 17:01 唸随爱 阅读(487) 评论(0) 推荐(0)
CSS中文字体对照表
摘要：Unicode简单的说一下制作网页时的为了兼顾到一些浏览器CSS样式文档中一般是不出 现中文字体的，尤其是{}中，因此通过参照下表将其对应转编，可以将中文名转成英文 名、unicode、unicode2注意unicode2是直接输出为文本的， 比如：微软雅黑，我们在CSS中的设置为：font-family:”Microsoft Yahei”;也可以是对应的unicode：font-family:”\5FAE\8F6F\96C5\9ED1″; 但微软雅黑对应的unicode2即微软正黑体写在样式文档里是没有效果的，因为 unicode2是以文本形式输出的，这个可以将对应的unico... 阅读全文
posted @ 2014-02-25 15:49 唸随爱 阅读(440) 评论(0) 推荐(0)
引用外部CSS的link和import方式的分析与比较
摘要：很多网页中的 CSS 链接与引用是这样写的： 而很多网站使用的都是 link 而像 google 百度 163等网站它们都是直接写在网页中。 当然使用链接 link 和导入 import 的好处就是易于维护，但当网速比较慢的时候，会出 现加载中断的情况，从而导致页面排版出错。 他俩的作用相同，唯一的不同是服务对象不一样： @import 为 CSS 服务 link 是为当前的页服务 外部引用 CSS 中 link 与 @import 的区别： 本质上，这两种方式都是为了加载 CSS 文件，但还是存在着细微的差别。 差别1：老祖宗的差别。link 属于 XHTML和html... 阅读全文
posted @ 2014-02-24 16:54 唸随爱 阅读(647) 评论(0) 推荐(0)
CSS样式表引用方式
摘要：最近讲课中，有些学员对调用样式表老是有含糊不清?大体说来有四种方式: 1、外部文件引用方式;(推荐使用) 2、使用@import引用外部CSS文件; 3、内部文档头方式也叫内嵌法调用; 4、直接插入式也叫行内样式。 它们主要的差别在于它们规定的风格使用的范围不同： 一、外部文件引用方式 外部文件引用方式即将CSS写成一个文件，在HTML文档头通过文件引用来进行风 格控制。也就是把写好的CSS属性的文件保存为文件扩展名为.CSS文件。 CSS文件的引用是在HTML的标记之间写下列语句：如当前文件目录下有一CSS 文件名为mystyle.css，内容如下： p{ f... 阅读全文
posted @ 2014-02-24 16:47 唸随爱 阅读(2091) 评论(0) 推荐(0)
10个CSS简写/优化技巧
摘要：CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅 读。 下面介绍常见的CSS简写规则： 一、盒子大小 这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。 盒子有上下左右四个方向，每个方向都有个外边距： margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px; 你可以简写成： margin:1px 2px 3px 4px;语法... 阅读全文
posted @ 2014-02-21 15:44 唸随爱 阅读(223) 评论(0) 推荐(0)
WEB开发人员必知的20+HTML5技巧（转）
摘要：互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。1. 新的文档类型（Doctype）你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。 只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）2. 图形（Figure）元素考虑用下面的代码来标记图片？ Image of Mars. 很不幸，它不能用简单、富有语 义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片 阅读全文
posted @ 2014-02-20 17:11 唸随爱 阅读(181) 评论(0) 推荐(0)
CSS 命名规范及标题供参考与学习
摘要：一、CSS命名规范XHTML-CSS写作建议所有的xhtml代码小写属性的值一定要用双引号("")括起来，且一定要有值每个标签都要有开始和结束，且要有正确的层次空元素要有结束的tag或于开始的tag后加上"/"表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、 border等到的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引 擎的查询。给每一个表格和表单加上一个唯一的、结构标记id给重要的区块加上注释,如： 给图片加上alt标签所有的标签必须进行合理的嵌套根元素前必须有元素，宣告使用那一种DTD根元素必须 阅读全文
posted @ 2014-02-20 17:06 唸随爱 阅读(926) 评论(0) 推荐(0)
html css 如何将表头固定（转）
摘要：html css 如何将表头固定 position属性取值为fixed时，则元素的位置将不受滚动条的影响，而是直接依据窗口定位，这就是将表头固定的最直接方法，网上其他途径感觉都是在走弯路。但是与此同时必须解决两个问题。第一：表体将随之不依据表头定位，而是依据body元素定位，因此表体将上移，导致表体靠上部分被表头遮挡,而且有重影。第二：表体的宽高和表头的宽高也将互相独立不再受文档流的约束，这导致单元格对不齐。 解决办法示例如下。其中，单元格上下对齐的问题可以通过设置padding margin 百分比width来解决，表头和表体也可以放在各自的div里。样式单 js脚本 $(functio.. 阅读全文
posted @ 2014-02-18 16:28 唸随爱 阅读(1802) 评论(0) 推荐(0)
让Flash背景透明兼容Firefox、IE 6和IE 7的代码
摘要：添加代码:到 之间意思是设置Flash背景透明。添加代码: wmode="transparent" 到 …之间,意思是使Flash背景在Firefox下透明… 阅读全文
posted @ 2014-02-16 16:45 唸随爱 阅读(171) 评论(0) 推荐(0)