2010 2010年 3月 4日

与文字的对齐单选按钮

由于单选按钮和文本是内联的,因此文本将对齐单选按钮的底部,文本会显得稍下的单选按钮。
如果你想这些顶端对齐,你必须放置到单独的容器一样的div或跨度(如适用)的电台和文字,他们将采取照顾对齐。 使用表格单元格太多,外观设计的简要允许的话,它会更容易。

这不会看在每一个浏览器一样,每一个浏览器显示收音机略有不同,所以总是大小问题,无论你做什么。


2010 2010年 1月 8日

的HTML5将带来什么?

HTML5仍然是一个草案。 正如我写的,HTML 5,在2004年开始工作,仍在之间的共同努力形状的W3C HTML WGWHATWG的 字是下一代的HTML将增强功能和特性,将新的结构和语义,表单控制,原料药等多媒体标签。

简单的英语......这一切意味着什么,我们的UI开发...

  • 有一些结构性的标签,即除。 <article>,的<section>的<Header>,<aside>,<nav>,这将取代大部分<div>标签在网页上使用,使您的网页更多的语义,但更重要的,更容易阅读
    嘿! 试想一下,在寻找一失踪密切的DIV标记保存的努力。
    例如:
  <BODY>
  的<Header> ... </头>
   <nav> ... </资产净值>
   <article>
    的<section>
       ...
     </节>
   </文章>
   <aside> ... </搁置>
   <footer> ... </页脚>
 </ BODY> 

而不是

  <BODY>
   <div id="header"> ... </ DIV>
   <div id="nav"> ... </ DIV>
   <div class="article">
     <div class="section">
       ...
     </ DIV>
   </ DIV>
   <div id="aside"> ... </ DIV>
   <div id="footer"> ... </ DIV>
 </ BODY> 
  • 与音频和视频内容,如YouTube,使用网页上的嵌入式多媒体的到来increaded倍。 考虑到这一点,现在的计划是增加对视频和音频嵌入到浏览器本身的原生支持,因此允许用户播放,暂停,停止,寻求,脚本使用内置的DOM API来控制播放和音量调节。

例如:

  <video poster="poster.jpg">
     <来源SRC =“video.3gp”类型=的“video/3gpp”
    媒体=“掌上电脑”>
         <source src="video.mp4" type="video/mp4">
 </视频>
的<audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </音频> 
  • 更好地定义为如现有元素的语义角色。 的<strong>和<em>实际上现在可能有不同的含义,即它们将不同的表现。

有更多的变化/升级到新版本...会不断更新这个职位,因为我来accross的任何有趣有用的.... 观看此空间

本文档可能无法提供准确的信息,如HTML 5规范仍然是积极发展。 如有疑问,可随时检查HTML 5规范


2009 2009年 10月 18日

HTML和XHTML

  • 文档类型声明需要目前是在一个文件,使用HTML语法开始。 它可以选择性地使用在XHTML语法,但它不是必需的。 XHTML文档并不需要包括DOCTYPE因为XHTML文档交付正确使用XML MIME类型的浏览器,并为XML处理,始终没有怪癖模式中呈现。
  • 在XHTML中,标签名称是大小写敏感的,通常被定义写在小写。 然而,在HTML中,标记名是大小写敏感的,可写在全部大写或大小写混合,虽然最常见的惯例,是要坚持用小写。 开始和结束标记的情况不相同,但一致不使代码看起来更整洁。

使用HTML的优点

  • 向后兼容现有的浏览器
  • 著者已经熟悉的语法
  • 宽松和宽容的语法意味着将不会有用户敌对黄屏死亡 “,如果一个错误不慎滑倒通过
  • 方便的速记语法,例如,作者可以省略一些标签和属性值

使用XHTML的好处

  • 严格的XML语法鼓励作者写形成的标记,可能会发现一些易于维护
  • 直接集成与其他XML词汇,如SVG和MathML
  • 允许使用的XML处理,其中一些作者,编辑和/或出版过程的一部分使用

2009 03月 24日 二零零九年

禁用=“true”和禁用=“假”一样吗?

这的老学校,但像往常一样,它是我的记忆中补充...
所以被禁用=“true”和禁用=“假”相同吗?
...不要相信! 多数民众赞成的方式是......这里是一些简单的解释...
“禁用”是任何形式的元素/字段的属性,因此可以接受任何价值,其性质。

只要这个属性是目前,该元素将被禁用,不管它的价值。 例如。
<input type="text" value="This是disabled" disabled>
<input type="text" value="This是disabled" disabled="disabled">
<input type="text" value="This是disabled" disabled="true">
<input type="text" value="This是disabled" disabled="false">

上述所有将本表格字段“已禁用”。

根本就没有提供属性“禁用”保持现场“禁止”......像下面

<input type="text" value="This是不disabled"的/>

记住“ 任何残疾人士的属性值(或没有价值),浏览器将使其禁用 ”。 为了让我们的头脑W3C的事情说清楚,建议我们使用禁用=“禁用”,在这些情况下。

这是区别虽然我们在JavaScript中使用这个属性时...

document.form.element.disabled = / /该元素将被禁用
document.form.element.disabled = FALSE; / /该元素将启用

上述论点也适用于这些属性和元素:

  • (单选按钮,并选中复选框)
  • 选择(选项)
  • nowrap(TD)

2008 2008年 12月 17日

不当行为:IE8的CSS布局破损(针对在IE8中使用Meta标签的浏览器版本)

如果你是CSS的人,你想知道的痛苦,在获得工作的跨浏览器的布局。 IE8是我们开发的工程中的又一扳手。 anywaz! 如果你打这个问题时,像我一样昨天,你完全工作在IE7的CSS(或更早)和Firefox突然开始扔在IE8发脾气,试试这个...很好,这似乎是解决问题的那一刻我....

使用meta声明,我们可以指定我们想IE8的使用的渲染引擎。 因此,强制IE8的渲染IE7 ...插入文档的头部以下Meta标签: -

<meta http-equiv="X-UA-Compatible" content="IE=7"

IE浏览器默认情况下,元将是: -

<meta http-equiv="X-UA-Compatible" content="IE=8"
这将使IE8的渲染页面,使用新的标准模式。

如果需要,此语法可以用来容纳其他浏览器如下:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"


更多关于文档类型:

如果你不熟悉的动物,被称为“DOCTYPE”排序...这里是一些快速阅读
什么是文档类型? 什么是浏览器怪癖严格模式?
设置在XSL中的DOCTYPE

为深入了解更多有关文档类型,尝试访问这些链接...
除了 ​​一个列表:有了正确的DOCTYPE,修复您的网站!
除了 ​​一个名单:超越的DOCTYPE:Web标准,向前兼容和IE8

注:虽然我们很多的HTML / CSS的人都被忽略在我们的文件重要性的DOCTYPE decleration的,设置正确的DOCTYPE,通常是跨浏览器的问题的答案。


2008 2008年 10月 4日

消失的HTML / DIV元素在Internet Explorer的[IE浏览器]

像往常一样,多一些奇怪的问题与IE和这个人都必须在TOP 10 IE的怪癖队伍之一。

问题的声明(这是我的问题,也许你也有类似的违法行为):
我有很多的DIV的页面与类“sectionhead”,这只不过是第一个页面上的标题。 所以我有一些这样的风格寻找

,sectionhead {字体大小:18px;背景:#cfcfcf;填充:5PX;}

DIV的是一些黑色文本的浅灰色栏。 在IE浏览器的情况是这些节头显示OK,但也有一些无形的,直到您滚动页面或点击页面上的等东西,有时候他们往往消失,当你点击“ALT”键,当你页面或滚动卷轴。 他们有时似乎再现,当你重新载入(F5)页面。 我与一些简单的风格完全简单的div的行为坏。
什么可能导致这种反常行为呢? 好吧! 坦率地说,不知道!

可能的解决方案:
再不要问我为什么,但这个问题在许多情况下趋于消失,当您添加的位置是:相对的不当行为元素的样式,这样,

,sectionhead {字体大小:18px;背景:#cfcfcf;填充:5PX;位置:相对}

奇怪,但该说些什么呢? 上帝保佑我从IE浏览器!

和DO美国的市场份额,如果你有类似的问题。


2008 2008年 10月 3日

简单,轻巧,跨您的网页浏览器收藏夹

不是只有少数的灯箱时,你可以找到你谷歌。 灯箱,我发现大部分的问题是,他们似乎都使用一个或其他重JavaScript框架如jQuery,原型,MooTools和喜欢。 他们都是冷静和时髦的期待。 但是,如果你的要求是:“ 但我想一个我的网站的简单和轻量级的灯箱脚本 ”,然后在这里,它是;

这个灯箱一些不错的功能

  1. 很轻
    一个。 包装时的脚本4KB(8 KB解压)
    2。 2 KB的CSS
    C。 几行的HTML灯箱容器
  2. 简单地理解和贯彻
  3. 可以在同一页上有多个灯箱。
  4. 相同的灯箱容器用来显示不同​​的内容(这是隐藏在页面部门分别包括),根据选项,点击链接/。
  5. 自动居中,同时考虑到所有因素,例如窗口的高度和宽度(屏幕分辨率),页面滚动量和灯箱内容的高度
  6. 测试IE 7&FF

观看演示 |
下载的灯箱来源邮编(下载1806次)


在zip文件中使用[档案]灯箱

jo.js,jo_pack.js [包装版本]: -一个简单的JavaScript对象集[联办],其中包含的元素,窗口和文件定位脚本。 你可以打开JO.JS,如果你想创建抽象的功能,一些高级Javascripting让你的手脏,延长元素的属性等。 如果你不是太在Javascripting多少,不要管它。

lightbox.js,lightbox_pack.js [包装版本]: -包含灯箱经理脚本。 如果你是网页设计师,还负责执行页面上的灯箱,你需要了解LightBoxManager。 LightBoxManager基本上包含两个功能showLightBox,和closeLightBox。

lightbox.css: -如果你知道的CSS,你可以发挥与lightbox.css定制的外观,N-感觉lightbox.css

灯箱两种不同的内容,实施的index.html:样品

lb_underlay_bkg.png: -这是光/西米透明图像用于灯箱底图的背景[底图是低于lighbox,防止用户点击页面上的任何其他实体层,而灯箱开放]。 为此目的,你可以使用任何图像或纯色,取决于的页面设计和要求。

icon_lb_close.gif: -灯箱右上角密切灯箱手柄上的形象。 按设计可以使用任何图像

观看演示 |
下载的灯箱来源邮编(下载1806次)

请让我们有您的意见和反馈...


2008 2008年 9月 4日

固定(这仍然是静态的窗口滚动)的页块只使用CSS

这个职位可能那句“教学奶奶班门弄斧”是一个很好的例子,因为这仅仅是基本的CSS的东西。 但是,对于那些无视我一样的,这可能是一种变相的祝福。 我一直以为(这样说,我可能失去对我的工作),这是唯一可能保留一些静态的HTML页面内容的一部分(意思是,它的立场始终对窗口滚动),使用一些聪明的脚本,否则所有这些科学计算的动态位置,诱捕Window.scroll事件和超时等设置

从来没有想过它可以像这样简单...... 在这里,我在下面的CSS / HTML有四个静态块,固定在每个页面extrimities,上,右,底部和左侧...不用说...你可以选择任何一个或多个,如果需要...

的CSS
静态显示:块;的z-index:10;颜色:#FFFFFF;溢出-X:隐藏溢出-Y:隐藏;位置:ixed;
}
#内容{保证金:100px的为150px 0px 160px【边界:1px固体#e6e6e6}

#总结T {TOP:0px;背景:#33CC66;宽度:100%;高度:55像素;

#包-L {:80px的背景:#FF9966;高度:300像素,宽度为150px;边界:2px的坚实#e6e6e6;}

#包-B {底部:0px;背景:#3333CC;宽度:100%;高度:55像素;}

#包-R {:80px的背景:#6666FF;高度:300像素;宽度:140px单击;边界:2px的坚实#e6e6e6;右:0;}

的HTML
<div id="contents">您的主要网页内容</ DIV>
<div id="wrap-b" class="static">
静态内容页底部
</ DIV>
<div id="wrap-t" class="static">
静态内容页首
</ DIV>

<div id="wrap-l" class="static">
页面的静态内容的左侧
</ DIV>
<div id="wrap-r" class="static">
在页面右侧的静态内容
</ DIV>

查看样品这里wroking


2008 2008年 9月 2日

CSS破解:仅用于Firefox的JavaScript,CSS,HTML

很多时候,我们觉得有必要写的浏览器specfic黑客(虽然它不是一个好的做法,我们UI开发人员必须求助于伟大的浏览器,直到战争的罪恶休战)。 早些时候,我曾在这篇文章中提到的非法入境者只有 ,如何写一个CSS片段,那将是可见的IE浏览器IE7中只。

昨天,我的情况下,我想写一些Firefox特定CSS片段。 好吧! 我不知道是否有这一个CSS代码,但有一个HTML。 是一个陷阱虽然 ,这一块的HTML亘古不变通的HTML验证。 但是,anywaz! 如果你被卡住严重或因此,有没有验证方面(有时是残酷的),你可以使用下面的声明一个FF只样式的链接,或者甚至只是这个区块内的CSS编码。 代码是

<comment>把你的Firefox的HTML / CSS /脚本在这里</评论>

例如:
<comment>
<STYLE>
法郎只* / / *样式
的fieldset {边界:1px固体#dddddd;}
</ STYLE>
</评论>

我很高兴的时刻...


2008 3月 15 2008

可见刺激性通过弹出分部的选择框

在多个场合,同时弹出部门/灯箱/提示页面布局等我们遇到某种形式的选择对象恰好是根据这些弹出分部设计的,它表明通过的情况下...... 毓!!

好吧! 你可以很容易地修复你的Z指数值适当调整FF和IE7。 但好旧(双关语意)IE6的行为并不如预期.... 选择框显示,即使你申请一些大幅高Z指数值,您的弹出司...无赖!!!

有此问题没有修复,但也有,我相信,多一些工作方式解决这个问题,但我在这里要告诉你,我用最简单的解决,这对我来说工作得很好,在最案件....

“隐藏胭脂SELECT显示弹出框当您

你只需在你的脚本片段显示您的弹出,添加一块脚本设置选择框的知名度,以“隐藏”

document.getElementById(“my_select)style.visibilty =”隐藏“。

并记住设置您的弹出部结束

。document.getElementById(my_select“)style.visibilty的”可见“;

,“my_select”是刺激的选择框的ID

希望这有助于...

聚苯乙烯。 有像的ofcourse其他选项你弹出一个IFRAME(大小相同),根据弹出的DIV动态positionining ......这工作得很好,但另外一个DOM元素,脚本和头痛的负载。 我已经使用这个解决方案,如果你需要任何帮助这个选项,不要让我知道。 会很乐意帮助!


NDK的家 | 表达它 表示唇腭裂 表示Penmenship 表示敬畏 表达自己