CSS

最近經常被問到如何靈活使用css的問題。的確，這是一個好現象。很多人已經開始逐漸的習慣於全面使用css排版，盡量做到展現與內容的分離。但在此習慣的過程中一定會遇到各種棘手的問題。我的一個經驗就是：多查css手冊，多嘗試，多琢磨專家們的網頁，可以將一些頁面另存一下，慢慢分析。好，說正題。經常有這樣一種情況：我想在同一個頁面的不同位置對超連結的風格進行定義，比如，在頁面的導航部分，我不希望有底線，而在其他地方則需要底線。實現的方式總的來說有兩種：1。對在不同的地方的超連結直接使用css內嵌指定，如：

很多人已經開始逐漸的習慣於全面使用css排版，盡量做到展現與內容的分離。但在此習慣的過程中一定會遇到各種棘手的問題。我的一個經驗就是：多查css手冊，多嘗試，多琢磨專家們的網頁，可以將一些頁面另存一下，慢慢分析。好，說正題。經常有這樣一種情況：我想在同一個頁面的不同位置對超連結的風格進行定義，比如，在頁面的導航部分，我不希望有底線，而在其他地方則需要底線。實現的方式總的來說有兩種：1。對在不同的地方的超連結直接使用css內嵌指定，如：。這種方式很明顯，最為強大和靈活。可以做到頁面上的任意一個超連

1、用!important文法解決IE和其它瀏覽器之間的布局差別 　　!important是CSS1定義的文法，作用是提高指定樣式規則的應用優先權。目前IE一不支援這個文法，而其他的瀏覽器則都支援。可以利用這一點來定義不同瀏覽器間的CSS樣式。如下樣式：　　.sidebar{ border:5px dotted #FC5 !important ; border:5px dotted #00F; padding-top:20px; margin:0 auto;}　　IE中瀏覽時候由於它不能夠解釋!

一、padding和margin問題：ul標籤中FF中有個padding值，卻沒有margin值，而在IE中正好相反 。解決方案：將ul的padding和margin都設為0(也可以不是0)如：padding:0;margin:0;list-style:none; 另外form預設在IE中也會有margin值，所以最好也將其margin和padding設為0 。

來自:http://www.cnblogs.com/leavingme/archive/2008/12/03/1347008.html1、如何定義高度很小的容器？ 在IE6下無法定義小高度的容器，是因為有一個預設的行高。 列舉2種解決方案：ovoverflow:hidden ¦ line-height:0 2、圖片下方出現幾像素的空白間隙？

一般我們看到的比如新聞列表，為了使文字不回行，控制字數，會通過程式讓多餘的字元顯示省略符號，我們只使用CSS可以達到同樣的效果，雖然不完美。li {     width:50px;     white-space:nowrap;     text-overflow:ellipsis;     overflow: hidden;     }

一般的文字截斷（適用於內聯與塊）：.text-overflow {display:block;/*內聯對象需加*/width:31em;/*指定寬度*/word-break:keep-all;/* 不換行 */white-space:nowrap;/* 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。不換行 */overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */text-overflow:ellipsis;/* IE

http://www.51css.net/html_css/div_css/2516.html本文介紹常見的瀏覽器BUG，重點針對IE瀏覽器BUG，以及常用的CSS Hack，CSS注釋寫法，希望網友們通過閱讀本文後，在日常的DIV CSS 布局中減少不必要的麻煩； 本文來自網頁之家www.51css.net 擴充閱讀>>>CSS Hack 和向後相容本文來自網頁之家www.51css.net 對於web2.0的過度,請盡量用xhtml格式寫代碼,而且DOCTYPE 影響

在使用DIV+CSS網頁布局中，CSS相容性問題一直困擾著大家，在瀏覽器安全色性未得到解決之前，同志們仍需努力；IE6.0與Firefox之間的相容性解決方案比較容易，但後來出現了IE7，時隔不久微軟又發布了IE8，原來IE6、IE7的hack方法又不能用了，怎麼辦呢？問題既然出現了，我們就要尋找解決的方法： 本文來自網頁之家www.51css.net 第一種方法： 本文來自網頁之家www.51css.net 微軟提供了這樣一個代碼： 本文來自網頁之家www.51css.net

<style>.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}.info:hover {background:#eee;color:#333;}.info span {display:

WINDOWS7， 64位，IIS7.5 建立一個ASP.NET網站，頁面能開啟，但是但布局全亂了，圖片也不顯示。檔案夾明明有很多圖片，但是直接存取檔案夾下的圖片也不顯示，檔案夾下建一個txt檔案測試同樣顯示空白。。。感覺是IIS的問題，但是查來查去都不知道到底是哪個環節出了問題，被折磨了好幾天，問了好多人都不知道怎麼回事，正憂鬱的覺得難道又要重裝的時候，原來。。。。解決方案：在控制台中開啟"開啟或關閉Windows功能"，依次展開"Internet 資訊服務→全球資訊網服務→常見HTTP功能"

文章目錄 初步介紹我們將怎樣來處理?第一步: 建立我們的 Sprite第二步: HTML 程式碼圓形盒模型 1 (藍色)圓形盒模型 2 (綠色) / 圓形盒模型 3 (紫色)模型 4 (紅色邊框)模型 5 (垂直漸層)IE6 版本最後的想法 轉自：http://www.javaeye.com/news/7417-css-sprites-fillet  初步介紹當然，我知道現在有成千上萬個關於 用CSS處理圓角

最近在學ThinkPHP，過程當然不是一番風順，一兩天之後，總算有點感覺了:):我初始化下我的項目目錄結構：------/www/----------/www.myapp.com/-------------------------/myadmin/<!--項目後台-->　　　　　　　　　　　　 /ThinkPHP/<!--TP檔案夾-->                                   /index.php<!--前台入口檔案-->    

文章目錄 Horizontal CSS Menu TutorialsVertical CSS Menu TutorialsOverview 原文:http://www.noupe.com/css/100-great-css-menu-tutorials.html Navigation is such an important part of your website. It’s how your visitors navigate to

我是一個懶人，懶人就是不喜歡搞太複雜的東西。我希望我的部落格比較簡單，一是可以方便撰寫，二是能夠使頁面盡量的小。所以，在貼代碼的時候，我只希望能與本文區分出來，代碼比較多時，能限制大小，並按代碼常用的字型來顯示。其它的功能如文法高亮和程式碼摺疊功能就不需要了。先看看我設定的CSS：.code{ border: 1px solid #ccc; padding: 5px; background: #eee; color:#004080; overflow: auto;

　　有朋友在QQ上問我一個關於CSS的問題，一個產品展示頁，有產品圖片與產品名稱，如何用CSS布局來實現，下面談談我的觀點以及提出我的方法　　從事網頁設計工作的朋友應該有過很多這樣的案例，上面放置企業的產品圖片，下面放置產品的名字，點擊圖片或產品名字可以查看產品的詳細資料。當然，這樣的形式，在其它網站上也經常出現，例片新聞、寫真壁紙站等等。我們看片（可點擊放大）：　　首先我們分析一下，這樣的形式每一組是類似的：上部一個圖片連結，下部一個文字連結，然後重複。進行適應的排列即可。我們可以將它們看作是

 點此下載本書ppt（PowerPoint 2007格式的）點此下載本書源碼原文地址：http://learning.artech.cn/20070430.css-reserch-content-table.html      歡迎您來到前沿視頻教室，下面列出的是“CSS設計徹底研究”頻教程列表。這組視頻教程是配合《CSS設計徹底研究》圖書製作的。我們還會不斷地推出相關的課程， 如果您有興趣，歡迎您常來這裡看一看！CSS核心基礎第0課《CSS設計徹底研究》簡介第1課

1.符號*的使用。IE6，IE7都可以識別*，但IE8和Firefox都識別不了。看以下樣式# wintop{ background: url(body-top.gif) top repeat-x; margin-top:10px;*margin-top:0px;}在IE6和IE7中解釋為離上邊距為0個像素，因為它可以識別*，因而*margin-top:0px覆蓋了上面的10px。而在IE8和Firefox中，由於它不能識別*，所以仍然解釋為離上邊距10個像素。2.*

作者：gnuhpc 出處：http://www.cnblogs.com/gnuhpc/註：本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到W3School（http://www.w3school.com.cn/css/index.asp ）進行系統學習。學習CSS我使用的工具是Visual CSS，可以實現同步預覽，快速學習編輯CSS。1.CSS的作用

Module Agenda（模組列表）　　Selectors　　Combinators　　Color properties　　Text properties　　Box properties 1. Selectors　　type selectors　　.class selectors　　#id selecors　　[attribute] selectors　　　　eg:[data-author=psmith]{color:red;}[data-author$='smith']{color:red;