CSS

CSS有一個屬性叫Vertical Align。當你第一次學習它的時候會有些困惑，因此我覺得我們可以通過它的用法來瞭解它。最基本的用法像這樣：img{ vertical-align: middle;

{ hide_text }

有句話說的好，table能做到的效果，div全能，反之，則不竟然。水平置中，用CSS設定非常簡單，垂直置中，有時會難住一些人。以前的項目中沒遇到垂直置中的例子，也沒去過多的研究，近期閑暇，做了一個百分比高寬，垂直，水平置中。這個能舉一反三。百分比可以了，固定大小的就簡單了。 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

網頁製作Webjx文章簡介：:nth-child()工作原理. 這是一個css選取器，一個真正的偽類別選取器，它就是nth-child(),下面是使用它的範例。ul li:nth-child(3n+3) {color:

網頁製作Webjx文章簡介：寫出更輕巧、更快並且更不會讓你頭疼的CSS.

只支援最新的瀏覽器。也就是說要放棄IE5和IE5.5。這樣一來就能省下很多時間。對於IE6來說不用使用盒模型Hack。如果只針對流行瀏覽器的話，只需要很少的Hack就能實現同樣的效果。 一、在一行內聲明CSSh2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} h2 { font-size:18px; border:1px solid blue;

在一些大型的網站HTML代碼中，我們經常會看到<!－－[if IE 6]><!－－[if IE 7]>之類的代碼，那麼，他們有什麼用呢? 這些代碼在大多前端設計中很少會應用到，其實這是針對不同瀏覽器的樣式聲明，達到一個相容的效果，下面提供一個樣本給大家參考：<!--[if IE 6]><style>#head_menu_main li a span{

網頁製作Webjx文章簡介：6.DIV浮動IE文本產生3象素的bug 左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //這句是關鍵} 7.IE捉迷

網頁製作Webjx文章簡介：9.高度不適應 高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。 例： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } p對象中的內容 解決技巧：在P

網頁製作Webjx文章簡介：你和使用者之間的網站堆棧(簡化版) 在TXJS大會的最後一天，一個開發人員問我： 物件導向的CSS沒有給你留下一大堆基於表現的class名? 網路堆棧中的每一層都有它自己的結構。你不會期望將資料庫結構描述用於構建PHP中介軟體，人們對於HTML和CSS的期望是一樣一樣的。HTML需要用一種 　　 　　你和使用者之間的網站堆棧(簡化版)　　在TXJS大會的最後一天，一個開發人員問我：　　物件導向的CSS沒有給你留下一大堆基於表現的class名?　　

網頁製作Webjx文章簡介：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /titleDIV

網頁製作Webjx文章簡介：IE瀏覽器中的CSS BUG總結.

網頁製作Webjx文章簡介：CSS:移動網站開發的前端技術和技巧. 上一篇我們談到了移動網站中的標籤，想必很多人也很想瞭解Mobile CSS的情況吧，本文將和大家一起探討移動網站中的CSS標準。介紹Mobile css的標準也是有些複雜的，與前一篇文章中提到的類似，之前存在著一個W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0，事實上它們都是CSS 2.1的子集，而且內容非常接近，不同的是，WAP CSS

網頁製作Webjx文章簡介：建立CSS的對象 使CSS對象的粒度合適.

網頁製作Webjx文章簡介：前端開發中的量化與細節. 前端開發方面，員工所做的工作，很難量化到細節。各項目組和人員工作的可比性不強。項目的不確定因素太多。之前曾經嘗試按設計稿的大小（1024*768解析度）為單位，在規定時間內做好指定大小的頁面，給予獎勵。技術人員的考核與激勵一直是我們比較頭疼的問題，具體到前端開發方面，員工所做的工作，很難量化到細節。各項目組和人員工作的可比性不強。項目的不確定因素太多。xhtml+css的績效考核之前曾經嘗試按設計稿的大小（1024*76

常常我們的CSS 樣式中會有好幾個地方需要使用到相同的設定時，一個一個分開寫會是一件滿累人的工作，重覆性太高且顯得冗長，更不好管理....在CSS 文法的基本設定中，就可以把這幾個相同設定的選取器合并在一起，原本可能是寫了7~8 行相同的文法，合在一起後就只要短短的一小行，怎麼看都讓人心曠神怡啊~例如：當有好幾個選取器剛好都需要把文字的顏色設定為灰色的時候，一個一個分開寫的方法式，感覺就很繁瑣，如下： h1 { color:#666666; }

如果資料表格對於視力沒有問題使用者都難以閱讀的話,那麼想像一個那些用輔助技術(掌上裝置)的人來說,它們是多麼複雜和混亂.幸運的是html規範提供了許多無素和屬性來提高資料表格對於這些裝置的可訪問性.1.summary 和 caption第一元素是表格的caption,它基本上用做表格的標題.儘管這不是必須有的元素,但是盡可以使用caption總是好的.另一個元素是summary.summary屬性可以應用於表格標籤,用來描述表格的內容.與image的alt文字屬性相似.2.thead,

前一段時間我在做Green

ie6目前依然是國內使用者的主要瀏覽器，因此作為網頁前端開發來說，無可避免必須相容IE6瀏覽器，這裡有十條使用有效html和css代碼修複可以相容ie6常見的問題。我們知道ie會在一段時間內仍然流行，但是我們仍然可以支援瀏覽器並且避免hacks和條件css嗎？這裡有十條使用有效html和css代碼修複可以相容ie6常見的問題。1、使用一個聲明你必須經常在html網頁頭部放置一個聲明，推薦使用嚴格的標準。例如或者xhtml使用最後你需要是ie6進入相容模式，這已經足夠相容的了。2、使用positi

LearningjQuery.com的部落格日誌上的日期效果非常的酷，如下圖：其中文字的樣式和垂直的年份就會告訴你這不是用圖片來完成的。而且在標記語言中日期資訊是是以文字出現的，就像通常的那樣。通過Firebug查看，代碼非常簡潔漂亮！很明顯每一個日期並沒有各自的圖片。它們都出自同一張圖片（css sprites!），圖片的不同地方被放置上了不同的內容：天、月和年。也許你會記得這和一年前Joost de Valk posted about 上的技術是一樣的。來看一下這張漂亮的圖片：HTML代碼：