记录工作中前端技术的博客

关于FONT-ICON在网页设计中的运用

在IUNI商城和IUNI Town的项目开发中,我在网页中使用字体ICON方面做了一些尝试,通过与图片对比,发现兼容效果非常好。 FONT-ICON在CSS3中被普遍使用,但实际上css2中就已经支持了这个font-face属性,通过自定义字体,可以实现很多图标效果。 为什么舍弃png24的图标使用ICON呢,主要优点如下: 字体ICON阅读全文…

阅读 1,498 评论 0 阅读全文

css+js解决文本两端对齐以及分散对齐

一个很简单的设计排版样式,A图表示居左对其,但实际上我们想要的可能是B所示的对齐方式。

这就是传说中的两端对齐 还有一种更确切的说法是两端分散对齐。

问题

最开始的时候 ,我试图使用CSS来解决这个小问题,查阅了很多办法,发现没有一种完美兼容的解决方式。

在一些csser使用了css的两端对齐方案是基于 text-align:justify 及 text-align-last:justify 实现来解决这个问题,但是需要在每个字的后面加上空格。

这个办法是这样的:

原理:是通过调整字之间的空格大小来达成的,所以需要事先在每个单词和汉字间都插入一个空格。

ie下 text-align:justify; 是可以产生作用的。所以在ie下很容易实现:

p { 
text-align:justify;
text-align-last:justify;
}

text-align-last 在Firefox12-17下仍处理实验支持阶段,需加前缀 -moz-,FF下这样实现

p{
text-align:justify;
-moz-text-align-last:justify;
}
Chrome, Safari, Opera实现比较麻烦:Chrome23, Safari5.1.7, Opera12.11 不支持 text-align-last, 但支持 text-align 的 jsutify, text-align:justify 不处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以使用伪对象的方式派生出新行,这样不需要额外处理html代码,然后再将派生出的新行隐藏!!
p{
overflow:hidden;
height:20px;
text-align:justify;
}
p:after{
display:inline-block;
content:'';
overflow:hidden;
width:100%;
height:0;
}

这样的,基本上可以实现我们想要的效果了。
但是,我今天想要推荐的方法并不是上面的办法,上面的办法在静态页面中确实可以使用,但是无端端的增加空格对于 数据比较多的情况下 就有点麻烦,而且 ,如果文本如果是动态的或者文本是用户提交的情况,我们就很难控制在文本增加空格了。所以,我的思路是通过脚本改变文本的letter-spacing来实现文本两端分散对齐。
重点是算法:
首先我们看下面图
问题
四行,汉字的个数分别是 2、2、4、3
我们想要达到B的效果只需要 其他几个长度都与最长的4个汉字保持一致,这里我们要通过增加其他行的间隙,我们使用em单位来实现。
很显然,我们给第1-2行分别增加2em的letter-spacing来对齐;给第四行增加多少em才能对齐呢?
计算办法  需要增加的空隙长度=(4-3)/2 也就是 (最大文本个数-当前文本个数)/(当前文本个数-1)
验证一下:
姓名需要增加的letter-spacing值=(4-2)/(2-1)=2 同理性别也是 这样计算
公式就是:当前文本需要增加的长度=(最大长度-当前长度)/(当前长度-1)
这样算法出来就好办了
HTML中代码如下

<p class="t1">姓名</p>
<p class="t1">性别</p>
<p class="t1">兴趣爱好</p>
<p class="t1">座右铭</p>

JQ做了一个脚本,针对指定样式的行实现两端对齐。

function justify_Let(obj){
 	var obj=$(obj);
    var lengths=[];
    obj.each(function(){
    	lengths.push($(this).text().length);

    });
    //var smax=Math.max(lengths);
    if(lengths.length==0){return;}
    for(var i=0,smax=lengths[0],len=lengths.length;i<len;i++){
    	if(lengths[i]>smax){
    		smax=lengths[i];
    	}
    }

    for(var i=0,len=lengths.length;i<len;i++){
    	var currlen=lengths[i];
    	if(currlen==smax){continue;}
    	obj.eq(i).css({"letter-spacing": ((smax-currlen)/(currlen-1))+"em"});
    }

html页面调用办法

<script type="text/javascript">// <![CDATA[
justify_Let(".t1")
// ]]></script>

这种办法处理起来有好处的
优点:
1、无需增加多余的空格或者空字符或者空行
2、对动态添加的文本同样生效
3、对用户输入的文本也同样适用
4、无论多少行数都会自动两端对齐

缺点:
1、需要使用js和jq脚本实现,增加了一个脚本的请求。
2、目前只能支持每行都是中文字符或者每行都是英文,因为计算办法是文本长度。
3、多行大小写同时存在的情况也还没能实现兼容。

原创文章,转载请注明出处。欢迎转载。

阅读 4,160 评论 0 阅读全文

C​S​S​定​位​规​则​之​B​F​C

1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS

2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。
也就是说,如果一个元素符合了成为BFC的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC),是一个隔离了的独立容器。
在 CSS3 中,BFC 叫做 Flow Root。
2. 形成BFC的条件(符合以下任一条件即可):
1) float的值不为none; 2) overflow的值不为visible;
3) display的值为 table-cell、table-caption和inline-block之一; 4) position的值不为 static或 relative中的任何一个; 3. BFC常见作用
1) 包含浮动元素
BFC会根据子元素的情况自适应高度,这个特性是对父元素使用overflow:hidden/auto/scroll、float:left/right样式可以闭合浮动的原理。
此外网上有资料说使用display:table可以隐式触发table-cell/table-caption,来创建BFC。

阅读 759 评论 0 阅读全文

HTML标签的SEO权重排名

  HTML标签权重分值排列

  内部链接文字:10分

  标题title:10分

  域名:7分

  H1,H2字号标题:5分

  每段首句:5分

  路径或文件名:4分

  相似度(关键词堆积):4分

  每句开头:1.5分

  加粗或斜体:1分

  文本用法(内容):1分

  title属性:1分 (注意不是title》, 是title属性, 比如a href=… title=”)

  alt标记:0.5分

  Meta描述(Description属性):0.5分

  Meta关键词(Keywords属性):0.05分

  SEO优化

  1、 静态页面

  将信息页面和频道、网站首页改为静态页面,有利于搜索引擎更快更好的收录。

  2、 页面标题(Page Title)的关键词优化

  必须列出信息的标题、网站的名称以及相关关键字。

  3、 Meta标签的优化(过去搜索引擎优化的重要手法,现在已经不是关键因素,但仍不可忽略)

  主要包括:Meta description、Meta keywords的设置。关键字密度要适度,通常为2%-8%,也就是说你的关键字必须在页面中出现若干次,或者在搜索引擎允许的范围内,要避免堆砌关键字。

  4、针对Google制作Sitemaps

  Google的sitemaps是对原来robots.txt的扩展,它使用 XML格式来记录整个网站的信息并供Google读取,使搜索引擎能更快更全面的收录网站的内容。  可以使用Google提供的Sitemap生成器制作(需要技术人员制作):  https://www.google.com/webmasters/tools/dashboard?hl=zh-CN也可以由技术部人员制作更全面的Sitemaps。

  5、 图片的关键词优化

  图片的替代关键词也不要忽略,其另外一方面的作用是,当图片不能显示的时候,可以给访问者一个替代解释语句。

  6、 避免表格的嵌套

  表格嵌套太多,搜索引擎通常只读取3个

  7、 采用web标准进行网站重构

  尽量使网站的代码符合W3C的HTML 4.0或XHTML 1.0规范。通过XML+CSS技术进行网站重构,减少不表格及冗余代码,提高网站页面的扩展性,兼容性,可以使更多浏览器支持。

  8、 网站结构的扁平化规划

  目录和内容结构最好不要超过3层,如果有超过三层的,最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母

  9、 页面容量的合理化

  合理的页面容量会提升网页的显示速度,增加对搜索引擎蜘蛛程序的友好度。同时建议js脚本和css脚本尽量用链接文件

  10、外部文件策略

  把javascript文件和css文件分别放在js和css外部文件中。这样做的好处是把重要的页面内容放到页面顶部,同时能缩小文件大小。有利于搜索引擎快速准确地抓取页面重要内容。其他的字体(FONT)和格式化标签也尽量少用,建议采用CSS定义。

  11、外部链接

  尽可能多地让其他跟你主题相关的网站链接本站,同时尽量同PR值更高的网站进行相互链接。如果网站提供与主题相关的导出链接,被搜索引擎认为有丰富的与主题相关的内容,也有利于排名,例如各类招商网站、投融资网站的概念。另外避免链接不顾质量的大面积撒网,对搜索引擎而言宁少要精。

  12、网站地图

  网站自身的网站地图是搜索引擎更全面索引收录你的网站的重要因素。建议制作基于文本的网站地图,内含网站所有栏目、子栏目。网站地图的三大因素:文本、链接、关键词,都极其有利于搜索引擎抓取主要页面内容。特别是动态生成目录网站尤其需要 创建网站地图。

  13、图像热点

  除AltaVista、Google明确支持图像热点链接外,其他引擎暂不支持。当“蜘蛛” 程序遇到这种结构时,就会无法辨别。因此尽量不要设置图像热点(Image Map)链接。

  14、FLASH应用

  FLASH由于不含文字信息,应尽量用于功能展示和广告,少用于网站栏目和页面。

  15、JS脚本

  在不支持JS脚步的浏览器里 NOSCRIPT》 标签会起到重要提示作用,对搜索引擎的Spider搜索也会有帮助。

  16、Frame框架

  Frame标签会被搜索忽略,尽量少用,如果一定要用,则应正确使用Noframe标签, 在Noframe》/Noframe》区域中包含指向frame页的链接或带有关键词的描述文本,同 时在框架以外的区域也出现关键词文本。

  17、资讯的内部链接

  有助提高网站排名和PR值,例如相关资讯、推荐资讯等。

阅读 4,490 评论 0 阅读全文

将要告别的 HasLayout

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。
在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误,就是源于 haslayout。如果它设置成了true,它就不得不去渲染它自己,因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词,如果haslayout没有被设置成true,那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。
当一个元素有一个布局时,它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说,这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。因此,一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”,或者说一个元素“has layout” 的时候,我们的意思是指它的微软专有属性 hasLayout 被设为了 true。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout的元素。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout,在 IE Developer Toolbar 下,拥有 haslayout的元素,通常显示为“haslayout = -1”。
负责组织自身内容的元素将默认有一个布局,主要包括以下元素(不完全列表):
* body and html
* table, tr, th, td
* img
* hr
* input, button, file, select, textarea, fieldset
* marquee
* frameset, frame, iframe
* objects, applets, embed
对于并非所有的元素都默认有布局,微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局,会对性能和内存使用上产生有害的影响。
如何激发 haslayout?
大部分的 IE 显示错误,都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout,使其“拥有布局”。如下所示,通过设置以下 css 属性即可。
* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)
Internet Explorer 7 还有一些额外的属性(不完全列表):
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed
其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性,目前还未被浏览器广泛支持。
对于内联元素(默认即为内联的元素,如 span,或 display:inline; 的元素),
width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 height 属性,所以设置 width 或 height不能在此种情况下令该元素具有 layout。
zoom 总是可以触发 hasLayout,但是在 IE5.0 中不支持。
具有“layout” 的元素如果同时 display: inline ,那么它的行为就和标准中所说的 inline-block很类似了:在段落中和普通文字一样在水平方向和连续排列,受 vertical-align影响,并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题,因为在别的浏览器中display: inline 就是内联,不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。
haslayout 问题的调试与解决
当网页在 IE 中有异常表现时,可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下,它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失,那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性,其次再考虑其他属性。
对 IE6 及更早版本来说,常用的方法被称为霍莉破解(Holly hack),即设定这个元素的高度为 1%(height:1%;)。需要注意的是,当这个元素的 overflow 属性被设置为 visible 时,这个方法就失效了。或者使用 IE的条件注释。
对 IE7 来说,最好的方法是设置元素的最小高度为 0 (min-height:0;)。
haslayout 问题引起的常见 bug
IE6 及更低版本的双空白边浮动 bug
bug 修复: display:inline;
IE5-6/win 的 3 像素偏移 bug
bug 修复: _height:1%;
IE6 的躲躲猫(peek-a-boo) bug
bug 修复: _height:1%;
IE6/7负margin隐藏Bug:
bug 修复:去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
需要注意的是,hasLayout属性是微软特有的过时属性,在IE8、IE9中,hasLayout属性已经被废弃。上文中的InternetExplorer都是指IE7、IE6及以下版本。
阅读 802 评论 0 阅读全文

CSS3 RGBA

RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是什么呢?说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说,大家就跟着我一起往下看吧。

语法:

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间

取值:

<length> :Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;

<percentage> :Saturation(饱和度)。 取值为0%到100%之间的值;

<percentage> :Lightness(亮度)。 取值为0%到100%之间的值;

<opacity> :alpha(透明度)。 取值在0到1之间;

说明:

RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 – 255。百分数值的取值范围为:0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。

浏览器的兼容性:

如果庞统说rgba是制作透明色(透明背景色、透明边框色、透明前景色等),大家不由会想起opacity 这个东西。他在我们CSS2中制作背景色通常用到,可是要用他来制作边框色或都说前景色的话,那他就只能在边上站着了,有心无力呀。

现在我们先来看一个rgba和opacity的对比实例

HTML代码:

<div>
  <p>Opacity效果</p>
  <ul>
   <li>100%</li>
   <li>80%</li>
   <li>60%</li>
   <li>40%</li>
   <li>20%</li>
   <li>0</li>
  </ul>
  <p>CSS3的RGBA效果</p>
  <ul>
   <li>1</li>
   <li>0.8</li>
   <li>0.6</li>
   <li>0.4</li>
   <li>0.2</li>
   <li>0</li>
 </ul>
</div>

 

我们分别给这两上ul中的li应用相关样式, 在li.opacity中我用使用CSS2中的opacity而在li.rgba中我们使用CSS3的rgba新属性

Opacity样式

  li.opacity{
    float: left;
    width: 50px;
    height: 50px;
  }
  li.opacity1 {
     background: rgb(255,255,0);
     opacity: 1;
     filter:alpha(opaity=100);
  }
  li.opacity2 {
    background: rgb(255,255,0);
    opacity: 0.8;
    filter:alpha(opaity=80);
  }
  li.opacity3 {
    background: rgb(255,255,0);
    opacity: 0.6;
    filter:alpha(opaity=60);
  }
  li.opacity4 {
    background: rgb(255,255,0);
    opacity: 0.4;
    filter:alpha(opaity=40);
  }
  li.opacity5 {
    background: rgb(255,255,0);
    opacity: 0.2;
    filter:alpha(opaity=20);
  }
  li.opacity6 {
    background: rgb(255,255,0);
    opacity: 0;
    filter:alpha(opaity=0);
  }

 

RGBA样式

  li.rgba {
    float: left;
    width: 50px;
    height: 50px;
  }
  li.rgba1 {
    background: rgba(255,255,0,1);
  }
  li.rgba2 {
    background: rgba(255,255,0,0.8);
  }
  li.rgba3 {
    background: rgba(255,255,0,0.6);
  }
  li.rgba4 {
    background: rgba(255,255,0,0.4);
  }
  li.rgba5 {
    background: rgba(255,255,0,0.2);
  }
  li.rgba6 {
    background: rgba(255,255,0,0);
  }

 

我们来看看其效果:

效果中我们可以看出,他们相同之处就是背景色完全是一样的,但区别就是一直让大家觉得头痛的问题,那就是opacity后代元素会随着一起具有透明性,所以我们Opacity中的字随着透明值下降越来越看不清楚,而RGBA不具有这样的问题,但是其支持的浏览器中有一个占在大市场份额的IE不支持,这也就是让我们需要去做兼容,(听到兼容二字大家是不是特烦,我也是的)希望IE早点能实现。

在CSS2中Opacity能实现透明,而且大多主流浏览器都支持,虽然IE下有点麻烦

/* IE5 - 7 */
filter: alpha(opacity=80);
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* Everyone else */
opacity: 0.8;

 

那为什么不使用opacity而要使用rgba呢

从我们上面的实例中我们也知道,RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。

在RGBA还没有出世前,我们都是使用opacity来做透明,但这里存在一个问题,就是我们在父元素中使用了opacity,那么其垢代元素都会受其影响,我想这个问题大家都有碰到过,为了解决这样的问题我们需要增加一个空的div来专门放置使用透明的背景,然后通过使用绝对定位来实现我们需要的结果。为了更好的理解我们在这里来看一个使用opacity的实例。首先来看html

<div>
  <div>
    <div>
       <p>我是bg的后代元素,我不想我的前景有任何透明!怎么办?</p>
     </div>
  </div>
</div>

 

先给他们附上相应的样式

  .bg-box {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    background: red;
    position: relative;
  }
 .bg {
    background: black;
    opacity: 0.5;
    filter:alpha(opaity=50);
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .bg p {
    padding: 5px 10px;
    color: white;
  }

 

效果:

从效果中我们明显的看出,这里和我们前面那个例子一样,名叫bg的div中设置了opacity,造成其后代元素段落P的前景色也随着变了。如果需要解决这样的问题,在不使用别的新技术下,也就是说坚持使用opacity.那么我们就需要添加一个空的层,在这个地方应用透明背景层首先来看看改变一下html 结构吧

<div>
  <div>  </div>
   <div>
      <p>我是bg的后代元素,我不想我的前景有任何透明!怎么办?</p>
    </div>
</div>

 

现在我们需要提把bg-content和bg层重合起来,换句话说就是把透明背景层单独放在另外一个div,然后把内容层和背景层重叠。换而言之,我们需要在bg这个div上设置透明色,而在bg-content这个div上放置内容,并且都使用定位,保证bg这个div在bg-content这个div下面。具体看看其CSS的变化:

 .bg-box {
   width: 200px;
   height: 100px;
   border: 1px solid #ccc;
   background: red;
   position: relative;
 }
 .bg {
   background: black;
   opacity: 0.5;
   filter:alpha(opaity=50);
   width: 100%;
   height: 50px;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 1;
  }
  .bg-content {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
  }
  .bg-content p {
     padding: 5px 10px;
     color: white;
  }

 

首先我们在html中把bg这个div分离出来了,让他和bg-content这个div变成兄弟关系,然后通过CSS把他们都定位在同一位置,只是bg放在了bg-content的下面(z-index)控制,另外在bg的div上应用了透明。看看这样一来我们有什么变化,效果如下:

跟没有处理之前相比是不是完美多了。可是这样弄就是有一点麻烦,现在CSS3的RGBA完全可以帮大家解决这样的问题了,接着我们在看一个用RGBA制作的效果吧,看看他是不是完全一样的。

HTML代码:

<div>
   <div>
      <p>我是bg的后代元素,我不想我的前景有任何透明!怎么办?</p>
    </div>
</div>

 

我们只要在bg-content中应用一个background:rgba();就能有上面那种效果了,具体看看代码吧:

  .bg-box {
     width: 200px;
     height: 100px;
     border: 1px solid #ccc;
     background: red;
     position: relative;
  }
  .bg-content {
     width: 100%;
     height: 50px;
     position: absolute;
     bottom: 0;
     left: 0;
     background: rgba(0, 0, 0,0.5);
  }
  .bg-content p{
     padding: 5px 10px;
     color: white;
  }

 

效果:

从效果的对比中我们可以明显的看出,和opacity做出的效果是完全一样的。但是这里有一个问题是我们讨厌的IE(除IE9以外)都不支持CSS3的RGBA属性。那么这样我们在IE下不是什么都没有吗?回答是肯定的,虽然IE不支持但我们不能什么都不给他呀,这样一来我们就碰到一个新名词”fallback color“,它的意思是我给IE备份一个色,在不支持RGBA的情况下,我照样给他一个色,而对rgba支持的浏览器并不会带来影响,那我们一起看看这个fallback color怎么用吧。其实很简单,我们可以给其制作一张图片或都只给其加一个色,我们这些就只加一个色吧拿前面的实例来说吧,我们只要把bg-content的样式换一下

  .bg-content {
     width: 100%;
     height: 50px;
     position: absolute;
     bottom: 0;
     left: 0;
     background: rgb(0,0,0); /*The Fallback color*/
     background: rgba(0, 0, 0,0.5);
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
   }

 :

这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。如果你和我一样不知道怎么转换这个值,你可以采用下面这个工具:

CSS背景颜色属性值转换 有关于这个工具的使用大家可以点击志哥的《使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果

关于RGBA-IE-FALLBACK更多的知识可点击这里进入.

综合上面的所述,我们规纳一个RGBA在实际应用中的模式

.rgba {
  background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/
  background: rgba(0, 0, 0,0.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
 }

 

上面代码中的颜色值可以根据自己的需求修改,此处只是一个代表性的值。

我们前面简单的带过一句,我们rgba不单可以应用在background上,我们还可以应用在只要设置了颜色的地方都可以使用,我在这里简单的说一下几种:

第一种:前景色color

HTML

  <p>用rgba改变我的字体颜色</p>
  <p>用rgba改变我的字体颜色</p>

 

CSS样式:

.norgba-color {
  color: rgb(255, 0, 0);
}
.rgba-color {
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0,0.5);
}

 

效果:

第二种边框色border-color

HTML

<p>用rgba改变我的边框颜色</p>
<p>用rgba改变我的边框颜色</p>

 

CSS样式:

.norgba-border-color {
   border:5px solid rgb(255,0,0);
   width: 200px;
}
.rgba-border-color {
   border:5px solid rgb(255,0,0);
   border:5px solid rgba(255,0,0,0.5);
   width: 200px;
}

 

效果:

第三种:字体的阴影色text-shadow

HTML:

 <p>用rgba改变我的字体阴影颜色</p>
 <p>用rgba改变我的字体阴影颜色</p>

 

CSS:

 .norgba-text-shadow {
   text-shadow : 0 2px 1px rgb(255,0,0);
 }
 .rgba-text-shadow {
   text-shadow : 0 2px 1px rgb(255,0,0);
   text-shadow : 0 2px 1px rgba(255,0,0,0.3);
 }

 

效果:

第四种改变边框阴影色

HTML:

 <p>用rgba改变我的边框阴影颜色</p>
 <p>用rgba改变我的边框阴影颜色</p>

 

CSS:

  .norgba-box-shadow {
     border: 5px solid green;
     width: 200px;
     -webkit-box-shadow: 0 2px 2px rgb(255,0,0);
     -moz-box-shadow: 0 2px 2px rgb(255,0,0);
     box-shadow: 0 2px 2px rgb(255,0,0);
  }
  .rgba-box-shadow {
     border: 5px solid green;
     width: 200px;
     -webkit-box-shadow: 0 2px 2px rgba(255,0,0,0.6);
     -moz-box-shadow: 0 2px 2px rgba(255,0,0,0.6);
     box-shadow: 0 2px 2px rgba(255,0,0,0.6);
  }

 

效果:

最后一种就是渐变颜色,关于这个我就不在多说了,因为我们前面的CSS Gradient有说过个例子,感兴趣的朋友可以到这里去看看。

阅读 6,664 评论 0 阅读全文

js试题

1、HTTP协议的状态消息都有哪些?http://www.cnblogs.com/TankXiao/archive/2013/01/08/2818542.html

2、AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

AJAX是一种异步请求交互技术。( 语文不好,我觉得这样应该差不多了)

AJAX的交互模型 客户端请求-提交服务器-处理信息-返回客户端-刷新区域

跨域还没有接触过……

3、同步和异步的区别?

大体上讲就是B/S模式和AJAX的区别吧。囵吞(错字?)网页刷新区域和时间的区别吧。

4、JavaScript封装(能不能不问这种理论问题,非常的不会答。)

简单点说吧,就是让一段代码可以重复的调用,并且通过所传值返回不同的值!

5、JavaScript继承有哪两种形式形式(擦,这么大一个问题)

对象冒充和圆形方式

对象冒充:有函数A 函数B  函数B中调用函数A

例:

  1.  
    1. function A(name){ 
    2. this.name = name; 
    3. this.sayHello = function(){alert(this.name+” say Hello!”);}; 
    4. function B(name,id){ 
    5. this.temp = A; 
    6. this.temp(name);        //相当于new A(); 
    7.     delete this.temp;        //防止在以后通过temp引用覆盖超类A的属性和方法 
    8.      this.id = id; 
    9. this.checkId = function(ID){alert(this.id==ID)}; 

圆形方式:

例:有函数A 函数B 函数B通过prototype或某种方式来复制A的属性或方法

    1. functionA(){ 
    2.   this.name = “Mike”; 
    3.   this.sayGoodbye = function(){alert(“GoodBye!”);}; 
    4. A.prototype.sayHello = function(){alert(”Hello!”);}; 
    5. function B(){} 
    6. B.prototype = new Person();

 

6.javascript 闭包

读取其他函数内部变量的函数(关键是变量的继承,理解全局变量和局部变量)

7、以下代码点击<p> 会输出什么?为什么?能大概说明白的话继续问能想出几种

  1.  
    1. <!DOCTYPE HTML> 
    2. <html> 
    3. <head> 
    4. <meta charset=”utf-8″ /> 
    5. <title>闭包演示</title> 
    6. <style type=”text/css”> 
    7.     p {background:gold;}  
    8. </style> 
    9. <script type=”text/javascript”>   
    10. function init() {      
    11.     var pAry = document.getElementsByTagName(“p”);      
    12.     for( var i=0; i<pAry.length; i++ ) {      
    13.          pAry[i].onclick = function() {      
    14.          alert(i);      
    15.     }   
    16.   }  
    17. }  
    18. </script>   
    19. </head>   
    20. <body onload=”init();”>   
    21. <p>产品 0</p>   
    22. <p>产品 1</p>   
    23. <p>产品 2</p>   
    24. <p>产品 3</p>   
    25. <p>产品 4</p>   
    26. </body>   
    27. </html>  

   全部都弹出5,因为弹出i时,i已经被保存在内存中,他的值是for结束是最后的值所以是5。问题是闭包产生的,解决方法就是解决闭包,用(function(){})()可以消除闭包

具体可以这样写

  1.  
    1. function init() {      
    2.     var pAry = document.getElementsByTagName(“p”);      
    3.     for( var i=0; i<pAry.length; i++ ) {
    4.    (function(i) {pAry[i].onclick = function() { alert(i);}}(i))
    5.   }  
    6. }  

 

8、在JS中this关键字的使用场合和用法(如在构造函数中、setTimeout中等)

  this一般使用在构造函数中, 用来引用对象。

9、DOM操作 – 怎样添加、移除、移动、复制、创建和查找节点(这个问题真心是基础题,一般不会问)。

添加:appendChild()  移除:removeChild() 复制:replaceChild()  创建 createDocumentFragment()  查找:getElementsByTagName().

10、简述下cookie的操作,还有cookie的属性都知道哪些!

创建-保存-读取-判断-显示

cookie属性:常用的名称,值,过期时间。

11.IE与FF的JS兼容性都知道哪些。

变量名与ID重复,event的x和y属性,对BODY的解析时间以及input的属性修改状态 innerHTML 和innerText等待。

阅读 5,272 评论 0 阅读全文

记录工作生活点滴。

返回
顶部