nzf_001的专栏nzf_001的专栏nzf_001的专栏nzf_001的专栏nzf_001的专栏

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

1select {2background-color:red\0; 3background-color:blue\9\0; 注意写hack的顺序，其中：background-color:red\0;IE8和IE9都支持；background-color:blue\9\0; 仅IE9支持；

outline的使用，大家都喜欢在reset样式表中直接重置：* {  outline: none;}Eric Meyers在他的CSS Reset是这样重置的： :focus {    outline:0;}这些方法大家都可以说常见了。可是有一点可能大家还是不太清楚——outline在表单的button中使用时，在firefox浏览器下依然还是会有虚线框显示

css 区分 input 的类型 input[type="text"]input[type="text"]{ border:1px; border-style:solid; border-color:#CCCCCC; }--------------------------------------------------ie6 兼容input[type="text"]{ bor

yslow是yahoo美国开发的一个页面评分插件，非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。仔细研究了下yslow的评分规则。主要有12条：1. make fewer http requests 尽可能少的http请求。。我们有141个请求（其中15个js请求，3个css请求，47个cssbackgroundimages请求），多的可

css3中的box-shadow（阴影）可以查看：http://www.css88.com/archives/2136或者http://www.css88.com/tool/css3Preview/Box-Shadow.html在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜基本语法：filter:progid:DXImageTransform.Mi

这个实例的目的：熟练使用border-radius涉及的属性：border-radius 、linear-gradient 、 box-shadow提示:“:before”“:after”,IE对after、before是不支持的，请在firefox、opera、chrome下试调！要求浏览器：firefox、opera、chrome先看下大致的步骤：1.定义class，绘制一个矩

作为网页设计师(前端工程师)，你可能还记得曾经的那个网页大小建议:一个网页（包括HTML、CSS、Javacript、Flash和图片）尽量不要超过30KB的大小，随着互联网的日益庞大，网络带宽也在飞速发展，很多设计师已经不再考虑这条30KB的理想准则。随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化，使得这种现象越来越普遍，尤其是对于大型网站来说，仅仅一个CSS文件就已经超

虽然不能完全依赖工具，但是在对css3的探索阶段看一看这个还是很有助于学习的，只是能看到兼容的写法   CSS 3现在是非常模块化的，他规范了添加级联样式表，它拥有一些优秀的功能，革新了 Web 版式和设计。　　虽然有很多优点，但是，这并不意味着它不会有任何缺点 CSS3的是新的技术，虽然有很多改善。但最大问题之一是，浏览器的兼容问题，这意味着它是不容易实现跨浏览器。开发者需要添加额外的代

顶原文地址：css样式表浏览器兼容作者：emlyhchcss样式表浏览器兼容2010-05-22 08:37CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C的标准,一定要加

我记得我又写过这样一篇，后来找不到了，再转一下吧原文地址：如何让div显示在flash,视频上面（前面）作者：emlyhch1、在Flash加入：<param name="wmode"value="opaque">2、在DIV里加入：position:absolute;z-index:10;（数字越大越处于上层）

还没有试过这个原文地址：display run-in">关于：css display run-in作者：emlyhchCSS has a value for the display attribute calledrun-in. It’s like this:h3 { display: run-in;}The point is to allow a header to run in

受用原文地址：认知：IE6、IE7支持但不完全支持display:inline-block作者：emlyhch本文章来自网络。 虽然布局中经常用到display:inline-block，ie6,ie7也确实表现的跟“真”的一样，但是这哥俩确实是不识inline-block为何物的。。。 因为我曾经试着对div设置display:inline-block;来布局，FF没有问题，但是ie

HTML：<a href="#"class="backToTop">CSS:.backToTop {width: 23px; height: 72px; display: block;background: url(../images/backToTop.png) no-repeat 0 0; position:fixed; left: 50%; margin-lef

在写HTML代码的时候，创造在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子：<div style="border:2pxsolid red;"><divstyle="float:left;width:80px;height:80px;border:1px

现在浏览网页主要用chrome，因为chrome的速度确实快，包括启动速度和加载网页的速度，比ie和ff快得多，不过看评测OPERA的新版本加载网页速度更快，由于没有用过OPERA，不好评价.我在用chrome和FF显示我的html文件的时候，发现它们的结果有所出入，我先不管是什么原因造成的，先hack一下再说，可是以前用过的csshack 都是针对ie，ff，opera，这个chrome和ff

一个css 在xp虚拟机里的ie6下出的一个bugvirtual function call---- 一个css 在xp虚拟机里的ie6下出的一个bug" TITLE="pure virtual function call---- 一个css 在xp虚拟机里的ie6下出的一个bug" />virtual function call---- 一个css 在xp虚拟机里的ie6下出的一个bug"

今天看到蓝色理想上面有一篇文章讲《css3弹性盒模型布局模块介绍》里面讲到用box-flex，突然觉得有点心慌，上次看到响应式网页设计里面也同样讲到flexbox自适应布局，而上次竟然没有引起自己的注意，想深入研究一下，竟然给忘记了，于是就在这种不断的忘记中彻底变成outer。今天借此机会，好好充电一下，看了adou写的关于box-flex的文章，发现里面存在一些问题，冒昧更正了一下，如有不妥还

@import 对于网站的性能有某些负面的影响，然后我在Web2.0 Expo的演讲上深入探讨了这个问题，并创建了一些测试页面和HTTP瀑布状图表，这些在下面将会用到。对于这个问题的底线是：如果你想样式表并行载入，以使页面更快，请使用LINK替代@import。LINK vs. @import大家都知道，有两种方法可以在你的页面中导入样式文件。你可以使用LINK标签:

在CSS文件中，我们常看到有些字体名称变成了乱码，这是由于编写者将中文字体的名字直接写成了中文，并且再上传或者拷贝复制的时候无意间变成了乱码。为了避免这种状况出现，在CSS文件中使用中文字体时，最好使用中文字体的英文名称，我们常用中文字体的英文名称对照表如下：Windows自带的字体：中文名英文名UnicodeUnicode 2Mac OS华文细黑

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用语法:transition ： [ || || || [,

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；我们一起学习完了Transform和Transition，让我们对元素实现了一些基本的动画效果，这些我想足以让大家激动了一阵子，今天我们趁着这个热劲继续第三个动画属性Animation的学习，单从Animation字面上的意思，我们就知道是“动画”的意思。但CSS3中的Animation与HTML

前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。text-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性

尽管觉得这个东西基本不用写了，但是为毛这几天总出现这个问题，总需要写他呢，所以再发一下啦~.ie6fixedTL{position:fixed;left:0;top:0}.ie6fixedBR{position:fixed;right:0;bottom:0}* html,* html body{background-image:url(about:b

一. Webkit浏览器     (1) 第一种写法：           background:-webkit-gradient(linear ,10% 10%，100% 100%，                                                             color-stop(0.14,rgb(255,0,0)),      

使用background-size可以控制背景图的尺寸。　 background-size是CSS3提供的一个新特性，它可以让你随心所欲的控制背景图的尺寸大小。先简要的看看background-size的用法。我们知道在CSS2中，背景图的大小在样式中是不可控的，比如要想使得背景图填充满某个区域，你要么重新做张大点的图，要么就只能让它以平铺的方式来填充。　　如今background-s

一．这篇博客的初衷　  最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档和说明发现很多臆想中的效果都实现不了。于是尝试在百度中搜素，结果资料也是少的可怜，反复转载的只有一篇来自怿飞博客的《 background-cli

说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding都包含在 width 之内。而另外一些浏览器则与它相反，是不包括border和padding的。在我们开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的CSS

在写样式的时候，iphone会有一些默认样式，比如 背景竟然是比较灰，并不黑。使用-webkit-appearance:none可去除系统默认的样式关于-webkit的一些介绍： WebKit是Mac OS Xv10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过软件更新获取）。 同时，WebKit也是Mac OSX的Safari网页浏览器的基础。WebKi

Css3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Googlechrome和Apple safari都支持。如textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Googlechrome中的textarea的默认显示，textarea右下角有一

使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序限定字数；二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。通常的做法是这样的：1.overflow:hidden;2.text-overflow:ellipsis;3.-o-text-ov

前面我们一起探讨了一下CSS3Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。语法:R：红色值。正整数 | 百分数G：绿

媒介类型(MediaTypes)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。媒介类型某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family"属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，"font-size"属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介

CSS 伪元素用于向某些选择器设置特殊效果。语法伪元素的语法：selector:pseudo-element {property:value;}CSS 类也可以与伪元素配合使用：selector.class:pseudo-element {property:value;}:first-line 伪元素"first-line" 伪元素用于向文本的首行设置特殊样式。在下面

1:font顺序对font的定义参数必须按照如下的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值：font : font-style || font-variant || font-weight || font-size ||line-height || font-family例子：p { font: italic small-caps 600 12pts/

type=button     就单纯是按钮功能   type=submit     是发送表单但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一.用button后往往页面不支持enter键了。所以需要支持enter键，必须要设置个submit，默认e

Alpha是来设置透明度的。先来看一下它的表达格式：　　filter：alpha（opacity=opcity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY）　　Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代

Internet Explorer7包含了许多有关于层叠样式表（CSS）解析与呈现的改进。这些改进意在提高InternetExplorer解释层叠样式表的一致性，以达到W3C的推荐的标准，同时为开发者提供一个可以依赖的功能集合。在某些情况下，当使用与IE6不兼容的方式来呈现现有的内容时，这些改变可能会产生影响。这种现象常见于在IE7中将元素移动到纸张的不同区域或者出现重叠内容时。这些问题

background-clip 和 background-origin 是 CSS3 中新加的 background module属性，用来确定背景的定位。background-clip 用来判断 background 是否包含 border 区域。而background-origin 用来决定 background-position 计算的参考位置。语法为：background-cl

■ 框架概念 ：　　谓框架便是网页画面分成几个框窗，同时取得多个 URL。只需要 即可，面所有框架标记需要放在一个总起的 html档，这个档案只记录了该框架如何分割 ，不会显示任何资料，所以不必放入 标记，浏览这框架必须读取这档案面不是其他框窗的档案。 是用来划分框窗，每一窗框由一个 标记所标示，必须在 范围中使用。如下例：　　<frame name="hi"src="m