隨筆 - 28, 文章 - 0, 評論 - 3, 引用 - 0
          數據加載中……

          2010年2月21日

          網頁寬度多少最適合?(轉)

          公司網站最近一個月統計出來的訪客分辨率報表圖:
          2009-04-21_133507

          可見,目前使用800*600的幾乎是微乎其微了,1024還是居于上風,目前19,21寸甚至更大的顯示正在逐步被廣泛使用,所以N年前流行的778,780等等都好像是幾個世紀以前的事情了。

          再看一組數據

          網站 首頁頁面寬度 px
          Yahoo! 950
          淘寶 950
          MySpace 960
          新浪 950
          網易 960
          Live Search 958
          搜狐 950
          優酷 960
          AOL 960

          上面都是Alexa全球排名前100的站點,而且WordPress的皮膚,百分之90以上都是960px寬。為什么設計師們都喜歡這個數據(950px/960px)呢?以下部分轉自網頁柵格系統研究(1):960的秘密,作者:玉伯

          設計師們對蘋果情有獨衷。在 1024 x 768 的分辨率下,打開Firefox:

          自然狀態下,Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框,網頁的實際大小為上圖中的紅色部分,高寬為 960 x 650.

          數字背后的奧妙

          上面的“自然”出現,細究自然是不讓人信服的。蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960,而不是其它什么1000之類的整數,自然另有奧妙。

          科學界有很多問題都可以歸結到數學問題上,我們也從數學著手:

          960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍:

          2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
          48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

          共26種(26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身),我們標記為:

          N(960) = N(2^6 * 3 * 5) = 26

          根據上面的算法,可以得到:

          N(360) = N(2^3 * 3^2 * 5) = 22
          N(480) = N(2^5 * 3 * 5) = 22
          N(720) = N(2^4 * 3^2 * 5) = 28
          N(750) = N(2 * 3 * 5^3) = 14
          N(800) = N(2^5 * 5^2) = 16
          N(960) = N(2^6 * 3 * 5) = 26
          N(1000) = N(2^3 * 5^3) = 14
          N(1024) = N(2^10) = 9
          N(1440) = N(2^6 * 3^2 * 5) = 34
          N(1920) = N(2^7 * 3 * 5) = 30

          根據直覺(嚴格證明也不難,不過還是留給數學系的學生去證明吧),我們得到一個有趣的結論:

          要使得N(width)最大,width的取值有兩個系列:

          A系列: …, 320, 720, 1440, …

          B系列: …, 480, 960, 1920, …

          N越大,可組合的寬度值就越多。對柵格系統來說,這意味著越靈活!

          目前絕大多數顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時保證柵格的靈活度,可以看出960是非常合適的。這樣,在目前主流顯示器下,960就成為網頁柵格系統中的最佳寬度了。(也許不久的將來,將會流行1440)

          以上內容轉自http://lifesinger.org/blog/?p=375

          posted @ 2010-03-23 14:01 Angle Wang 閱讀(1039) | 評論 (0)編輯 收藏

          悟透JavaScript【轉】

               摘要: 非常好的一篇文章,作者李戰,阿里軟件的老頑童,混跡IT江湖多年。在數據庫、Web架構、前端技術,及數據庫全文檢索方面有深厚內力.相信你讀完此文,必定功力大增。 引子 編程世界里只存在兩種基本元素,一個是數據,一個是代碼。編程世界就是在數據和代碼千絲萬縷的糾纏中呈現出無限的生機和活力。 數據天生就是文靜的,總想保持自己固有的本色;而代碼卻天生活潑,總想改變這個世界。 你看,數據代碼間的關系與...  閱讀全文

          posted @ 2010-03-23 13:44 Angle Wang 閱讀(319) | 評論 (0)編輯 收藏

          從零開始學習jQuery(轉)

          從零開始學習jQuery (一) 開天辟地入門篇

          從零開始學習jQuery (二) 萬能的選擇器

          從零開始學習jQuery (三) 管理jQuery包裝集

          從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

          從零開始學習jQuery (五) 事件與事件對象

          從零開始學習jQuery (六) jQuery中的Ajax

          從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

          從零開始學習jQuery (八) 插播:jQuery實施方案

          從零開始學習jQuery (九) jQuery工具函數

          從零開始學習jQuery (十) jQueryUI常用功能實戰

          從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件

          posted @ 2010-03-23 13:41 Angle Wang 閱讀(233) | 評論 (0)編輯 收藏

          一些專業博客和技術網站收錄

          藍色理想:http://www.blueidea.com/ 網站設計人員之家,主要關于網站前端設計內容,通常搜CSS內容會搜到這里。

          http://blog.bingo929.com/注前端開發/網頁設計/網站可用性/用戶體驗,暴風彬彬的趣味互聯網生活…

          淘寶網用戶體驗設計UED: http://ued.taobao.com/blog/
          口碑網用戶體驗設計UED: http://ued.koubei.com/
          阿里媽媽用戶體驗設計UED: http://ued.alimama.com/
          阿里巴巴(中國站) 用戶體驗部: http://www.aliued.cn/
          阿里軟件UED團隊: http://www.alisoftued.com
          19樓UED團隊: http://ued.dukuai.com/blog/
          用戶為中心的設計(UCD),UCD大社區,http://ucdchina.com/

          個人技術博客:
          李會軍:http://www.dotneteye.cnorg 去過博客園的應該都知道吧,神仙級專家。
          趙劼:http://www.cnblogs.com/JeffreyZhao/ 同上,為博客員知名專家,特佩服他!
          淘寶玉伯:http://lifesinger.org/blog/ 淘寶前端,對前端細節研究很深入!博客更新也算頻繁。
          淘寶懌飛:http://www.planabc.net/ 淘寶前端,花名圓心,博客內容也很值得看。
          cssrain:http://www.cssrain.cn/ 懶人開發人員一定要去看看哦,資源超多,很多效果例子。特別是jquery。

          源碼站:
          http://www.codeplex.com 微軟的.NET源碼發布站,很多很好的.NET源代碼

          posted @ 2010-03-23 13:37 Angle Wang 閱讀(238) | 評論 (0)編輯 收藏

          良好的用戶體驗,必須是全方位的【轉】

          用戶體驗(User Experience,簡稱UX 或 UE)是一種純主觀的在用戶使用一個產品(服務)的過程中建立起來的心理感受。因為它是純主觀的,就帶有一定的不確定因素。個體差異也決定了每個用戶的真實體驗是無法通過其他途徑來完全模擬或再現的。但是對于一個界定明確的用戶群體來講,其用戶體驗的共性是能夠經由良好設計的實驗來認識到。計算機技術和互聯網的發展,使技術創新形態正在發生轉變,以用戶為中心、以人為本越來越得到重視,用戶體驗也因此被稱做創新2.0模式的精髓。”—–百度百科

          現在,幾乎人人都在談、在做用戶體驗,有為了用戶體驗而用戶體驗的;有不知何為用戶體驗,就亂指揮一通的;有做了幾天可用性改進就宣稱飛躍的…..當然,也有很多是踏踏實實為廣大人民做實事,做好產品設計的。
          不管怎樣,以下的思考文字中希望有那么一點點是閃光的。
           
          看了百度百科的詞條,結合自己的經驗,可以這么理解:用戶體驗,是通過接觸某樣有形或者無形的事物后,建立在用戶身上的一個范圍比較廣的情感疊加,跟樂高積木是一樣一樣的,堆得好,可以很高,某一塊不穩,就會全倒下。那,到底有多廣呢?

          1.一個購書體驗:流程流暢度

          給自己買一本書,我想到的是淘寶和當當,有人會說:買書當然去當當或者卓越了。我不是這么認為的,首先,都是網購,淘寶也賣書,并且能討價還價,能了解更多細節,而當當不能,但如果在淘寶上價格太高,沒有當當劃算,且不是很急著買,那我會選擇當當。
          —–這里面有兩個點:網絡購物習慣養成的條件反射 和  買賣家之間的交流 ,這兩個是體驗的一部分。
          決定上當當后,打開首頁,logo旁的“十年品質 放心低價”,有點暖,而導航下左邊的這個綠色突出的區域也表明,當當主要核心業務就是書!整個配色在視覺上挺舒服,而導航和搜索也讓我很快找到我要買的書—《教父》。

          15

          ——站點的載入速度是個大問題,當當基本能在3秒內打開首頁,不錯的優化。廣告語和用色貼合國內消費人群的心理,起碼對于我來說,覺得:可信賴,不太亂。
          找到我要的書后,我點擊了購買,進入了我的購物車,有一個疑慮、不舒服:

          24

          —–不知道這個是好,還是壞,可能對于不同的人,有不同的感受,這個推薦本身是很好的,但讓我疑惑的是,它大面積的空間和眾多黃色按鈕,讓我找不著北了,因為到這步,我心里想著:該結算了,但處于商業目的,推薦區域在一定程度上(或許我比較閑的時候,推薦對我有用)干擾了我。
          接下來的結算流程很順利,我選擇的是貨到付款,很好的是:最后提示我,發貨地點是廣州,會在2-3天后發貨,郵箱也很快收到訂單生成的郵件。接下來就是等待,三天后,接到聲音不太舒服的電話,說是當當網的,我想,應該是書到了。可憐的是,對方收錢時,零錢不夠。
          —–最終是買到書了,快遞的小伙子找不了我的零錢,我也沒要了,書的包裝不太好。
          整個過程,總體打分8.5分??偟膩碚f,這本書的購買的體驗流暢度是很滿意的,沒有出現意外的中斷,要知道體驗的流程能完整的走完才意味著,這個產品、這個服務,是可用的,這是根基,其他的視覺效果和折扣等等,都是建立在他之上。而流暢度,就跟用戶在這個過程中碰到疑惑和不解的強烈程度是成反比的,想提高流暢度,就需要捋清楚,讓這個核心購買流程以最短的時間完成,減少干擾。

          2.邊緣體驗,一樣的重要

          上面的購書例子,有個地方很重要,那就是最后的線下體驗,我把他作為邊緣體驗的一種,有別于線上的核心業務。
          訂單下來后,系統能根據我提交的送貨地址,選出最近的發貨地點,減少物流時間,并且讓購買者知道,這個點是好的,說明:我一直為你著想。
          但快遞環節卻有點問題,因為存在一定的不可控因素。送快遞的人,需要經過一定的培訓,否則,是在砸當當的牌子。電話中的語氣讓人不舒服,書的包裝問題也讓人不安,書角磨破了,就這兩個點,購買者就有可能把整個交易撤銷。
          屬于邊緣體驗范疇的還有很多,例如:你到了友商網舉辦的一個論壇,門前的海報是否能夠傳遞本次論壇的信息、是否能夠將友商網的品牌進行詮釋,給你的良好感覺有多少?再例如市場營銷人員的著裝和談吐,在用戶眼里,在一定程度上,也在間接體驗他們的產品,起碼,穿著拖鞋的營銷,不會給人好的感覺。
          邊緣體驗,一樣重要。

          3.無形的體驗

          無形的體驗有兩種,一種是某用戶在使用、體驗產品后得出口碑傳播給另外的用戶或者潛在用戶,對于后者,他已開始無形情感體驗;另一種是用內而外的,是生產此產品的團隊或者說這個企業由內發出的一些信息,有意的或無意的信息。
          對于第一種,有時候口碑會決定了某個用戶是否與產品有緣,舉個例子,小姨買了一個xx牌子的冰箱,用了兩個月,燈管壞了,打開冰箱門燈不亮了,聯系維修后好景不長,還是壞,于是她對死黨說:以后打死也不會買xx牌的東西了,這個死黨有可能以后就跟這個牌子絕緣了,因為她對“它”的無形體驗很不好。當然,這個口碑產生的根源,就是產品質量本身。
          而第二種范圍包括的就比較大了,如果是上市公司,那么你的財務狀況是否良好;組織結構是不是頻繁大調整;員工整體對外的信息放射是否正面;網絡媒體,傳統媒體傳播的信息是否有利公司發展(不管是不是軟文),這些,都是用戶或者潛在用戶、普通人可能接觸到的一面,這也是一個無形的體驗。

          4.引領用戶的“體驗”

          在初步發展階段,無數產品和服務都是跟隨用戶需求,用戶需要什么,就給什么,以找準需求點為重中之重,這個是對的,但到了產品成熟期,到了市場占有率足夠高后,需要考慮的,就是引導潮流,引領用戶朝雙贏的方向。web中的視覺概念設計,汽車中的概念車,走的,就是這個路線。

          5.核心產品體驗

          這個放在最后是因為是人都知道,核心產品,必須做好可用性,通過不斷迭代,適當做好減法,提供一個體驗好的產品。具體到各個產品和服務各不相同,無需展開。
          總之,用戶體驗設計并不復雜,但需要耐得住性子,需要注意觸角,因為,從接觸這個品牌那一刻起,用戶體驗就在進行,是疊加還是消耗呢?就看能否盡量做到人人UE,能否將這些好的idea引導、聚合。

          posted @ 2010-03-23 13:32 Angle Wang 閱讀(204) | 評論 (0)編輯 收藏

          css sprite學習(轉)

          一,關于CSS Sprite
          CSS Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言,不高于200KB的單張圖片的所需載入時間基本是差不多的,所以無需 顧忌這個問題。
          按照yahoo的rules for high performance web sites的原則,應當較少Client與Server端間 的HTTP Request次數。通過CSS Sprites方法將多張圖片組裝成單獨的一張圖片,可以有效減少HTTP請求 的次數。
          當整幅圖片載入完成后,你就可以使用CSS方法通過設置背景位置的方式完成所需圖片的準確調用。

          加速的關鍵,不是降低重量,而是減少個數。傳統切圖講究精細,圖片規格越小越好,重量越小越好,其實規格大小無所謂,計算機統一都按byte計算??蛻舳嗣匡@示一張圖片都會向服務器發送請求,所以,圖片越多請求次數越多,造成延遲的可能性也就越大。

          二,CSS Sprite的使用

          有幾篇關于CSS Sprites的文章,基本上把其原理和機制說明得很清楚。

          What Are CSS Sprites?

          How to create CSS sprites

          Creating Rollover Effects with CSS Sprites

          Building a Dynamic Banner with CSS Sprites

          High Performance Web Sites中關于CSS Sprites的內容3.2. CSS Sprites

          三,CSS Sprite的例子

          [原文:http://blog.rexsong.com/?p=746#comments]

          1. 圖片限制(Image Slicing)

          典型如文本編輯器,小圖標特別多,打開時一張張跑出來,給用戶的感覺很不好。如果能用一張圖解決,則不會有這個問題,比如百度空間、163博客、Gmail都是這么做的。

          Image Slicing’s Kiss of Death
          http://www.alistapart.com/articles/sprites

          2. 單圖轉滾(Single-image Rollovers)

          觸發切換圖片的需求,傳統方案得重新請求新圖片,因為網絡問題經常造成停留或等待。如果能把多種狀態合并成一張圖,就能完美解決,然后再使用背景圖技術模擬動態效果。

          ColorScheme Ratings
          http://demo.rexsong.com/200608/colorscheme_ratings/

          3. 延長背景(Extend Background Image)

          如果圖片的某邊可以背景平鋪無限延長,則不需要每個角、每條邊單獨搞出來,圖片能少一個就少一個。其實,這個理論還可以擴展到四角容器里,好處是能大大簡化HTML Structure。

          Extend Background Image
          http://demo.rexsong.com/200705/extend_background_image/

          綜合案例

          Google Korea(1和2技巧)
          http://demo.rexsong.com/200705/google_korea/

          CSS Menus(2和3技巧)
          http://demo.rexsong.com/200705/css_background_menus/

          四,CSS Sprites的問題

          由于IE6存在的background的flicker問題IE6/Win, background image on <a>, cache=‘check every visit’: flicker!,有人針對此問題提出了解決方案Fast Rollovers Without Preload

          關于IE6的flicker問題,fivesevensix.com上有一篇很不錯的研究文章Minimize Flickering CSS Background Images in IE6

          另外:brunildo.orgCSS tests and experiments是關于css各種功能不錯的參考手冊和測試工具。

          五,相關資源

          What Are CSS Sprites?

          http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1

          CSS Sprites: Image Slicing’s Kiss of Death

          http://www.alistapart.com/articles/sprites/

          CSS Sprites Generator

          http://www.csssprites.com/

          http://spritegen.website-performance.org/

          Fast Rollovers Without Preload

          http://wellstyled.com/css-nopreload-rollovers.html

          JavaScript Sprite Animation Using jQuery

          http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

          http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

          How to create CSS sprites

          http://fatagnus.com/how-to-create-css-sprites/

          Creating Rollover Effects with CSS Sprites

          http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/

          Building a Dynamic Banner with CSS Sprites

          http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

          CSS Sprites and IE/Win Flicker Issue

          http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

          css用法測試工具:CSS tests and experiments

          http://www.brunildo.org/test/index.html

          posted @ 2010-03-23 13:24 Angle Wang 閱讀(631) | 評論 (0)編輯 收藏

          js點擊切換圖片

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
           <title></title>
           <script type="text/javascript" language="javascript" >
           <!--
            window.onload=function(){
           document.getElementById("box").style.backgroundImage="url(1.jpg)";
           var box=document.getElementById("box");
           box.onclick=function(){
           //alert(box.style.backgroundImage);
           //alert(typeof(box.style.backgroundImage));
           if(box.style.backgroundImage.indexOf("1.jpg")!=-1)
           {box.style.backgroundImage="url(2.jpg)";}else {box.style.backgroundImage="url(1.jpg)"}
           }
            }
           -->
           </script>
           <style type="text/css">
           <!--
           #box{width:800px;height:600px;}
           -->
           </style>
          </head
          &lt;body>
          <div id="box">
          &nbsp;
          </div>
          </body>
          </html>

          posted @ 2010-03-22 11:06 Angle Wang 閱讀(6463) | 評論 (1)編輯 收藏

          css布局:側邊固定長度,內容自動適應

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
           <title></title>
           <style type="text/css">
           <!--
           #wrap{background:#000;}
           #content{margin-left:250px;height:1000px;background:#963;}
           #sideber{width:240px;float:left;height:1000px;background:#369;}
           -->
           </style>
          </head>
          <body>
          <div id="wrap">
          <div id="sideber">&nbsp;</div> <!--要讓浮動元素放前面-->
          <div id="content">&nbsp;</div>
          </div>
          </body>
          </html>

          posted @ 2010-03-22 10:44 Angle Wang 閱讀(489) | 評論 (0)編輯 收藏

          IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一覽表

          不同的瀏覽器對CSS的解釋都有一點出入,特別是padding, line-height這些要細微控制的地方,下面的hack基本可以解決這個問題:
          • 在屬性前加下劃線(_),那么此屬性只會被IE6解釋
          • 在屬性前加星號(*),此屬性只會被IE7解釋
          • 在屬性值后面加"\9",表示此屬性只會被IE8解釋
          詳細出處參考:http://www.jb51.net/css/24946.html

          各瀏覽器CSS hack兼容表:
           

          整體測試代碼示例:

          復制代碼代碼如下:
          .test{
          color:#000000;
          color:#0000FF\0;
          [color:#00FF00;
          *color:#FFFF00;
          _color:#FF0000;
          }


          復制代碼代碼如下:
          #menu { line-height: 23px; }/* firefox 瀏覽器實行這句定義 */
          #menu { line-height: 26px\9; }/*ie6,ie7,ie8 這句定義主要尖對IE8來hack*/
          #menu { *line-height: 23px; }/*ie6,ie7 這句定義主要尖對IE7來hack*/
          #menu { _line-height: 23px; }/*ie6 瀏覽器優先實行這句定義*/
          或者寫成一句,注意順序
          #menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; }
          或者
          * html #menu { line-height: 23px; } /* IE6 瀏覽器實行這句定義 */
          *+html #menu { line-height: 23px; }/* IE7 瀏覽器實行這句定義*/

          其他說明:
          1、如果你的頁面對IE7兼容沒有問題,又不想大量修改現有代碼,同時又能在IE8中正常使用,微軟聲稱,開發商僅需要在目前兼容IE7的網站上添加一行代碼即可解決問題,此代碼如下:
          <meta http-equiv="x-ua-compatible" content="ie=7" />
          2、body:nth-of-type(1) 如果這樣寫,表示全局查找body,將會對應第一個<body>。
          3、還有其他寫法,比如:
          *html #test{}或者 *+html #test{}
          4、*+html 對IE7的hack 必須保證HTML頂部有如下聲明:
          http://www.w3.org/TR/html4/loose.dtd
          5、順序:Firefox、IE8、IE7、IE6依次排列。
          小知識:什么是CSS hack?
            由于不同的瀏覽器,比如IE6、IE7、IE8、Firefox等,對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。
            這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。
            這個針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack,也叫寫CSS hack。
          下面是補充:

          復制代碼代碼如下:
          selector{
          property:value; /* 所有瀏覽器 */
          property:value\9; /* 所有IE瀏覽器 */
          +property:value; /* IE7 */
          _property:value; /* IE6 */
          }


          詳細出處參考:http://www.jb51.net/css/24946.html

          posted @ 2010-03-16 11:28 Angle Wang 閱讀(1156) | 評論 (0)編輯 收藏

          CSS3的border-radius(圓角)

          border-radius(圓角)的幾點說明.

           

          border-radius(圓角)的幾點說明:

          border-radius:長度
          Firefox支持border-radius(圓角):-moz-border-radius:2px;
          webkit內核的Safari和Chrome支持border-radius(圓角):-webkit-border-radius:2px;
          Opera支持border-radius(圓角):border-radius:2px;
          IE不支持border-radius(圓角)

          我們還可以隨意指定圓角的位置,左上、左下、右上、右下四個方向。在firefox、webkit內核的Safari和Chrome和opera(css3)、中的具體書寫格式如下:

          -moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
          -moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
          -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
          -moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

          border-radius(圓角)還有其他一些用法,Firefox、webkit內核的Safari和Chrome和opera(css3)其他寫法有些略微的差異,具體可以查看以下網址:https://developer.mozilla.org/en/CSS:-moz-border-radius
          http://www.the-art-of-web.com/css/border-radius/
          http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/

          eg:/* content */
          .blockcommon{
           margin-left: 10px;
           margin-right: 10px;
           -moz-border-radius: 3px;
           -khtml-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           background: #fff;
           border: 1px solid #eed8c6;
          }

          posted @ 2010-03-12 16:16 Angle Wang 閱讀(296) | 評論 (0)編輯 收藏

          css下margin、padding、border、background和font縮寫示例

          CSS代碼簡化在工作中是非常有益的,也是必要的。在編寫CSS代碼時,經常會出現冗余的代碼,為了提高代碼的質量及文件壓縮到最小,使代碼具有可讀性,不得不把CSS代碼簡化。
          margin
            margin-top:1px;
            margin-right:1px;
             margin-bottom:1px;
            margin-left:1px;
            代碼簡化為:margin:1px
            margin-top:1px;
            margin-right:2px;
            margin-bottom:1px;
            margin-left:2px;
            代碼簡化為:margin:1px 2px
            margin-top:1px;
            margin-right:2px;
            margin-bottom:3px;
            margin-left:2px;
            代碼簡化為:margin:1px 2px 3px
            margin-top:1px;
             margin-right:2px;
            margin-bottom:3px;
            margin-left:4px;
            代碼簡化為:margin:1px 2px 3px 4px
            注意:當屬性值是0的時候單位可以不寫如:0px 直接就寫成0
          padding
            padding的書寫方法和margin相類似
            padding-top:1px;
             padding-right:1px;
            padding-bottom:1px;
            padding-left:1px;
            代碼簡化為:padding:1px
            padding-top:1px;
            padding-right:2px;
            padding-bottom:1px;
            padding-left:2px;
            代碼簡化為:padding:1px 2px
            padding-top:1px;
            padding-right:2px;
             padding-bottom:3px;
            padding-left:2px;
            代碼簡化為:padding:1px 2px 3px
            padding-top:1px;
            padding-right:2px;
             padding-bottom:3px;
            padding-left:4px;
            代碼簡化為:padding:1px 2px 3px 4px
          border
            border-width:1px;
             border-style:solid;
            border-color:#000000;
            代碼簡化為:border:1px solid #000
          background
            background-color:#CCFFFF;
             background-image:url(圖片路徑);
            background-repeat:repeat-x;
             background-position:5px 4px;
            代碼簡化為:background:#CFF url(圖片路徑) repeat-x 5px 4px
          font
            font-size:26px;
             font-weight:bold;
            font-family: “宋體”;
            代碼簡化為:font:26px bold “宋體”
          color屬性值
            color:#000000;
            color:#ff0000;
            代碼簡化為:color:#000, color:#f00

          posted @ 2010-03-12 14:17 Angle Wang 閱讀(244) | 評論 (0)編輯 收藏

          淺淡!important對CSS的重要性(轉)

          CSS中的!important是一個非常重要的屬性,有時候發揮著非常大的作用,52CSS.com這方面的知識并不是非常多,我們看下面的文章,對它作比較感觀的了解。
            前幾天寫一些CSS代碼的時候又難為我了,因為那個該死的IE6對CSS的支持是如此的差勁,以前我還沒注意過,因為做的東西基本都是基于IE的,可是我這次為博客寫的CSS要支持不止IE一個瀏覽器,可恨的是我裝的Windows 7,這里面自帶的是IE8瀏覽器,我自認為已經沒有問題了,可是打開IE6,仍然出現錯位,于是我決定看看IE6到底是什么情況。
            我把所有的CSS塊兒全部使用邊框包起來,結果看到在IE中兩個div之間的距離明顯要寬于其他瀏覽器,比如你寫一個div的margin屬性為20px,那么在IE中就好像是40px一樣,這也就是為什么本來精度計算的剛剛好,在IE下卻偏偏錯位的原因。
            后來我看到了!important這個屬性,這個屬性其實也是css規范中的,結果IE6愣是不支持,也正因為它不支持,才讓很多的CSSer們找到了解決的方法。一般來講,在css中,如果在同一個css塊中寫下兩個同樣的屬性,那么其實是按照最下面的來執行的,比如說:

           Example Source Code [www.52css.com]
          .home{
              margin-left:20px;
              margin-left:40px;
          }

            那么在執行的時候其實是按照40px來執行的,!important的出現就是為了讓用戶自己設置被執行語句的優先級。如果把上面的語句改為:

           Example Source Code [www.52css.com]
          .home{
              margin-left:20px!important;
              margin-left:40px;
          }

            那么在火狐、google瀏覽器以及IE7以上版本下將會按照20px來執行,而在IE6下卻仍然按照40px來執行,因為IE6并不支持!important規范,我們就可以按照這個規則來滿足IE6的設計需要,什么時候發現IE6和其他瀏覽器顯示效果不同,那么就設置兩個,在上面的一個加入!important標記,而下面的一句則不需要添加,這樣IE6就按照下面的來執行了。資深的CSSer說:如今的CSS處處!important。這可都是天殺的IE6惹的禍,大家說IE6就是一坨代謝產物一點也不為過。
            

          posted @ 2010-03-11 15:14 Angle Wang 閱讀(221) | 評論 (0)編輯 收藏

          學習中的點滴

          記錄學習,工作中遇到的點點滴滴的問題。
          1、需要把 background-attachment 屬性設置為 "fixed",才能保證該屬性在 Firefox 和 Opera 中正常工作。
          例子:

          <html>
            <head>
            <style type="text/css">
             body
             {
               background-image:url('eg_bg_03.gif');
               background-repeat:no-repeat;
               background-position:center;
               background-attachment:fixed;
             }
            </style>
            </head>
            <body>

            </body>
          </html>

          2、

          clear:both

           CSS中 clear:both;可以終結在出現他之前的浮動
            

          語法: clear : none | left |right | both


          參數:

          none : 允許兩邊都可以有浮動對象

          both : 不允許有浮動對象

          left : 不允許左邊有浮動對象

          right : 不允許右邊有浮動對象


          說明: 該屬性的值指出了不允許有浮動對象的邊。請參閱float屬性。 對應的腳本特性為clear


          示例:

          div { clear : left }

          img { float: right }

          <div style="clear:both;"></div>

          主要是用在div套div的結構中。如果內div是浮動的,一般都需要clear浮動,不然的話內div會超出外div的框架

          所用什么時候用clear:both;就很重要,一般我們在需要清除浮動的時候用到clear:both;不要輕意用到clear:both;因為它也有副伯用.

          我們寫一個clear:both;的例子:

          <div style="float:left;width:100px;"> clear:both第1行第1列,</div>
          <div style="float:left;width:700px;"> clear:both第1行第2列,</div>
          <div style="clear:both;"> clear:both第2行。</div>


          <div style="float:left;width:100px;"> 第1列,</div>
          <div style="float:left;width:700px;"> 第2列,</div>
          <div>第三列</div>
          ------------------------------------------------------------------------------------------------
          <div style="float:left;width:100px;"> 第1列,</div>
          <div style="float:left;width:700px;"> 第2列,</div>
          <div style="clear:both;"></div>
          <div>第三列</div>


          3css疑難問題收集
          表格與內聯對象不換行:
          table{
          width:30em; 
          table-layout:fixed;/* 只有定義了表格的布局算法為fixed,下面td的定義才能起作用。 */ 
          td{ 
          width:100%; 
          word-break:keep-all;/* 不換行 */ 
          white-space:nowrap;/* 不換行 */ 
          overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ 
          text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/ 

          .text-overflow { 
          display:block;/*內聯對象需加*/ 
          width:31em; 
          word-break:keep-all;/* 不換行 */ 
          white-space:nowrap;/* 不換行 */ 
          overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ 
          text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/ 
          }

          posted @ 2010-03-11 10:46 Angle Wang 閱讀(254) | 評論 (0)編輯 收藏

          隨機顯示圖片的JS代碼

          關于隨機顯示圖片的代碼很多,但有的只能在IE下才有效果,如果換在Firefox或其他瀏覽器下就會失去效果,能做到兩全的JS真的很少,今天給大家介紹一個很簡單的JS隨機顯示圖片的代碼。
          以下是代碼:

          // JavaScript Document
          var m=10; //隨機顯示圖片的總數量
          var n=Math.floor(Math.random()*m+1)
          document.write ("<img src='/banner/banner_"+n+".gif' border=0 galleryimg=no>");
          //

            上面代碼的意思是圖片保存在/banner/文件夾下,根據設置的圖片總數量,分別放入10張從banner_01.gif到banner_10.gif的圖片,在執行這個JS時,它會隨機顯示從banner_01.gif到banner_10.gif的圖片。
            保存這個JS為banner.js。

          在網頁相應的地方寫入調用代碼

          以下是代碼:

          <script language="JavaScript" src="/Js/banner.js"></script>//-->

          //調用

          這段代碼可以在IE和Firefox下有效顯示。


          簡單的JavaScript隨機顯示圖片廣告的效果
          兼容性:IE6+ FireFox2+ Opera9+

          <script>
          /******************************************************
          * 簡單的JavaScript隨機顯示圖片廣告的效果  Share JavaScript (http://www.ShareJS.com)
          * 使用此腳本程序,請保留此聲明
          * 獲取此腳本以及更多的JavaScript程序,請訪問 http://www.ShareJS.com
          ******************************************************/

          var str=new Array("http://www.sharejs.com/code/image/img/1.jpg","http://www.sharejs.com/code/image/img/2.jpg","http://www.sharejs.com/code/image/img/3.jpg");
          var a;
          a=str[parseInt(Math.random()*(str.length))];
          document.write("<img src="+a+">");
          </script>


          posted @ 2010-03-04 09:47 Angle Wang 閱讀(3558) | 評論 (0)編輯 收藏

          相鄰選擇器

          這個選擇器的正式名稱(根據W3C)是臨近同屬組合器。我覺得這個名稱既長又復雜,因此把它簡稱為相鄰選擇器。雖說是"相鄰",但相鄰選擇器選取的卻是一個元素的下一個元素?;趫D3-14中的標記,圖3-24中的標記示范了相鄰選擇器的形式。

          注意:

          IE 6本身并不支持相鄰選擇器;請查閱本書的網址www.wrox.com/go/beginning_css2e以獲取兼容性方面的幫助。

           
          圖  3-24

          在圖3-24中,可以看到加號被用來表示兩個元素之間的相鄰關系。你在這點上也許會有疑問:這么做看起來很舒服,但實際用途是什么?難道不能單獨引用div#body來達到同樣的效果嗎?為什么需要一個相鄰選擇器?很高興你這樣問。在特定的情況下這個選擇器會發揮作用,比如當幾份HTML文檔引用同一份樣式表時。在一部分文檔中,帶有id名稱heading的<div>元素和帶有id名稱body的<div>元素是相鄰的,即它們在源文件中相繼出現。在其他文檔中這兩個元素或許不是相鄰的。如果你對這兩種理論上不同的文檔有不同的模板需求的話,自然會想通過某種方法來引用那些相鄰的元素,這就是相鄰選擇器實際應用的一個例子。正如我在上一節"直接子選擇器"中提到的那樣,有時你不想創建新的id和類名。在某些情況下,當你使用相鄰選擇器時,能夠避免創建新的類和id名稱。

          在接下來的概念驗證型例子中,你將親自試驗相鄰選擇器。

          試一試 相鄰選擇器

          例3-5  按以下步驟,了解相鄰選擇器是如何工作的。

          1. 在文本編輯器中輸入以下標記:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          " <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
          <head>
          <title>Next Sibling Selectors</title>
          <link rel='stylesheet' type='text/css' href='Example_3-5.css' />
          </head>
          <body>
          <h1>Next Sibling Selectors</h1>
          <p>
          The next sibling selector (or adjacent sibling combinator as
          it's officially called) allows you to select an element based on
          its sibling. This paragraph has a lightyellow background and
          darkkhaki text.
          </p>
          <p>
          This paragraph has a yellowgreen background and green text.
          </p>
          <p>
          This paragraph has no colored background, border, or text.
          </p>
          </body>
          </html>

          2. 保存上述標記為Example_3-5.html。

          3. 在文本編輯器中輸入以下CSS:

          body {
          font: 12px sans-serif;
          }
          p {
          padding: 5px;
          }
          h1 + p {
          background: lightyellow;
          color: darkkhaki;
          border: 1px solid darkkhaki;
          }
          h1 + p + p {
          background: yellowgreen;
          color: green;
          border: 1px solid green;
          }
          4.保存樣式表為Example_3-5.css。將它在支持相鄰選擇器的瀏覽器中載入,你將看到如圖3-25所示的結果。
           
          (點擊查看大圖)圖  3-25

          工作原理

          相鄰選擇器基于相鄰關系應用樣式。下面是對Example_3-5.css中有關樣式的分析。

          Example_3-5.css中的第一個樣式應用于Example_3-5.html的第一段。h1 + p表示如果<p>元素是直接跟在<h1>元素后的元素,則應用本規則中的聲明。

          h1 + p {
          background: lightyellow;
          color: darkkhaki;
          border: 1px solid darkkhaki;
          }

          只有當<p>元素是直接與<h1>元素相鄰的元素時,這條規則才起作用。

          第二條規則里使用了一個更為復雜的相鄰選擇器。它表示如果一個<p>元素直接相鄰于另一個<p>元素,并且后者也直接相鄰于一個<h1>元素時,應用本規則中的聲明。

          h1 + p + p {
          background: yellowgreen;
          color: green;
          border: 1px solid green;
          }

          就像直接子選擇器可以基于父子關系應用樣式一樣,相鄰選擇器可以基于相鄰關系應用樣式。

          在很多時候,如果能基于元素的屬性或屬性值應用樣式會很有用。

          posted @ 2010-02-26 13:10 Angle Wang 閱讀(314) | 評論 (0)編輯 收藏

          li和ul標簽用法舉例

          LI代碼的格式化:
          A).運用CSS格式化列表符: ul li{
          list-style-type:none;
          }
          B).如果你想將列表符換成圖像,則: ul li{
          list-style-type:none;
          list-style-image: url(/blog/images/icon.gif);
          }
          C).為了左對齊,可以用如下代碼: ul{
          list-style-type:none;
          margin:0px;
          }
          D).如果想給列表加背景色,可以用如下代碼: ul{
          list-style-type: none;
          margin:0px;
          }
          ul li{
          background:#CCC;
          }
          E).如果想給列表加MOUSEOVER背景變色效果,可以用如下代碼: ul{ list-style-type: none; margin:0px; }
          ul li a{ display:block; width: 100%; background:#ccc; }
          ul li a:hover{ background:#999; }說明:display:block;這一行必須要加的,這樣才能塊狀顯示!

          F).LI中的元素水平排列,關鍵FLOAT:LEFT: ul{
          list-style-type:none;
          width:100%;
          }
          ul li{
          width:80px;
          float:left;
          }
          <ul><li>的區別
          <LI> 的參數設定(常用):
          例如: <li type="square" value="4">

          type="square"
          只適用于非順序清單,設定符號款式,其值有三種,如下,內定為 type="disc":
          符號 是當 type="disc" 時的列項符號。
          符號 if" width=10 height=10 border=0> 是當 type="circle" 時的列項符號。
          符號 是當 type="square" 時的列項符號。
          value="4"
          只適用于順序清單,設定該一項的數目,其後各項將以此作為起始數目而遞增,但前面各項則不受影響,其值只能是 1,2,3.. 等整數,沒有內定值。
          <UL>稱為無序清單標記。
          所謂無序清單就是在每一項前面加上 、、等符號,故又稱符號清單。
          <UL> 的參數設定(常用):
          例如: <UL type="square">

          type="square"
          設定符號款式,其值有三種,如下,內定為 type="disc":
          符號 是當 type="disc" 時的列項符號。
          符號 是當 type="circle" 時的列項符號。
          符號 是當 type="square" 時的列項符號。

          <ul>是項目列表,<li>是列表項,項目列表就是用符號來列的,所以你列出來默認的就是黑點啦,還有一個是<ol>這個是編號列表,用數字來列的,也是用<li>做列表項
          <li>是 list item 即列表項,但列表有很兩種,所以外面得有 <ul> 或者 <ol> 用來區別無序列表(小點點)和有序列表(1,2,3...)。

          posted @ 2010-02-25 11:14 Angle Wang 閱讀(392) | 評論 (0)編輯 收藏

          CSS實現隔行換色2種方法

          網頁設計制作,CSS實現隔行換色的2種方法:

          第1種方法:
          <style type="text/css">
          UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
          }
          </style>
          <ul class="myul1">
          <li id="li1">111</li>
          <li id="li2">222</li>
          <li id="li2">333</li>
          <li id="li2">444</li>
          <li id="li2">555</li>
          <li id="li2">666</li>
          </ul>


          第2種方法:

          <style type="text/css">
          <!--
          .li01 { background:#FFF; }
          .li02 { background:#000; }
          li a{width:100%;display:block;}
          li a:hover{background:red;}
          -->
          </style>

          <div id="list01"><ul>
          <li class="title"><a href="#">title</a></li>
          <li><a href="#">111</a></li>
          <li><a href="#">222</a></li>
          <li><a href="#">333</a></li>
          <li><a href="#">444</a></li>
          <li><a href="#">555</a></li>
          <li><a href="#">666</a></li>
          </ul></div>

          <script Language="Javascript1.2">

          objName=document.getElementById("list01").getElementsByTagName("li")

          for (i=0;i<objName.length;i++) {
          (i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
          }
          </script> 

          posted @ 2010-02-25 10:35 Angle Wang 閱讀(244) | 評論 (0)編輯 收藏

          DIV CSS網頁布局:三行三列自適應高度的DIV布局

          通常在DIV布局中,自適應高度一直是比較頭疼的問題,一般大都采用背景圖、外套DIV、右欄覆蓋左欄來解決?,F在加了腳本后,簡單多了,假如有三個水平并列的DIV,fbox、mbox、sbox,只要在標簽中寫入:onload="P7_equalCols('fbox','mbox','sbox')",測試條件:ie5.x、ie6.0、FF1.03、NS7.2、opera8.01   
          JS代碼:版權歸原作者,僅供學習研究.
           Example Source Codeom]
          /*  
          ------------------------------------------------ 
          PVII Equal CSS Columns scripts 
          Copyright (c) 2005 Project Seven Development 
          www.projectseven.com 
          Version: 1.5.0 
          ------------------------------------------------ 
          */ 
          function P7_colH(){ //v1.5 by PVII-www.projectseven.com 
          var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){ 
          for(i=0;i oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i dA[i].style.height=h+'px';}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);}}if(an){ 
          for(i=0;ih){ 
          dA[i].style.height=(h-(hh-h))+'px';}}}else{document.p7eqa=1;} 
          document.p7eqth=document.body.offsetHeight; 
          document.p7eqtw=document.body.offsetWidth;} 

          function P7_eqT(){ //v1.5 by PVII-www.projectseven.com 
          if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw! =document.body.offsetWidth){ 
          P7_colH();} 

          function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com 
          if(document.getElementById){document.p7eqc=new Array;for(i=0;i document.p7eqc[i]=document.getElementById(arguments[i]);} setInterval("P7_eqT()",10);} 

          function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com 
          var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height) ; 
          ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px'; 
          oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';} 
          if(nh

          posted @ 2010-02-25 10:08 Angle Wang 閱讀(536) | 評論 (0)編輯 收藏

          DIV CSS網頁布局常用的方法與技巧

          CSS布局常用的方法
          float:none|left|right 
          取值:
          none: 默認值。對象不飄浮
          left: 文本流向對象的右邊
          right: 文本流向對象的左邊 

          它是怎樣工作的,看個一行兩列的例子 
          xhtml代碼:

           Example Source Code
          <div id="wrap"> 
          <div id="column1">這里是第一列</div> 
          <div id="column2">這里是第二列</div> 
          <div class="clear"></div> /*這是違背web標準意圖的,只是想說明在它下面的元素需要清除浮動*/ 
          </div>

          CSS代碼:
           Example Source Code
          #wrap{width:100;height:auto;} 
          #column1{float:left;width:40;} 
          #column2{float:right;width:60;} 
          .clear{clear:both;}


          position:static|absolute|fixed|relative
          取值:
          static: 默認值。無特殊定位,對象遵循HTML定位規則
          absolute: 將對象從文檔流中拖出,使用left,right,top,bottom等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象,則依據body對象。而其層疊通過z-index屬性定義
          fixed: 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范
          relative: 對象不可層疊,但將依據left,right,top,bottom等屬性在正常文檔流中偏移位置 

          它來實現一行兩列的例子 
          xhtml代碼:
           Example Source Code
          <div id="wrap"> 
          <div id="column1">這里是第一列</div> 
          <div id="column2">這里是第二列</div> 
          </div>

          CSS代碼:
           Example Source Code
          #wrap{position:relative;/*相對定位*/width:770px;} 
          #column1{position:absolute;top:0;left:0;width:300px;} 
          #column2{position:absolute;top:0;right:0;width:470px;} 

          他們的區別在哪?
          顯然,float是相對定位的,會隨著瀏覽器的大小和分辨率的變化而改變,而position就不行了,所以一般情況下還是float布局!


          CSS常用布局實例
          單行一列

           Example Source Code
          body{margin:0px;padding:0px;text-align:center;} 
          #content{margin-left:auto;margin-right:auto;width:400px;} 

          兩行一列 
           Example Source Code
          body{margin:0px;padding:0px;text-align:center;} 
          #content-top{margin-left:auto;margin-right:auto;width:400px;} 
          #content-end{margin-left:auto;margin-right:auto;width:400px;} 

          三行一列
           Example Source Code
          body{margin:0px;padding:0px;text-align:center;} 
          #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} 
          #content-mid{margin-left:auto;margin-right:auto;width:400px;} 
          #content-end{margin-left:auto;margin-right:auto;width:400px;}

          單行兩列
           Example Source Code
          #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
          #bodycenter#dv1{float:left;width:280px;} 
          #bodycenter#dv2{float:right;width:420px;} 

          兩行兩列
           Example Source Code
          #header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
          #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
          #bodycenter#dv1{float:left;width:280px;} 
          #bodycenter#dv2{float:right;width:420px;} 

          三行兩列
           Example Source Code
          #header{width:700px;margin-right:auto;margin-left:auto;} 
          #bodycenter{width:700px;margin-right:auto;margin-left:auto;} 
          #bodycenter#dv1{float:left;width:280px;} 
          #bodycenter#dv2{float:right;width:420px;} 
          #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;} 


          單行三列
          絕對定位 

           Example Source Code
          #left{position:absolute;top:0px;left:0px;width:120px;} 
          #middle{margin:0px190px0px190px;} 
          #right{position:absolute;top:0px;right:0px;width:120px;} 


          float定位一
          xhtml代碼:
           Example Source Code
          <div id="wrap"> 
          <div id="column"> 
          <div id="column1">這里是第一列</div> 
          <div id="column2">這里是第二列</div> 
          <div class="clear"></div>/*用法web標準不建議,但是記住下面元素需要清除浮動*/ 
          </div> 
          <divid="column3">這里是第三列</div> 
          <divclass="clear"></div>/*用法web標準不建議,但是記住下面元素需要清除浮動*/ 
          </div> 

          CSS代碼:
           Example Source Code
          #wrap{width:100;height:auto;} 
          #column{float:left;width:60;} 
          #column1{float:left;width:30;} 
          #column2{float:right;width:30;} 
          #column3{float:right;width:40;} 
          .clear{clear:both;} 


          float定位二
          xhtml代碼:
           Example Source Code
          <div id="center"class="column"> 
          <h1>Thisisthemaincontent.</h1> 
          </div> 
          <div id="left"class="column"> 
          <h2>Thisistheleftsidebar.</h2> 
          </div> 
          <div id="right"class="column"> 
          <h2>Thisistherightsidebar.</h2> 
          </div>

          CSS代碼:
           Example Source Code
          body{ 
          margin:0; 
          padding-left:200px;/*LCfullwidth*/ 
          padding-right:190px;/*RCfullwidth CCpadding*/ 
          min-width:200px;/*LCfullwidth CCpadding*/ 

          .column{ 
          position:relative; 
          float:left; 

          #center{ 
          width:100; 

          #left{ 
          width:200px;/*LCwidth*/ 
          right:200px;/*LCfullwidth*/ 
          margin-left:-100; 

          #right{ 
          width:190px;/*RCwidth*/ 
          margin-right:-100; 
          }

          posted @ 2010-02-25 10:04 Angle Wang 閱讀(185) | 評論 (0)編輯 收藏

          CSS Hack匯總快查

           

          原文:http://andymao.com/andy/post/76.html

          屏蔽IE瀏覽器(也就是IE下不顯示)

          *:lang(zh) select {font:12px  !important;} /*FF的專用*/
          select:empty {font:12px  !important;} /*safari可見*/
          這里select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器獨有的。
          僅IE7識別

          *+html  {…}
          當面臨需要只針對IE7做樣式的時候就可以采用這個HACK。
          IE6及IE6以下識別

          * html  {…}
          這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
          html/**/ >body  select {……}
          這句與上一句的作用相同。
          僅IE6不識別

          select { display /*IE6不識別*/:none;}
          這里主要是通過CSS注釋分開一個屬性與值,流釋在冒號前。
          僅IE6與IE5不識別

          select/**/ { display /*IE6,IE5不識別*/:none;}
          這里與上面一句不同的是在選擇符與花括號之間多了一個CSS注釋。
          僅IE5不識別

          select/*IE5不識別*/ { display:none;}
          這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別
          盒模型解決方法

          selct {width:IE5.x寬度; voice-family :"\"}\""; voice-family:inherit; width:正確寬度;}
          盒模型的清除方法不是通過!important來處理的。這點要明確。
          清除浮動

          select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
          在Firefox中,當子級都為浮動時,那么父級的高度就無法完全的包住整個子級,那么這時用這個清除浮動的HACK來對父級做一次定義,那么就可以解決這個問題 。

          截字省略號

          select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
          這個是在越出長度后會自行的截掉多出部分的文字,并以省略號結尾,很好的一個技術。只是目前Firefox并不支持。
          只有Opera識別

          @media all and (min-width: 0px){ select {……}  }
          針對Opera瀏覽器做單獨的設定。
          以上都是寫CSS中的一些HACK,這些都是用來解決局部的兼容性問題,如果希望把兼容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導入特別的樣式,也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。

          IE5.x的過濾器,只有IE5.x可見


          @media tty {
          i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
          }/* */
          IE5/MAC的過濾器,一般用不著

          [Copy to clipboard] [ - ]CODE:
          /*\*//*/
              @import "ie5mac.css";
          /**/
          IE的if條件Hack

          <!--[if IE]> Only IE <![endif]-->
          所有的IE可識別
          <!--[if IE 5.0]> Only IE 5.0 <![endif]-->
          只有IE5.0可以識別
          <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
          IE5.0包換IE5.5都可以識別
          <!--[if lt IE 6]> Only IE 6- <![endif]-->
          僅IE6可識別
          <!--[if gte IE 6]> Only IE 6/+ <![endif]-->
          IE6以及IE6以下的IE5.x都可識別
          <!--[if lte IE 7]> Only IE 7/- <![endif]-->
          僅IE7可識別

          posted @ 2010-02-25 10:00 Angle Wang 閱讀(160) | 評論 (0)編輯 收藏

          制作網頁的一般大小

          高度:沒有一個固定值,因為每個人的瀏覽器的工具欄不同。
          寬度:
          1、在IE6.0下,寬度為顯示器分辨率減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
          2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005
          3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001
          注:Firefox或Opear在內容少于瀏覽器高度時不顯示右側滾動條。

          所以如果是1024的分辨率,你的網頁不如設成1000安全一點。
          如果是800的分辨率一般都設成770

          posted @ 2010-02-21 09:17 Angle Wang 閱讀(302) | 評論 (0)編輯 收藏

          主站蜘蛛池模板: 丽水市| 黄梅县| 措美县| 潮州市| 华亭县| 江城| 南江县| 平度市| 湾仔区| 南丹县| 广宗县| 汝阳县| 行唐县| 广水市| 泸州市| 盐池县| 介休市| 桓台县| 武夷山市| 枞阳县| 公主岭市| 商河县| 壶关县| 农安县| 通辽市| 开远市| 山丹县| 孟州市| 吉木乃县| 桓台县| 蒲城县| 渝北区| 苍南县| 天全县| 和龙市| 永寿县| 黎城县| 阿城市| 溆浦县| 邻水| 宁夏|