1
9
2013
0

[摘自网络]android升级adt和sdk之后无法识别SDK Location的一个解决方式

取自:http://blog.csdn.net/tedzyc/article/details/8439917

        我把android的adt和sdk从4.0升级到4.2,发现eclipse的android设置里面原来列出的各种api level的platform消失了,而且无法新建android工程。而且检查过了sdk和adt都是最新的。

        解决方式就是重新建一个工作区(workspace)。在eclipse的Windows > Preferences > General > Startup an Shutdown > Workspaces 里面,Remove掉以前的workspace,再重启eclispe(这会导致看不到以前的所以工程,建议在remove之前先到Package Explorer里面全选所有工程,然后导出为‘File System’,用于以后再导入)。

        重新进入eclipse之后,查看android的SDK Location,就应该可以识别了。如果还是不行,重命名你的SDK所在的目录,再到eclipse设置的Android类别里面把SDK Location指向重命名后的目录所在的路径,就能识别了。识别完成后把那个目录重命名回原来的,再到设置里面重新指定路径。

Category: Android | Tags: Eclipse Android
3
9
2012
0

javascript的getComputedStyle方法获取节点的计算后的CSS样式

取自:www.cnblogs.com/yunfour/archive/2012/02/25/2367895.html

今天在做东西的时候,遇到一个问题:想获取节点style指定的CSS属性,如:ele.style.display属性,如果在节点中没有设置其style.display属性的话则通过ele.style.display这种方式获取的值为空字符串。

如果节点ele是一个块状元素的话,通过上述方式返回的display的值则应该为:block的,而其得到的值为空字符串并非我想得到的,在网上 查找了了一下,浏览器中提供了一个方法:window.getComputedStyle()的方法可以得到节点的计算后样式,该方法有两个参数,第一个 是要所要获取的样式的节点,第二个参数不知道是什么作用,网上给出的例子都将设置成null;即是这样调用 的:window.getComputedStyle(node,null),其返回值为一个对象,为计算后的样式的属性值对的集合。

但是IE浏览器中不支持该方法,不过在IE中,元素节点有一个属性对应的也是该节点计算后的方法,例如,在IE中节点node计算后的样式 为:node.currentStyle,该属性是一个对象,也是计算后的样式的属性值对的集合。为了兼容性我们可以将其封装改写一下,提供一个统一的方 法getCurrentStyle(node),如下:

// 参数node:将要获取其计算样式的元素节点
function getCurrentStyle(node) {
    var style = null;
    
    if(window.getComputedStyle) {
        style = window.getComputedStyle(node, null);
    }else{
        style = node.currentStyle;
    }
    
    return style;
}

 

以下代码是获取其中div的display的样式属性值:

<div id="div">div节点</div>

<script>
var div = document.getElementById("div");
var style = getCurrentStyle(div);
var display = style["display"];

alert(display);    // 输出:block
</script>

 

Category: Web摘记 | Tags: 获取样式 javascript
1
1
2012
0

网页设计之CSS @font-face应用网页字体自定义 CSS 中@font-face应用

网页设计之CSS @font-face应用网页字体自定义 CSS 中@font-face应用,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。

首先我们一起来看看@font-face的语法规则:

@font-face {
   font-family: <YourWebFontName>;
   src: <source> [<format>][,<source> [<format>]]*;
   [font-weight: <weight>];
   [font-style: <style>];
 }

取值说明

YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";” source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径; format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等; weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

兼容浏览器

说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念:

一、TureTpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

二、OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

三、Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

四、Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

五、SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }

但为了让各多的浏览器支持,你也可以写成:

@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ }

说了这么多空洞的理论知识,大家一定有点心痒痒了,那么我们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的,假如我们有一个这样的DOM标签,需要应用自定义字体:

HTML Code:

<h2class="neuesDemo">Neues Bauen Demo</h2>

通过@font-face来定义自己的Web Font:

@font-face {
  font-family: 'NeuesBauenDemo';
  src: url('../fonts/neues_bauen_demo-webfont.eot');
  src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
   url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
   url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
   url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
  font-weight: normal;
  font-style: normal;
}

我在这里采用的是相对路径,当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到我们实际页面中去:

h2.neuesDemo {
   font-family: 'NeuesBauenDemo'
}

效果:

看到上面的效果,我想大家会感到@font-face很神奇,同时也想争着做做看,可是一动手才发现,特殊字体我要怎样才能得到,那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢?有些朋友可能就不知道如何运手了,那么我们就带着这些问题来一个全程完成的实例吧:

一、获取特殊字体:

我们拿下面这种single Malta字体来说吧:

要得到single Malta字体,不外乎两种途径,其一找到付费网站购买字体,其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的,那我们就得到免费的地方下载,在哪有呢?我平时都是到Google Web FontsDafont.com寻找自己需要的字体,当然网上也还有别的下载字体的地方,这个Demo使用的是Dafont.com的Single Malta字体,这样就可以到这里下载Single Malta

Single Malta下载下来后,需要把它解压缩出来:

二、获取@font-face所需字体格式:

特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,我们同样是需要第三方工具或者软件来实现,下面我给大家推荐一款我常用的一个工具fontsquirrel,别的先不多说,首跟我点这里进入到下面这个界面吧。

如果你进入页面没有看到上图,你可以直接点击导航:

如果你看到了上面的界面,那就好办了,我们来看如何应用这个工具生成@font-face需要的各种字体,先把我们刚才下载的字体上传上去:

上传后按下图所示操作:

现在从Font Squirrel下载下来的文件已经保存在你本地的电脑上了,接着只要对他进行解压缩,你就能看到文件列表如下所示:

大家可以看到,解压缩出来的文件格式,里面除了@font-face所需要的字体格式外,还带有一个DEMO文件,如果你不清楚的也可以参考下载下来的DEMO文件,我在这里不对DEMO说明问题,我主要是给大家介绍如何把下载下来的文件有价值的运用到我们的项目中。

例如在自己的本地创建了一个fontface项目:

为了让项目结构更清晰,我们在项目中单独创建一个fonts目录,用来放置解压缩出来@font-face所需的字体格式:

现在@font-face所需字体已经加载到本地项目,现在本地项目中的style.css中附上我们需要的@font-face样式

@font-face {
   font-family: 'SingleMaltaRegular';
   src: url('../fonts/singlemalta-webfont.eot');
   src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/singlemalta-webfont.woff') format('woff'),
    url('../fonts/singlemalta-webfont.ttf') format('truetype'),
    url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}

到这里为止,我们已经通过@font-face自定义好所需的SingleMalta字体,离最后效果只差一步了,就是把自己定义的字体应用到你的Web中的DOM元素上:

h2.singleMalta {
  font-family: 'SingleMaltaRegular'
}

效果:

看到上面的效果,那大家就知道我们实现成功了。那么关于@font-face帮你打造特殊效果的字体,到这里基本上就完成了,我在这里需要提醒使用者:

1、如果你的项目中是英文网站,而且项目中的Logo,Tags等应用到较多的这种特殊字体效果,我建议你不要使用图片效果,而使用@font-face,但是你是中文网站,我觉得还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是你加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化;

2、致命的错误,你在@font-face中定义时,文件路径没有载对;

3、你只定义了@font-face,但并没有应用到你的项目中的DOM元素上;

以上几点都是在平时制作中常出现的问题,希望大家能小意一些,另外我们没有办法在购买所有字体,就算你实力雄厚,那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址:Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,前面几个链接是帮助你获取一些优美的怪异的特殊字体,但下面这个工具作用更是无穷的大,他能帮你生成@font-face所需要的各种字体,这工具就是Font Squirrel

最后在提醒一下,使用@font-face别的可以忘了,但Font Squirrel千万不能忘,因为他能帮你生成@font-face所需的各种字体格式。

Category: Web摘记 | Tags:
12
11
2011
0

css:opacity对after&before 关于z-index上的干扰 记录

关于opacity对after&before 关于z-index上的干扰 的记录!

Category: Web设计 | Tags: css opacity z-index
12
7
2011
1

CSS3变换入门 | CSS | 前端观察

CSS3变换入门

译自:CSS transitions 101

中文:CSS3变换入门

原作者:Jason Cranford Teague

译者:神飞

请尊重版权,转载请注明出处,多谢!


尽管人们期望在屏幕上有些改变,但是CSSHTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现。

 

比如一个链接要么是这个颜色,要么是那个颜色;一个文本区域要么这么大,要么那么大;一张图片要么是透明的要么是不透明的;它们是从一个状态直接变到另一个状态——中间并没有过渡

这导致大部分网页有些生硬,因为元素只会很死板的切换或改变。

是的,你可以使用DHTML、jQuery或者自己编写JS来实现过度,但是这需要更多的代码来实现本应该非常简单的功能。

我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中,你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。

几个月之前,我就建议设计师应该开始使用新的CSS 3 技术来实现一些它们渴求已久的基本的功能了——唯一的问题就是,这些技术没有一个能在IE中可用,包括IE8。

一些读者认为的那些技术将会有75%的用户看不到的观点是不靠谱的。

对那些读者我想说,“坐稳了”,因为我将要向你介绍另一个新的CSS属性,它允许你通过简单的几行代码来为任意元素添加很酷的变换效果。

CSS 变换刚刚在CSS 3中被引入,但是已经被添加为webkit的扩展了。也就是说,现在它们只能用于基于webkit内核的浏览器,包括Apple Safari和Google Chrome。不过从Opera 10.5 pre-Alpha版本来看,Opera将在下一个10.5中支持CSS 3变换。所以要看到本文中提到的实际效果,强烈建议你使用Chrome或者Safari 4来查看本文

CSS变换从哪里来?

变换曾经只是Webkit的一部分,而且是Safari UI能做而其它浏览器不能实现的一些很酷的东东的基础。

但是W3C CSS工作组曾经拒绝将变换添加到它的官方特性里面,一些成员坚持认为变换并非CSS属性而通过脚本来处理会更好。(内牛满面啊,我前一段也有类似的观点,也和高温讨论过,我认为CSS动画超出了表现的范围,交互的东西应该有脚本来实现,不过后来在鬼哥的点拨下,才开始有了新的认识——神飞)

但是很多设计师和开发人员,包括我自己,坚持认为这确实是样式——只是动态样式,而不是我们日常使用的传统的静态样式。

幸运的是,关于动态样式的争论已经成为过去。去年三月份,来自Apple和Mozilla的代表们开始将CSS变换模块添加到CSS 3特性里面,非常接近Apple已经添加到webkit中的表现。

关于设计增强的一个简要介绍

在我们继续之前,让我强调一点:永远不要让网站的功能依赖样式,如果该样式不是浏览器通用的话(也就是说,所有的常用浏览器都支持)。

对错过的同学再一次强调:永远不要让网站的功能依赖样式,如果该样式不是浏览器通用的话

这也就是说,你可以使用样式,比如变换,作为设计增强以提高用户体验——在不牺牲看不到它们的用户的可用性的前提下。如果你不用CSS变换照样能用而且用户依然能够完成他们的任务,就没问题,你就可以使用CSS变换。

首先,一些变换的想法

CSS变换将不会替代所有的DHTML,不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。

你需要到下载Apple Safari 3+Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。

滚动效果

变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的什么元素),变换是为页面添加平滑的界面的非常棒的方法。

例一

下拉菜单

纯CSS菜单比较容易实现,而变换还可以让你给菜单添加下拉和高亮效果。

例二

动画

你可以在页面上的两点之间移动一个对象,然后使用变换给它添加动画效果。

例三

点击一下,不要放开!

 

变换、状态与动作

但是请稍等一下。在深入了解变换之前,我们需要理解一个元素能变换的不同的状态。

状态定义当前页面中相应的元素如何与用户进行交互,它们在CSS中通过伪类来定义,比如当用户的鼠标经过一个元素的时候,那个元素就会被hover伪类控制。

动态伪类起作用的元素描述
:link只有链接未访问的链接
:visited只有链接访问过的链接
:hover所有元素鼠标经过元素
:active所有元素鼠标点击元素
:focus所有可被选中的元素元素被选中
None所有元素所有元素的默认状态

变换通过改变不同元素状态之间的一个时间段内的样式来起作用。比如,一个元素的默认状态的颜色值将会在呈现hover状态的色彩值之前逐渐显示色盘中的中间颜色。

一个简单的变换

让我们假设一个简单的变换,在用户的鼠标经过一个链接的时候,将颜色从一个变换成另外一个。与其它CSS属性一样,变换也是直接添加到要使用它的选择器中。该属性可以采用下面的4个值。

CSS property

被变换的属性(比如, color)。看一下下面的表格了解所有可以被变换的CSS属性列表。

Duration

变换持续的时间,通常以秒来计算(比如, .25s).

Timing function

允许你控制持续的时间的计算方式。与其使用一个简单的线性计算,你可以使变换加速(渐入)或者减速(淡出),或者甚至specify a beat or count (比如,linear). More on this later in the article.

Delay

在动作和变换开始之间等待多久,通常用秒来表示(比如, .1s)。如果你不想延迟,该值可省略。

因为变换属性始于Webkit扩展,我们不得不同时使用transition 和-webkit-transition 属性以向后兼容。

让我们首先提阿贾这这些属性到:hover 伪类中:

1
2
3
4
5
a:hover {
   color: red;
   -webkit-transition: color .25s linear;
   transition: color .25s linear;
}

那么现在,当鼠标经过一个链接,不会直接从蓝色跳转到红色,而是用四分之一秒的时间逐渐变换它们的中间颜色(过渡颜色)。

当然,我们也希望变换回到默认的链接颜色,那么我们可以添加一个变换到:link (以及:visited)伪类上,并在它褪去之前添加一个简单的延迟(十分之一秒) :

1
2
3
4
5
a:link, a:visited {
   color: blue;
   -webkit-transition: color .25s linear .1s;
   transition: color .25s linear .1s;
}

添加多重变换

因为一个变换就是一个CSS属性,如果你在同一个CSS规则中添加多个变换的实例,那么最后的那个将会覆盖前面的,而不是添加它们。所以在下面的规则中,唯一的变换将是背景色彩:

1
2
3
4
5
6
7
8
a:hover {
  color: red;
  background-color: rgb(235,235,185);
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  -webkit-transition: background-color .15s linear .1;
  transition: background-color .15s linear .1;
}

当然,这并不是说,不能添加多重变换——多重变换可以在同一个变换属性定义中用逗号隔开:

1
2
3
4
5
6
a:hover {
  color: red;
  background-color: rgb(235,235,185);
   -webkit-transition: color .25s linear, background-color .15s linear .1s;
  transition: color .25s linear, background-color .15s linear .1s;
 }

这条定义将产生色彩和背景色的双重变换。

什么可以被变换?

几乎所有的有色彩、大小或位置等组件的CSS属性,包括许多新添加的CSS 3属性, 都可以应用变换。一个值得注意的例外是box-shadow。

来自W3C的变换的说明,这里是一个可以赋予变换的CSS属性的列表,附带转变的对象,我也高亮了一些比较有用的属性。

CSS属性改变的对象
background-color色彩
background-image只是渐变
background-position百分比,长度
border-bottom-color色彩
border-bottom-width长度
border-color色彩
border-left-color色彩
border-left-width长度
border-right-color色彩
border-right-width长度
border-spacing长度
border-top-color色彩
border-top-width长度
border-width长度
bottom百分比,长度
color色彩
crop百分比
font-size百分比,长度
font-weight数字
grid-*数量
height百分比,长度
left百分比,长度
letter-spacing长度
line-height百分比,长度,数字
margin-bottom长度
margin-left长度
margin-right长度
margin-top长度
max-height百分比,长度
max-width百分比,长度
min-height百分比,长度
min-width百分比,长度
opacity数字
outline-color色彩
outline-offset整数
outline-width长度
padding-bottom长度
padding-left长度
padding-right长度
padding-top长度
right百分比,长度
text-indent百分比,长度
text-shadow阴影
top百分比,长度
vertical-align百分比,长度,关键词
visibility可见性
width百分比,长度
word-spacing百分比,长度
z-index正整数
zoom数字

变换计时与延迟

使用变换,你可以改变变换的速率,在开始的时候较慢然后在结束的时候加速,反之亦然,或者之间的任何事情。CSS变换有5个计时的关键词,同时也允许你自己定义你自己的计时曲线。

名称如何工作
cubic-bezier(x1, y1, x2, y2)X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。
linear均速
ease逐渐慢下来
ease-in加速(渐入)
ease-out减速(淡出)
ease-in-out加速然后减速

全部变换?

变换将很快成为所有网站的标准操作方式,从而增强用户界面的体验。

为了给你的整个网站添加一个普遍的变换,一个做法就是添加一个变换到全体选择器,类似CSS reset。下面的代码会给页面中的所有元素添加一个默认的变换,从而允许你保持一个统一的变换效果:

1
2
3
4
5
6
7
8
9
10
*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
transition:
	color .25s linear,
	background-color .25s linear,
	border-color .25s linear;
}

一个反对全部变换,同时明确反对使用全体选择器作为CSS reset的争论是,将一个样式用到页面的所有元素会减缓页面的渲染。然而,我并没有发现任何有关与此的证据。有人知道吗?

OK,其实CSS 变换就这么简单,它并不难理解,而且你也不用些大量的JS脚本来实现它,这很方便实用,多做几次练习,你就可以熟练的使用它了。

译注:本文原文题目为 CSS transitions 101,101这个数字比较不好理解,其实美国大学第一门课程通常编号为101,所以101一般表示入门、初级的意思。另外关于 transition 这个词的翻译,我之前是翻译成“转换”,但是这个翻译很别扭,在twitter上和 @gaowhen@ghostzhang@ivane@hiwanz@cnjoel等人讨论后,觉得翻译成“变换”更合适一些,多谢各位。——神飞

Category: Web摘记 | Tags:

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com