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

觀看演 ​​示 |
下載的燈箱來源郵編(下載1804次)


在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: -燈箱右上角密切燈箱手柄上的形象。 按設計可以使用任何圖像

觀看演 ​​示 |
下載的燈箱來源郵編(下載1804次)

請讓我們有您的意見和反饋...


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 表示敬畏 表達自己