CSS

網站導航是網站中最重要的元素，是網站提供給使用者的最直接最方便的訪問網站內容的工具。網站導航從形式上主要由橫嚮導航、縱嚮導航、下拉及多級菜單導航第三種形式。 　　橫嚮導航　作為門戶網站的設計而言，主導航一般採用橫嚮導航。由於門戶網站下方文字較多，且每個頻道均有一同的樣式區分，因此在頂部固定一個地區設計統一風格且不佔用過多空間的導航是最理想的選擇，國內大部分門戶均採用這種形式。 　　縱嚮導航　目前在門戶網站的設計中已經不再流行，縱嚮導航更傾向於表達產品分類。 　　下拉導航　主要用於功能複雜的網站。

使用浮動定位方式，從一列到多列的固定寬度及自適應，基本上可以簡單完成，包括三列的固定寬度。而在這裡給我們提出了一個新的要求，希望有一個三列式布局，基中左欄要求固定寬度，並居左顯示，右欄要求固定寬度並居右顯示，而中間欄需要在左欄和右欄的中間，根據左右欄的間距變化自動適應。這給布局提出了一個新的要求，而且單純使用float屬性與百分比屬性並不能夠實現，CSS目前還不支持度百分比的計算精確到考慮左欄和右欄的佔位，如果對中間欄使用100%寬度的話，它將使用瀏覽器視窗的寬度，而非左欄與右欄的中間間距，因此

在一列固定寬度之中，我們使用margi:0px auto;這樣的設定，使一個div得以達到置中顯示，而二列分欄中，需要控制的是左分欄的左邊與右分欄的右邊相等，因此使用margi:0px auto;似乎不能夠達到寧產的效果，這時就需要進行div的嵌套式設計來完成了，可以使用一個置中的div作為容器，鈄二列分欄的兩個div旋轉在容器中，從而實現二列的顯示，結合上面的代碼，新的XHTML代碼結構如下： xmlns="http://www.w3.org/1999/xhtml"> 左列右列

1. Block和inline元素對比 所有的HTML元素都屬於block和inline之一。 block元素的特點是： 總是在新行上開始； 高度，行高以及頂和底邊距都可控制； 寬度預設是它的容器的100%，除非設定一個寬度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。 相反地，inline元素的特點是： 和其他元素都在一行上； 高，行高及頂和底邊距不可改變；

從二列固定寬度入手，開始嘗試二列布局的情況下，左右欄寬度能夠做到自適應，從一列調適型配置中我們知道，設定自適應主要通過寬度的百分比值設定，因此在二列寬度自適應的布局中也同樣是對百分比寬度值的設計，繼續上面的CSS代碼，我們得新定義二列的寬度值： 複製代碼 代碼如下:#left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px;

有了一列固定寬度作為基礎，二列固定寬度就非常簡單，我們知道div用於對某一個地區的標識，而二列的布局，自然需要用到兩個div，XHTML代碼如下： 複製代碼 代碼如下:<div id="left">左列</div> <div id="right">右列</div>

頁面整體置中是網頁設計中最普遍應用的形式，在傳統表格版面配置中，我們使用表格的align="center"屬性來實現，。div本身也支援align="center"屬性，也可以讓div呈現置中狀態，但css布局是為了實現表現和內容的分離，而align對齊屬性是一種樣式代碼，書寫在XHTML的div屬性之中，有違背分享原則（分離可以使你的網站更加利於管理），因此應當css的方法實現內容的置中，我們以固定寬度一列布局代碼為例，為其增加置中的css樣式： 複製代碼 代碼如下:#layout {

在藍色上看到這篇文章的，感覺作者總結的不錯，至少有些偶自己也沒有真正的認識過。這些 東西的確是應該好好總結一下的，可惜偶這人比較懶，收藏整理於此，便於自己學習！ 1.firefox不能對innerText支援。 firefox支援innerHTML但卻不支援innerText，它支援textContent來實現innerText，不過預設把多餘的空格也保留了。如果不用textContent，如果字串裡面不包含HTML代碼也可以用innerHTML代替。 2.禁止選取網頁內容：

在編寫css樣式表的時候常常會碰到一寫瀏覽器安全色的問題，象是不同核心的瀏覽器顯示就不一定相同，不同版本的的瀏覽器也會產生上下相容的問題，如何解決這些問題成了我們苦惱的問題，如果你對css hack技術很瞭解的話，那這就是太簡單不過了，不過對於那些不怎麼解的人來說可真成了他們所苦惱的事。在這就從 趙磊官方部落格 引來一篇文章來介紹相容各個瀏覽器的技巧。但是你也不要認為只要是瀏覽器顯示出現差錯就事瀏覽器的問題，也很可能是你的結構不好，建議你好好去學習一下語義結構，畢竟蓋房子要先搭鋼筋的。

div+css還是比較難搞的，要實現上下兩個div高度自適應感覺麻煩，查了下資料只找到上下高度都是百份比的是可以的，我要實現上面的div是具體像素高度，下面是自適應剩餘的百份比。自己搞了一下還要用上js，不知道是不是很笨，有好的方法請大家帖出來。 <body style=”height:100%; margin:0px; width:100%;”> <div id=”ddii22″ style=” background-color:#ffffff; height:110px;

CSS屬性 - white-space 空白屬性說明 該CSS屬性用來處理空白。 值：normal | pre | nowrap | inherit 可用值 值的說明 normal 預設值。文本自然換行。如果超過元素寬度，內容自然換到下一行。 nowrap 不允許換行。 pre 保留換行和空白。這個值只有當你聲明了!DOCTYPE，且 IE 6 以上版本才支援。 在 HTML 檔案裡，空白，比如分行符號 (line breaks)、 空格 (spaces)、 定位字元

1.若有疑問立即檢測 在出錯時若能對原始代碼做簡單檢測可以省去很多頭痛問題。W3C對於XHTML與CSS 都有偵查工具可用，請見 http://validator.w3.org 。請注意，在檔案開頭的錯誤，可能因為不當的結構等因素造成更多錯誤；我們建議先修正一些最明顯的錯誤之後重新檢測，這樣也許會讓錯誤數量爆減。 2.使用浮動功能時記得適當清除指令 浮動是個危險的功能，未必會產生您所期望的結果。如果您遇到浮動元素延伸到外圍容器的邊框或者其他不正常情況，請先確定您的做法是正確的。請參閱Eric

我們經常把多個CSS或者多個JS並成一個，以節省請求，但是這樣最少還是要兩個。在MSDN的Blog上看到原來也是可以把JS和CSS並在一個檔案裡，那怎樣做呢？利用注釋，先看一下這代碼。 <!-- /* window.onload=function(){ document.getElementById("test2").innerHTML="傳說中滴JS測試者。如果你看到我，那<strong>JS</strong>也生效了"; } <!-- */ <!

一.區分大小寫 當在XHTML中使用CSS，CSS裡定義的元素名稱是區分大小寫。為了避免這種錯誤，我建議所有的定義名稱都採用小寫。 二.不需要給背景圖片路徑加引號 為了節省位元組，我建議不要給背景圖片路徑加引號，因為引號不是必須的。例如： background:url("images/***.gif") #333; 可以寫為 background:url(images/***.gif) #333; 如果你加了引號，反而會引起一些瀏覽器的錯誤。 三.用正確的順序指定連結的樣式

使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則如下： 顏色 16進位的色彩值，如果每兩位的值相同，可以縮寫一半，例如： #000000可以縮寫為#000;#336699可以縮寫為#369; 盒尺寸 通常有下面四種書寫方法: property:value1; 表示所有邊都是一個值value1； property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1

功能：1.圖片可以縮放，外框也隨之變動。2.圖片縮放後，居底對齊。3.滑鼠滑上去，邊框有虛線。結構：原始碼：==================================================================general xhtml 1.0 - Main style sheet - design 2007-05-18Author - ouhee made by 相簿自適應寫法==================================

用js產生任意圓角,下一步就是加入直角導角,圓角導外,外圓角導個,還有邊框處理,陰影產生,還有柔化處理都是以後的重點和痛點. 中工工基 人遙仍失遙士大夫工士大夫花樣百出地苛奪花樣百出地人測試有的我不想信工大師傅苛奪工士大夫花樣百出地模壓 械奪棋栽奪苛奪棋地花樣百出地模壓械奪棋栽奪中工工基 人遙仍失遙士大夫工士大夫花樣百出地苛奪花樣百出地人測試有的我不想信工大師傅苛奪工士大夫花樣百出地模壓 械奪棋栽奪苛奪棋地花樣百出地模壓械奪棋栽奪[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

用表格做網頁排版的時候，一般都能正常使用。偏偏有時會碰到一段連續的英文詞或者一堆驚嘆號(!!!)把網頁就撐開的現象：（ 總結了一下，只要在CSS中定義了如下句子，可保網頁不會再被撐開了。 table{table-layout: fixed;} td(word-break: break-all; word-wrap:break-word;) 注釋一下： 1.第一條table{table-layout: fixed;}，此樣式可以讓表格中有!!!(驚嘆號)之類的字元時自動換行。 2.td{word-

一個Class是用來根據使用者定義的標準對一個或多個元素進行定義的。打個比較恰當的比方就是劇本：一個Class可以定義劇本中每個人物的故事線，你可以通過CSS，Javascript等來使用這個類。因此你可以在一個頁面上使用class="Frodo" ，class="Gandalf"，class="Aragorn"來區分不同的故事線。還有一點非常重要的是你可以在一個文檔中使用任意次數的Class。 　　

瀏覽器安全色問題-CSS Div 最小高度在IE 6 和IE 7中的相容性問題 用CSS 的定義一個DIV的高度時，在IE 7瀏覽器下可以正常顯示。但是在IE 6 中，height 在10px以下就無法定義了。這點跟表格有點類似。解決的方法如下： 法一：定義overflow屬性。比如想定義一個高度為2px 的線條。 <div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>