您当前的位置 » 主页 > 文章中心 > WEB标准 >
2272013-01-31 21:27

li空白间距

这个Bug也是针对于li的,在IE下会无端增中li与li之间的垂直距离,别的先不说,先来看下面的代码 HTML Markup ul li a href = # Link1 / a / li li a href = # Link2 / a / li li a href = # Link3 / a / li / ul CSS Code ul{ margin : 0 ; padding : 0 ; list-style : none ; } lia{ background : #95CFEF ; display : block ; } 同样我们来看浏览器下的对比图 虽然在IE6存在这样的烦人的事情,不过还是值得庆幸的,我们只需在写代码时稍加注意,就可以轻松的避免这样的Bug在你的页面中出现 方法一: 最简单的办法就是给a标签显式的定义一个宽度,用声明宽度的方法来触发IE浏览器的hasLayout,当然你也可以显式的定义一个高度,同样也可以解决,代码如下: lia{ widt

发布: Martin | 分类: WEB标准 | 评论: 7273 | 来源: 未知
1862013-01-31 21:24

列表li的楼梯Bug

li在IE6下呈楼梯状的效果,也可以算是IE6的一个经典Bug了吧。他通常发生在li中放置了一些元素内容(比如说a)而且对其进行浮动,但li本身不浮动,此时在IE下就会有楼梯上了,具体先看下面的代码: HTML Markup ul liahref= # /a/li liahref= # /a/li liahref= # /a/li /ul CSS Code ul{ list-style : none ; } ullia{ display : block ; width : 130px ; height : 30px ; text-align : center ; color : #fff ; float : left ; background : #95CFEF ; border : solid 1px #36F ; margin : 30px 5px ; } 我们一起来看浏览器下的效果对比 解决这个Bug也有俩种方法,我们一起来看看 修复方法一:解决这个bug最简单的方法,只需要在li元素中也加上一个浮动,所以你只需这样做就能解决了 ulli{

发布: Martin | 分类: WEB标准 | 评论: 0 | 来源: 未知
2102013-01-31 21:16

设置元素的最小高度和最小宽度

在Web页面设计中,有时为了达到元素的的统一渲染的风格,我们有时需要使用min-height和min-width来控制元素的最小高度和最小宽度值。在别的浏览器都运行正常,可唯独这个IE6不识别人家。因此在使用min-height和min-width时,为了达到效果一致,我们要针对IE6另作处理。其中min-height解决起来相当简单,但是min-width在IE6下要顺利解决就有点麻烦(关于IE6下的min-width放到后面一起探讨)这里我们主要来看min-height的解决办法。 采用!important方法修复 第一种方法采用的是!important来解决,让min-height在IE6下能正常工作,具体代码如下: .demo{ min-height : 100px ; height : auto !important ; /*现代浏览器下,内容高度超过100px时自动

发布: Martin | 分类: WEB标准 | 评论: 0 | 来源: 未知
2042013-01-31 21:12

浮动元素的双倍Margin的Bug

浮动元素的双倍Margin的Bug是IE6以及其以下版本的一个经典Bug了,触发这个Bug的产生是给元素设置了float并且同时和float同一方向设置了margin值,此时在IE6(IE6以下版本我们飘过不理了)就会产一个双倍margin值的Bug。我们先来看一段代码: .demo { background: #95cfef; border: 1px solid #36f; float: left; height: 100px; margin: 30px 0 0 30px; width: 300px; } 效果 修复方法 修复这个立王Bug的方法很简单,只需要改变浮动元素的显示风格,也就是说在浮动元素中增加一个display:inline属性,这样就可以轻松的解决浮动元素的双倍Margin的Bug。下面是修改后的代码: .demo { background: #95cfef; border: 1px solid #36f; display: inline; float: left; height: 100px; margin:

发布: Martin | 分类: WEB标准 | 评论: 0 | 来源: 未知
842013-01-31 20:54

克服Box Model的Bug

Box Model的Bug常发生在同时给一个元素设置了宽度和高度的时候还设置了元素的padding或border值,此时将改变元素的真正大小。换个形像一点的例子,我们进行行一个960px的布局,里面左边栏是220px的宽度,主内容是720px的宽度,他们之间是20px的间距,此时设计需要在左边栏有一个10px左右内距,如果我们按下面的代码写就会产生一个Bug。 Html markup div id=wrap div id=leftleft/div div id=contentmain/div /div CSS Code #wrap { width: 960px; background: #66CCFF } #left { background: #FFCC99; float: left; padding: 0 10px; width: 220px; } #right { background: #9933CC; float: right; width: 720px; } 此时div#left将改变了其实际的宽度,我们来看下面的一个图,上图是没有padd

发布: Martin | 分类: WEB标准 | 评论: 0 | 来源: 未知
1052012-02-02 17:24

2011年使用率增长最快的十大Web技术

W3techs网站评出了2011年十大使用增速最快的Web技术,本文对其进行编译供各位参考。注意,该评选结果是在针对前100万流行网站(根据Alexa值统计)进行调查统计出的,点击这里查看详细统计信息。 以下是2011年前100万流行网站中使用率增长最多的10大Web技术。 1. jQuery j

发布: Martin | 分类: WEB标准 | 评论: 0 | 来源: 站长网
1552012-02-02 17:22

网站设计分析:注意力与交互设计

以人为本的设计,不能不考虑普通人在一般任务执行中的耐受力问题。因为人的精力有限,再强大的需求,无力去完成也是枉然。精力的有效转化率,是衡量交互设计品质的重点。 1.公式 精力一般由脑力和体力构成。针对互联网产品,脑力居前(非生产类网站的体力消耗很低)。而

发布: Martin | 分类: WEB标准 | 评论: 0 | 来源: 站长网
4752010-11-21 11:09

JS实现文本不间断上线滚动效果

其实这种js控制文本上下不间断滚动的例子不少,但是常常找的不是想要的。不是代码过于冗余就是效果不尽人意,再有就是每次用到都要去找,这也是鄙人缺乏条理性的一个显著特征。今天找到一个代码简洁,效果也不错的一个特效,所以就发上来分享加备份~ 首先是css代码: style type = text/css #marquee,#marqueeli{padding:0px;margin:0px;} #marquee{position:relative;list-style:none;height:150px;width:210px;padding-left:5px;overflow:hidden;border:10pxsolid#eee;} #marqueeli{position:absolute;font-size:12px;} #marqueea{display:block;color:#999999;text-decoration:none;} / style 其次是js代码: script type = text/javascript var Marquee = function (id){ try{document.execCommand(BackgroundImageCache,

发布: Martin | 分类: WEB标准 | 评论: 0 | 来源: 未知
6122010-09-01 09:40

苹果将首次采用HTML5直播发布会

苹果今天宣布,将第一次采用HTML5内置的HTTP Live流媒体视频直播最新音乐产品发布会,这意味着可以用苹果iOS 3以上版本和Mac OS X Snow Leopard观看(当然所有支持HTML5的 浏览器 均可),发布会开始时间为美东部时间下午一点,Apple.com将全程直播。 本次发布会直播是一次HTML5大负荷流媒体承载能力的一次练兵,用户不需要安装任何插件即可以观看。苹果一直对HTML5持支持态度,以至于让Adobe的流媒体方案至今无法进入其移动设备。 声明:CSDN登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
3362010-07-29 09:09

CSS3 Media Queries:移动Web的完美开端

移动时代,是任何 Web 设计 与 开发 者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有完美解决方案的问题,直到有了 CSS3。 CSS3 的 Media Queries 在 CSS2 时代,如果你曾经为你的网站设计过打印版 CSS,就会明白 CSS3 Media Queries 的作用,不过,CSS3 的 Media Queries 比CSS2 的Media Type 更实用,事实上,CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下 数据 : 浏览器 窗口的宽和高设备的宽和高设备的手持方向,横向还是竖向分辨率 如果 用户 有一个支

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
3772010-07-27 22:19

HTML5标准的另一种死胡同

HTML5标准在各个 浏览器 间的实现并不一致,各个公司间的妥协可能会需要很长的时间。但在 web 数据库 这一点上,HTML5标准却走到了另一个极端,各家的实现出奇的一致,毫无例外的都选择了Sqlite。这可不是一件好事,委员会认为标准的制定过程中应有多个参考实现,而目前的web数据库几乎是以Sqlite的实现来定义标准,这是不可接受的。现在,委员会希望有另一种实现以帮助标准的推进。但即使新的实现被 开发 出来,又有哪个浏览器愿意抛弃Sqlite改用新的实现? 一直全力推动HTML5的苹果会怎么做呢?是挺身而出开发一个新的实现?还是力压委员会强迫他们接受Sqlite作为标准?大家拭目以待吧。

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
7682010-07-26 15:28

UI 设计师的盛宴:Web UI 设计资源大系

每个 Web 设计 师 都在 UI 设计上费尽了心血,即使这样, 资源 的匮乏,视野的狭窄,也常常让他们的呕心沥血之作并不为人看好,事实上,UI 设计并不需要闭门造车,很多 UI 元素是通用的。本文收集了 20 套非常前端的 UI 元素库,它们多数是可以后期修改的 PSD 或 SVG 版。 Modern Web UI Set (.psd) 这套 UI 库包括了从按钮,到渐变,到文字各种 UI 元素,非常整齐地存放在不同目录下,由于是 PSD 矢量分格式,里面的任何元素都是可以修改的。 Massive Web UI Button Set (.psd) 这套 UI 元素库包含3种风格,水晶,渐变色,单色,渐变色还包含7种颜色组合。 Web UI Element Pack (.psd) 包含 19 个 UI 元素,从加载进度条,到按钮,

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
8032010-07-14 10:55

HTML5将重塑Web世界

HTML5将改变 互联网 的方方面面。HTML5可能不会完全取代Flash,但它会 重塑 互联网,使 浏览器 无需借助插件就可以做更多的工作,从位置跟踪、视频播放到把云端的 数据 缓存到本地,最终能使互联网更安全、更高效、更灵活。 Adobe和Apple围绕Flash发生的冲突是今年上半年的一个焦点事件,引起了很多人的关注,其中有不少人因这一事件第一次了解到HTML5的存在。初次了解HTML5的人可能会非常惊讶,HTML5规范早在6年前就开始制定了,如今尽管HTML5规范草案已经非常好,但何时能真正成为标准却仍然不确定。 的确,HTML5规范制定委员会工作进展非常缓慢。因为关于如何改进浏览器和改进 Web 世界 ,不管是浏览

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
4132010-07-08 16:45

css样式名规范命名建议

在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#menubg{}。 (一)常用

发布: admin | 分类: WEB标准 | 评论: 0 | 来源: 未知
3222010-07-06 09:23

Web 设计师的 50 个超便利工具(下)

作为一个 Web 设计 师 并不容易,不仅考虑设计与架构,还要时刻注意各种小细节,设计师的工作被各种各样的问题包围,你需要一套超级 便利 的 工具 帮你解决各种消耗时间和精力 的问题。本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳,这是第二部分。 Kaleido 为你的 代码 创建视觉化标识。来自麻省理工。 Sketchpad 一个强大的在线图像编辑器。难能可贵的是,这是基于 HTML5 的。 Unicode code converter 虽然界面有些乱,但这个工具能把一段文字转换成各种编码形式。 Grid System Generator 另一个网格设计生成器。 ud.com namecheck(强烈推荐) 这个看似简单的工具,可以帮你查询某个名

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
8712010-06-29 09:36

HTML 5将成IE9核心 将向第三方开发者开放

51CTO曾在去年报道过《 微软 涉足HTML5设计工作 IE将以标准为 核心 》的消息,在Apple, Google ,Opera, Mozilla努力推广其HTML5之时,微软也开始采取一种谨慎的态度涉足网页标准。上周四,微软IE浏览器总监Ryan Gavin表示,在明年发布新一代浏览器IE9之后,微软将会重拾与Google Chrome 和Mozilla Firefox 浏览器之间的竞争优势。 自本世纪初IE浏览器的市场份额达到95%之后,IE的份额便开始不断下滑,据最新一期的 互联网 统计报告,IE的全球市场份额不到60%。相反竞争对手Firefox、Chrome、Opera和Safari等 浏览器 分别出现了不同程度的增长,其中Firefox已经拥有接近25%的市场份额。 Ryan Gavin表示,微软新一代浏览器IE9已引起外

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
8362010-06-24 09:22

Google发布HTML 5推广网站HTML5ROCKS

Apple和 Google 现在是两大推广 HTML 5和WebKit的巨头,既然Apple有一个专门推广HTML 5的网站,那Google也不能落后,于是他们祭出了HTML5ROCKS。HTML5ROCKS里目前有9个关于 HTML 5功能的指南,通过“ 代码 练兵场”还能让你插入自己的代码进去实践——很显然 Chrome 对它们的支持是最好的,但Safari也没问题(Google不像Apple那样小气还),对了别忘记被Chrome Frame强行插入的IE也能胜任哦。 ViaChromium Blog谷奥 原文链接:http://www.cnbeta.com/articles/114517.htm

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
2972010-06-10 10:22

IE 9 Beta有望近期发布 用户界面基本定型

6月10日消息,据国外媒体报道,有分析人士称, 微软 很可能于近期发布新一代浏览器IE 9 Beta 版。 本周二,微软发布了 Windows 7更新KB2120976,微软在对该款更新的描述中称,安装该补丁将使 系统 支持IE 9 Beta版的一些 功能 。 对此,有分析人士认为,这意味着微软可能于近期发布IE 9 Beta。到目前为止,微软发布了IE 9的两个预览版本,但均未形成完整的 用户界面 。 在今年3月的MIX10开发人员大会上,微软发布了首个IE9预览版。5月5日,微软又推出了升级产品,即IE9预览版2。 根据微软的承诺,每8周对IE升级一次,这意味着IE 9的下一次更新时间为本月底,但究竟是不是IE 9 Beta,还要拭目以待。

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
9882010-06-07 09:34

Smokescreen 项目: 用 HTML5 实现 Flash

一个叫 Chris Smoak 的程序员,最近发起一个使用 JavaScript/HTML5 实现 Flash 功能 的 开源 项目 , Smokescreen ,可以将 Flash 动画转换为纯 HTML5 JavaScript,以便脱离 Flash 插件,直接在 浏览器 中实现 Flash 风格的动画。这里有一些很漂亮的演示。 关于这项 技术 ,一个叫 Simon Willison 的程序员,在他的博客中做了很好的剖析: SmokeScreen 完全在浏览器中运行,读取 SWF 二进制文件,解压缩(而且使用本地 JavaScript 解压缩!),从中抽取图像与内嵌的音频,将它们转换为 Base64 编码的 数据 ,接着,将其中的矢量图形转换为 SVG 动画。在 Chrome 中打开 Web Inspector,在演示进行当中,你会看到 SVG 的实时运行。SmokeScreen 甚至

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
9392010-05-31 15:21

微软明年发布IE9 HTML5标准将成核心

据国外媒体报道,微软IE浏览器总监瑞恩·加文(Ryan Gavin)周四表示,在明年发布新一代浏览器IE9之后, 微软 将会重拾与 谷歌 和Mozilla火狐 浏览器 之间的竞争优势。 加文表示,微软新一代浏览器IE9已引起外部 软件 开发 者的高度兴趣,这些外部软件开发者将成为IE9成功的关键。加文称,IE9将向第三方开发者更为开放。苹果在周三取代微软,成为全球市值最高的科技公司。自本世纪初IE浏览器的市场份额达到95%之后,该产品的份额便开始不断下滑。目前,IE的市场份额仅为60%左右。 微软认为,IE9将会比当前市场中的各种浏览器提供更优的视觉体验。IE9将通过 Windows 操作 系统 ,来提升计算机图形处理器

发布: 佚名 | 分类: WEB标准 | 评论: 0 | 来源: 网络
  作品展示文章中心站内下载艺术设计案例中心服务内容业务流程留言咨询
COPYRIGHT @ 2009-2012 MartinStudio ALL RIGHTS RESERVED. Powered by DEDECMS 沪ICP备12028012号-1 网站安全检测平台