2011 2011年 7 7日

CSS破解的问题

读了一些博客认为这是很好的未来文献目录...... 也可能是一个重要的面试问题,你会问有一天......

写一个CSS的片段将显示在新的浏览器,在旧的浏览器款有蓝色,红色,在IE6和黑色的绿色IE7中

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}


2011 2月 18日 2011年

IE浏览器的JavaScript错误:对象不支持此属性或方法

这个奇怪的问题,其中一块Javascript的工作像往常一样栏的IE浏览器在所有ANS罚款 :) 它是简单的,但因为不是我写的脚本,过了一段时间来调试这个“对象不支持此属性或方法”的错误,只有IE浏览器被扔了 可能! 如果我是写剧本,我不会有这个错误,不要混淆我的变量名,字段ID :)。

问题:对象不支持此属性或方法(第3行)

 function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

解决方案:
在上面的例子(3号线......的“shortdesc = document.getE ......”)thirdrow产生错误。 我想所有的那种愚蠢的事情,甚至我不值得在这里提到,终于猜到什么! 只是改变shortdesc VAR别的摆脱了错误。 基本上! 变量的名称有不同从fieldID的


2010 2010年 12月 28日

显示在Android的静态HTML页面(ECLIPSE)模拟器

现在几个小时,我也一直在寻找解决方案,运行/测试在我的Eclipse / Android模拟器的静态HTMLs。 没有完全成功...... 我的意思是“完全”是被加载的HTML确定,但所有的CSS和JS,即没有见过的视觉表达。 在开发的话,CSS不会应用到页面...

想到这几个家伙新手的Andr​​oid UI开发,如果我注意到了下来,我用显示的HTML片段。

和Android大师,请添加您的宝贵意见,帮助我们进一步在移动应用程序的UI开发新手!

对不起! 但是我假设你知道如何在Eclipse中创建一个Android移动应用。

创建您的活动,这将读取该文件从您的项目资产/文件夹的index.html'。

 public class Test extends Activity {  /** Called when the activity is first created. */  @Override  public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    WebView webview = new WebView(this);    setContentView(webview);    try {      InputStream fin = getAssets().open("index.html");        byte[] buffer = new byte[fin.available()];        fin.read(buffer);        fin.close();        webview.loadData(new String(buffer), "text/html", "UTF-8");    } catch (IOException e) {      e.printStackTrace();    }  } } 

2010 2010年 5月 20

循环再用CSS:在看CSS框架

再骑自行车是Buzzword的,并在web开发中,这意味着没有什么不同。 它节省能源,努力!

编写CSS和从设计创建HTML多年,我都遵循一些最佳实践,在节省时间和精力,我们俗称为“重新发明轮子”的长期追求。 一次又一次,我告诉自己,我必须创建一些模板,一些标准的可重复使用的CSS,我会用我今后的工作中的开箱。 虽然不是完全,但我还是设法实现一些目标。

在推进,再利用CSS的,我看比我自己,在为数不多的CSS框架,通常是提供给我们,并决定把他们使用,因为这些尝试和测试,并创建由许多经验丰富的开发。 更重要的是“避免重新发明”。

虽然退伍军​​人的常识,我已经尝试钢笔的一些关键概念/最佳做法/已进入了这些框架的建立,使尽可能循环再用CSS的想法。 希望这将有助于一些CSS开发只是最近登上了CSS的行列!

键重新CSS的循环:

使用命名约定

这是最重要的因素,在可重复使用的CSS / HTML。 给予一致的名称,页面元素,使很少或修改页面组件和他们的风格与再利用。 按照这种说法,即使HTML5的,比其前任的重大变化而变化,是引进一些结构性的标签,即。 <article>,的<section>,的<Header>,<aside>,<nav> 的HTML5将带来什么? ]。 甚至与HTML 4(或更低),它是最好的,就像在下面简单的例子consistanly命名您的网页的标准部分...

请记住,你的项目大多数网页,最终具有相同的核心结构元素。 确定这些共同的核心页面元素....

  <div id="container">
    <div id="header"> ... </ DIV>
    <div id="nav"> ... </ DIV>
    <div id="sidebar"> ... </ DIV>
    <div id="footer"> ... </ DIV>
   </ DIV> 

重置默认样式(CSS的重置):无论您使用的框架或自己写的,你必须提供的CSS重置[ 什么是CSS重置? ],因为它们减少或有时消除各种浏览器之间发生的视觉不一致。 在简单的话,CSS复位机制设置为零或空值的HTML元素的样式,因此重写他们可能带来的任何浏览器的默认值。 这提供了一个干净的石板,设置这些元素的任何默认的User-Agent无效[ CSS2.1的用户代理样式表默认的属性]。 所有的CSS框架的复位机制。 如果你正在写你自己的CSS重置的忠告是,如果你碰巧忘记重置键属性,它可能会导致跨浏览器问题,是非常难以调试。 记住,保持复位样式的副本,他们拖放到你创建的每一个新项目。

 身体,DIV,DL,DT,DD,UL,OL,李,
  H1,H2,H3,H4,H5,H6,
 前,表格,字段集,输入,选择,textarea的,
  P,BLOCKQUOTE,表,TH,TD
  {
   边框:0px;
   保证金:0;
   填充:0;
  } 

设置默认值(基准样式)元素:

当您设置(零或空)某些HTML元素的某些属性的默认值,它是要运用这些元素在每一个实例的一些风格。 这些默认设置可能会有所不同,按设计或根据你遵循的最佳做法。

最CSS框架,介绍了一些新的默认设置,除了重置浏览器默认风格。
这些默认值是无效的默认用户代理(离剥离的CSS复位),这些都将是跨浏览器保持一致。

记住,基准样式用于设置将会被用来设计样式。 例如。

  HTML字体大小:77%;字体家庭:宋体,无衬线;}
强,H1,H2,H3,H4,H5,H6 {字体重量:大胆;} 

常见的HTML组件和公共类的抽象风格:

几页组成的大多数项目将整个网站使用常见的HTML元素,例如一些排序形式,警报和错误,自定义弹出窗口,灯箱等,由于这些组件再次使用,整个项目,这将是有益的提供设置预定义的样式与这些组件相关的类,你可以自己节省了很多时间。

除了常见的HTML组件的定义可重复使用的样式定义,我们可以排版,颜色,甚至布局类的抽象风格有关。 我倾向于使用...像Clearfix,Font08,FontGrey,AlignL,DisplayB等常见的类

 表单输入{边框:0px;背景:#FFFFFF;填充:0px 10px; _padding:0px 0px;高度:26px;颜色:#000000;线高度:30像素字体大小:1.1em;}
表单的TEXTAREA {边框:0px;背景:#FFFFFF颜色:#000000;字体大小:.9 EM;线高度:1.5em;溢出:可见;}
 ,fbold {字体重量:大胆;颜色:#CCCCCC;}
 fgrey {颜色:#666666;}
 flightgrey {颜色:#BBBBBB;}
 clearfix {明确:既;}
分频器{边界:1px固体#647B06;边境底:1px固体#9CC00A;高度:0px;}
 。displayb。displayn {显示:块;} {显示:无;}
 alignr {文本对齐:右}。alignc {文本对齐:中心}
 {浮动:权利;}。floatr。floatl {浮动:左;} 

修复常见的浏览器怪癖

各种浏览器实现的CSS代码和CSS规范的支持,提供不同的级别。 这样做的结果.... “浏览器怪癖”,我们开发人员留下来处理。 尤其是,IE6的困扰的最后期限,以满足大多数CSS编码。 好消息是经验已经聚集了可能出现的可重复使用的修复这些问题(通常被称为CSS的黑客 )。

请记住,保持这些黑客/修复方便

  / *以下变焦:1规则是专门为IE6 + IE7的。  * /
    * HTML。clearfix
    *:第一胎+ HTML clearfix {
          变焦:1;
      } 

不断完善你的CSS

  • 循环再用的习惯,不会来找你的一天。 它有发达。 因此,打算再骑自行车。 牢记这一点,你可以抽象的默认样式,排版的定义,布局,HTML元素的样式等尝试超前思考。
  • 还看你过去的项目,这将有助于确定风格,你倾向于经常使用跨项目对接洽谈。 它抽象。
  • 删除任何未使用的样式。 这种做法将继续从你的CSS框架,一种常见的症状称为“腹胀” -
  • 删除重复性风格。
  • 建立了一套有足够的灵活性,移植整个项目的样式。

在看看CSS框架

最后。 如果你有启发,并打算使用一个或多个CSS框架,继承人是几个流行的快速列表....

  • 960网格系统 :960网格系统是通过提供常用的尺寸,宽度960像素的基础上,为了简化Web开发工作流程。 有三种型号:12,16和24列,它可以单独或串联使用。 思想无关,你不能为自己创造一个轻松足够,该框架提供了在打印PDF格式,可以使用,勾画页designs.Bet网格模板,它将使一个专业的印象,如果你携带时几张你去到一个客户端的UI需求收集。 它也像烟花,闪光时,InDesign,Illustrator中时,Photoshop,Visio中,提供了一个“十起动器”,开始您的设计工作等提供了基本的网格模板,流行的设计软件。
  • 蓝图 :蓝图提供了明显分类的CSS文件重置,网格,表格,打印,排版,插件按钮,标签和精灵等,它还提供了一个单独的包括对IE的支持。
  • SenCSs :不同于上述两种,SenCSs(读感),不会有布局的CSS定义。 它包括字体,填充,边距,表格,列表,标题,引用文字,表格和更多。
  • 的BlueTrip :它原来的声名鹊起,它是其他人的框架,从那里得到它的名字......像蓝印花布旅游 OLI提供最好的功能组合。 其功能集,包括24列格,排版样式,ORM样式,打印,按钮等。
  • YUI的网格 :给您带来的Yahooo开发网络,支持流体宽度750px,950px,974px(100%)的布局以及预设固定宽度的布局,并能够轻松地自定义任意数量。 正如你可以看到,它在技术上只是布局组件。 锐还提供了其他网页元素的HTML / CSS套
  • YAML的(另一个多列布局)
  • emastic

请记住,使用CSS框架并不意味着你是懒惰的创建自己的......这意味着,你很聪明,学习别人的经验和失误,节省时间和提高生产率!!


2010 2010年 03月 13日

@ fontface:表示它与您选择的字体,使用WebFonts

今年的CSS完成10年内存在! 那些已经出现了一段时间,赢得他们的面包(或不)使用CSS,那么您可能已经知道我们如何挨饿的字体很好的选择。 即使像那些缺少的字体设计师CSS禅意花园已使用CSS背景图片,字体,以取代他们的设计做一些正义的追求。 我们也尝试过的闪存/ JavaScript®黑客来实现我们的设计目标。 这绝不是一种错误的方式来获得,我们希望把我们的网页设计的字体,但肯定的是,它是不是最可取的办法。 多年来网页设计师,像我一样,已经完全依赖于十年或为他们设计的字体。

Web标准和字体格式最近的事态发展使人们有可能比其他同旧的默认字体在字体渲染HTML文本。 进来“fontface”的CSS decleration。

@ fontface provids链接到实际的字体文件,并从网上检索的解决方案。 使用@ fontface,设计者可以使用,无需冻结作为背景图片的文字字体。 实施是非常简单,如下所示,但一切美好的事物有一个反面的一部分,不是所有的浏览器支持一个单一的“ 字体类型 ”。 如果您正计划在网站中使用@ fontface需要跨浏览器支持,那么你将有来源提供各种相同的字体类型。

  1. TrueType字体 -设计很好看屏幕上的一个格式。 推荐,特别是对Windows浏览器(浏览器)。
  2. 的OpenType(CFF) -此格式是更好的打印工作,并且不总是看Windows上良好。
  3. 桥式 -你需要这种格式,如果你想针对Internet Explorer的。 IE浏览器将不使用任何其他格式。 我们的EOT将被视为“精简版”,因为它们既不是压缩,也不域限制。
  4. SVG的 -这是一个XML格式的一些浏览器支持包括iPhone。
  5. WOFF -跨浏览器,仅在网站上的字体格式是轻量级(字体数据是zip压缩),可以使用TrueType或PostScript的(CFF)概述编译。 它是目前支持由Firefox 3.6 +。

使用@ fontface

  @字体面{
字体家庭:'CalligraphyFLFRegular“;
 SRC:URL(CalligraphyFLF.eot“);
 SRC:当地(“CalligraphyFLF),当地的(”CalligraphyFLF),URL(CalligraphyFLF.woff“)(WOFF')的格式,URL(”CalligraphyFLF.ttf)格式(TrueType字体“),网址(”CalligraphyFLF SVG#CalligraphyFLF)格式(SVG);
 }
 @字体面{
  字体家庭:“你的字体”;
   SRC:URL(“字体/ font_filename.eot”);
   SRC:本地(“备用名称”),当地(“Alternatename”),
     URL(“字体/ font_filename.woff”)格式(WOFF)
     URL(“字体/ font_filename.otf”)的格式(“的OpenType”),
     URL(“字体/ font_filename.svg的#font_filename”)的格式(“SVG”);
   }
 H2 {字体家庭:“你的字体”,格鲁吉亚,衬线;} 

正如你可以看到从上面的例子,包括选择字体的字样,具有相同的字体,一组fonttypes链接。 因此人们称其为“字体工具包”。
有字体套件,明确允许使用CSS @ font-face的财产,根据最终用户许可协议(EULA)连接。

有用WebFont资源:


2010 2010年 3月 9日

其关于“网页设计师谁可以没有代码”

用我有限的技能与工具,如Photoshop和Illustrator集,我可以坦率地承认,我是个更好的开发人员比我一个设计师。 但我的背景与核心(服务器端)的Java / PHP / COBOL的发展,一直是我的UI开发能力非常积极的影响。 我的意思是,同时创造了我的设计,即每当我做设计,我认为设计如何可以最好转换成HTML的CSS,而这样做的HTML CSS,我给后端技术有关的思想和合理确定可以轻松实现的HTML成XSL循环或PHP的片段等。

多年来,我一直扔在设计UI设计师,谁可能不有一个线索,HTML或CSS是什么头。 这些年来我一直在想,我会要求太多,如果我只是希望设计师,谁是试图shov他的“不可能的代码”设计我的喉咙,只是一点点理解他的设计将被转换成。 这将有助于对不对?

然后,我遇到了这个职位今天的网页设计师不能代码 ...感谢主! 我只是许多有同样的感觉的人之一......上述artitle是位长篇大论...... 但值得一读,它的每一句话。

感谢埃利奥特杰伊股票......我就放心了!

下面是一些摘录从Elliots文章

哇,这一天! 它始于一个小鸣叫,似乎席卷了整个网页设计社区讨论结束。 它似乎有一些非常强大的网页设计师是否应该能够代码的问题上所持的观点。
...
所以,在我们得到这个,让我快速回顾一下,我今天上午在Twitter说:

老实说,我感到震惊,在2010年,我还是跨越未来“网页设计师”,谁也不能编写自己的设计。 没有任何借口。

...我应该已经多了几分具体在我的鸣叫。 我谈论没有连最基本的HTML和CSS技巧实际现场变成一个平面设计的设计师。 没有的人不是故意选择的代码,那些不能。 和我也谈到这里只有前端代码,当然这很荒谬,认为设计师也应该是惊人的后端程序员...

我们得到的“网页设计”在Illustrator中,300dpi的发送,不可能代码,没有一致性/可用性。
~~艾米马洪

它已经晚了,我有这某种程度上包装。 我知道会有许多人同意我的看法,我的意思是不是得罪或扰乱任何人不能代码,但我希望,我所说的一些反映一些点,总是拿出钻研时本次辩论。

在一天结束时,我没有失去过谁可以编写,谁不能睡觉。 我只是真正惊讶地发现,这么多的设计师缺乏前端的技能,因为我认为这是过去的事情了。

也可以参考的意见,有大约320评论,我写了......他们都是值得一读。
请在这里读Elliots满后.. 人可以没有代码的网页设计师


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年 11月 7日

CSS缩放-又一IE浏览器的怪癖; 3像素移位

时间和一次又一次,当所有其他浏览器看到的行为告诉由W3C规则,IE浏览器的螺旋发展的精神,你发脾气,但这似乎并没有修复。 只是这样的一个人,这是IE7中的问题。

问题陈述:
我等其他严重的web开发中的许多人已经注意到很多时候,当有嵌套布局中的彩车上悬停,对一些链接(锚标记),含集装箱似乎移动几个像素的权利。 我曾尝试谷歌对于这个问题的解决方案,但几乎没有发现任何合理的答案,为什么发生时(可能有助于防止发生这个问题),所以我从来没有找到一个明确的解决问题的...

可能的解决方案:
出来的经验,我有通知倍,即90%,这个问题是由固定的不当行为容器中加入CSS定义缩放属性...

 #somediv {
      变焦:1;
 }

再次理由是含糊不清的...试试这个...
在IE中的一些元素,有一个“hasLayout的”属性,这是“真正的”默认。 许多视觉CSS行为,例如,一个alpha过滤器只适用于hasLayout的元素。 {变焦:1},似乎给目标元素的hasLayout属性 .... 有用吗? 我不这么认为...

变焦属性似乎也支持由铬,但其使用力似乎使许多不利影响,我的布局......试试吧,如果你的作品......如果没有,书签在“CSS胡扯”此页


2009 2009年 10月 18日

HTML和XHTML

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

使用HTML的优点

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

使用XHTML的好处

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

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