0基于浮動方法的多欄布局練習

1、基于浮動方法的多欄布局 ；但基于浮動方法的多欄布局 ；但標記文 因此，這里不能浮動“extras”div，因為不能跳過前面的塊元素浮動到 樣式基于浮動方法的多欄布局練習.doc 第 1 頁 共 9 #headerpadding: 15px;#mainbackground-color: divdivdivdiv如果 extras 也設置背景顏色，則顏色跨過 main 的margin margin 如果 extras 也設置背景顏色，則顏色跨過 main 的margin margin 標記文基于浮動方法的多欄布局練習.doc 第 2 頁 共 9 div列表divfloat:left;/*/ wid

2、th: 60%;margin-right:5%;/*/ margin-left: 5%;#footerclear:left;/*clear*/ padding: 15px;background:#extrasmargin-right:5%/*定義附加部分（邊欄）bodyfont-family: 宋體, sans-margin:0;/*/ padding: 0;limargin: 10px 0;樣式樣式基于浮動方法的多欄布局練習第 3 頁 共 9 #container width: 750px; border:solid1px;#headerpadding: 15px;#linksfloat:

3、left;width:#mainfloat: left;width:#messagefloat: left;width:#footerclear:both;/*clear*/ padding: 15px;background:bodyfont-size: small;margin:padding:h2,ul,ppadding:0px8px;/*padding、border marginpadding、border margin 屬性（0 ）divcontainer 每個 div 中的空間，是通過給各 div 所包含的元素（h2、ul、padding 等）基于浮作業(yè)要求原始文檔【練基于浮動方法的

4、多欄布局練習第 4 頁 共 9 !DOCTYPEhtmlPUBLIC-/W3C/DTDXHTML1.0Transitional/EN 有頁腳的兩欄布局stylebodyfont-family:verdana,sans-serif; font-size: small;margin:padding:padding:0p limargin: 10px 0;limargin: 10px 0;基于浮動方法的多欄布局練習.doc 第 5基于浮動方法的多欄布局練習.doc 第 5 頁 共 9 Web主要參考書Web 信息架構(gòu)：設計大PracticingInformation本：信息架構(gòu)隨處可見是否需要信息架

5、構(gòu)師信息架構(gòu)師的資格以及來自哪些領域信息生態(tài)以及對信息架構(gòu)實踐的影響 信息架構(gòu)？是一種藝術，科學，或手藝？ 建立信息架構(gòu)？必須具備哪些條件？這些問題是 這些信息架構(gòu)師要解決 。 寫文章，也出書。 在郵件列表上爭論，在研討會上熱情辯論。頭也禿了，夜也熬了。這真是嚴肅的 。然而，某種很有 的東西正在發(fā)酵，那不是 智力 下的理論及對自身存在的痛苦認知所能控制的。 正被信息架構(gòu)包圍起來，一點都不夸張。老匯的交界處。建筑物光滑的表面上跳動著實時的信息，那是 的平面顯示 牌及投影技術。商業(yè) 、金融信息、公司商標，以及 URL都用霓虹燈照射出來。出租車在交通阻塞時按著喇叭，那些閃耀的車頂 吸引著人們的注意力

6、。行人（或者說是“用戶”）摩肩接踵，拿 打 或站在街角收發(fā)電子郵件，或者用他們的無線 PDA 尋找方向。這是 競爭的內(nèi)容、 和元數(shù)據(jù)的世界，這些都是為了引起你的注意。但是，和真實的虛擬世界相比那根本不算什么，這是一個 花越來越多時間沉浸、bbc.co.uk 或者你喜歡的博客。要計劃旅行？會滿足你的任何需求。你的綠鬣蜥蜴出事了呢？不用出門，你可以在找。 自從互聯(lián)網(wǎng)出現(xiàn)以來，已經(jīng)有數(shù)十億以上的網(wǎng)頁涌現(xiàn)。你猜怎么著？這些網(wǎng)頁的進一步標container 為不同內(nèi)容（進一步標container 為不同內(nèi)容（h2 區(qū)分）div header main extras（可 links 和 message 、

7、footer 。添加樣式container width 屬性和邊框（邊框最后可以取消基于浮動方法的多欄布局練習.doc 第 6 頁 共 9 border:solid1px;/*為容器元素添加邊框以便檢測，可以刪除ul基于信息理解的信息構(gòu)建著信：信息選取、表達與透析. Richard Saul 著譯Web導航設計（Kalbach，J.）著信息架構(gòu)學21世紀的專業(yè)（美）莫錦繡藍圖：怎樣規(guī)劃令人流連忘返（第2版）. （美Christina相關評論John Rhodes，可用性這本書吧。 Dave Snowden，著名知識管理IBM Cynefin 中心用管理思維，將信息管理恢復到其應有的地位上。 a 清除頁腳浮動，使之位于浮動內(nèi)容下邊（在#footer中添加屬性 清除頁腳浮動，使之位于浮動內(nèi)容下邊（在#footer中添加屬性div 基于浮動方法的多欄布局練習.doc 第 7 頁 共 9 #mainfloat:right; width:#headerpadding: 15px; #footerpadding: 15px; 的試如果添加背景顏色（maindiv 為黃顏色，extras的試如果添加背景顏色（maindiv 為黃顏色，extrasdiv為紅顏色background- 基于浮動方法的多欄布局練習.doc 第 8 頁 共 9 main：backgrou