清泉逐流

做着努力,等待幸福到来
» 日志

五大主流浏览器 CSS3 和 HTML5 兼容性大比拼

时间 : 2014-10-07 00:14 标签 : HTML5  CSS  

各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准。就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已经接近完成,如果进展顺利,HTML5 将在 2012 年正式成为国际标准。

  当然,即使标准正式制定了,现代浏览器要普及到大部分用户也是需要一个相当漫长的过程。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,需要对各个浏览器对这

查看全文 »

让IE兼容background-size的方法_background-size ie下使用

时间 : 2014-07-21 20:28 标签 : CSS  HTML  前端  

ie6,ie7,ie8下对css background-size并不支持,那么如何在ie下兼容background-size呢?

在ie下把图片完整的居中显示在一定范围内

在下面给出解决代码:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>让IE兼容background-size的方法</ti

查看全文 »

让层(div)覆盖在 Flash 之上

时间 : 2014-06-30 23:24 标签 : Flash  HTML  CSS  

在项目中遇到 Flash 链接被浏览器过滤的情况。对 Actionscript 语言没什么研究,所以用 HTML 的变通方式来快速解决此类问题。

原理很简单,就是让div标签定位于 Flash 之上,然后再在div中增加所需的跳转链接<a>。

看看代码:

<div class="flash"> <div style="position:absolute; width:960px; height:150px;

查看全文 »

css透明度的设置 (兼容所有浏览器)

时间 : 2012-12-02 10:24 标签 : CSS  

  UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.

  Here is what each of those CSS properties is for:

  opacity: 0.5; This is the “most important” one because it is the current standard 

查看全文 »

DIV+CSS规范命名大全集合

时间 : 2012-08-24 20:40 标签 : CSS  

  网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下: 

  

  页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法

  登录条:loginBar         标志:logo                侧栏:sideBar 

  广告:banner              导航:nav         &nb

查看全文 »

white-space、word-wrap、word-break用法

时间 : 2012-08-13 15:51 标签 : CSS  

white-space

  定义和用法

  white-space 属性设置如何处理元素内的空白。

  这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

  默认值:normal

  继承性:yes

  版本:CSS1

  JavaScript 语法:object.style.whiteSpace="pre"

  实例

  规定段落中的文本不进行换行:

  p{white-space: nowrap  }

  浏览器支持

  所有浏览器都支持 white-space 属性。

  注释:任何的版本的 Internet Explorer (包括 IE8)都不

查看全文 »

ie6的bug绝对定义(position:absolute)的相邻元素margin-top失效

时间 : 2012-08-15 14:24 标签 : IE  CSS  

  昨天发现了一个ie6的bug,绝对定义(position:absolute)的相邻元素margin-top竟然会失效;

  这里有几个条件:  

  相邻元素是有width属性的,如果去掉width属性,margin-top又会生效,增加相邻元素浮动,margin-top也会又会生效;  

  如果没有复杂的背景什么的可以使用padding-top替换margin-top;  

  还可应在相邻元素间插入一个空标签的方法:

  <div style="position: absolute; width: 500px; top: 0; left: 0; height: 30px; background-color: #666;">此处显示新 Div 标签的内容</div>

  <!--[if IE 6]>

查看全文 »

CSS中使用Google字体(Google Font)

时间 : 2012-06-27 15:41 标签 : CSS  Google  

  不需要任何的编码,你所要做的只是添加一个特定的CSS到HTML页面上,然后把字体关联到这个CSS样式。

  使用Google字体API只需要两个步骤:

1.添加一个样式表来请求网络字体

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

  要请求多个字体集时,要用竖线(|)来隔开名字。

  请求多种字体,可以允许您在您的页面上使用所有这些字体。(但是您也不要太离谱,大多数页面不需要非常多的字体,而且请求很多字体会使您的页面加载变慢。)

  字体API默认情况下提供了所请求字体的普通版本。要请求其它的样式或大小,在字体的名字后面加一个冒号(:),跟随

查看全文 »

css可以放在中吗?

时间 : 2012-05-19 14:16 标签 : CSS  

  我们在技术上来讲,你可以将样式您想要的位置。只要有放在<style></style>的标签中就行了,不过, HTML规范的建议,将他们放在文件头标记。也就是说规范的css样式都是要放在<head></head>中。

  主要的好处是,您的网页加载速度似乎更快一些。做网站的时候会考虑到这个问题,就是让浏览者(用户)打开网站的时候快一些 不用一直等。

  标准的css有三种方式 连接形式 head区内嵌

  (1)使用Embed(嵌入样式单)排版样式:

  即将CSS代码直接插入每个页面的HTML的<head>区,就象前几节看到的。使用<style>...</style>标签。例如:

  <style type="text/css">

  <!--

  h2 { font-family: "宋体";

查看全文 »

border-radius(圆角)兼容显示

时间 : 2012-05-15 22:51 标签 : CSS  

  Border-radius 允许你使用CSS创建圆角而不需要使用图片或者是JavaScript。在CSS3之前,要圆角效果,肯定会用到图片,这在网络不好的情况下,会出现圆角显示出现问题的结果,本来时想做一个好的用户体验,结果却是背道而驰。

  这里有圆角的相关例子:

  http://shapeshed.com/examples/border-radius/

  相信有基础的人一看就知道是怎么回事,也不用多说废话了。

  这里要说的是兼容显示的问题。

  首先这里有个显示的例子:

  http://www.htmlremix.com/css/curved-corner-border-radius-cross-

owser

  说明了兼容性问题。

  我们要做的就是下载border-radi

查看全文 »
» 日志标签