Time of Update: 2017-02-27
HTML代碼:Example Source Code<div id=”nav”><ul><li class=”menu2″ onMouseOver=”this.className=’menu1′” onMouseOut=”this.className=’menu2′”>我的首頁 <div
Time of Update: 2017-02-27
1,盒解譯器的不同解釋.#box{width:600px; //for ie6.0-width:500px; //for ff+ie6.0}#box{width:600px!important //for ffwidth:600px; //for ff+ie6.0width :500px; //for ie6.0-}2,在ie中隱藏css,使用子選取器html>body #box{ }3,只有ie識別*html #box{
Time of Update: 2017-02-27
腳註(Footnote)是向使用者提供更多資訊的一個最佳途徑,也是主體資訊的一個有效補充,常見於各種印刷書籍中。不過,既然腳註有這些好處,我們當然要在網頁中也加以利用,本文向您介紹了用Javascript和CSS實現腳註效果的方法。Javascript:<script type="text/javascript">// 說明:用 Javascript 和 CSS 實現腳註(Footnote)效果// 作者:CodeBit.cn (
Time of Update: 2017-02-27
<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;"
Time of Update: 2017-02-27
用web標準設計網站,過渡的方法主要是採用XHTML+CSS,css樣式表是必不可少的。這就要求所有網頁設計師必須熟練掌握CSS,如果你以前不常用,那麼現在就開始學習吧。要製作符合web標準的網站,不懂CSS是設計不出漂亮的頁面的。事實上,所有表現的地方都需要用CSS來實現。我們以前都習慣用table來定位和布局,現在要改用DIV來定位和布局。這是思維方式的變化,一開始有些不習慣。呵呵,任何變革都會有阻力的,為了享受標準帶來的"益處",放棄一些老的傳統做法是值得的。外部調用樣
Time of Update: 2017-02-27
這一效果的主要屬性為:overflow。值:hidden!這樣就可以實現了!例如:width:300px;height:150px;overflow:hidden;表格寬300,高150。當表格中的內容超過這一設定值時,則自動隱藏!樣本如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Time of Update: 2017-02-27
您正在學習WEB標準CSS網頁布局嗎?是不是還不能完全掌握純CSS布局?通常有兩種需要您特別注意:第一種可能是你還沒有理解CSS處理頁面的原理。在你考慮你的頁面整體表現效果前,你應當先考慮內容的語義和結構,然後再針對語義、結構添加CSS。這篇文章將告訴你應該怎樣把HTML結構化。另一種原因是你對那些非常熟悉的表現層屬性束手無策。例如:cellpadding,、hspace、align="left"等等,不知道該轉換成對應的什麼CSS語句。當你解決了第一種問題,知道了如何結構化
Time of Update: 2017-02-27
今天要講的內容是如何?“首字下沉”,,第一個字是很大的紅色楷體,陷於一段文字之首。這種做法在雜誌中常見,但是在網頁中不那麼常見。那麼如何?呢?其實很簡單,只有一句CSS就可以了。Selector:first-letter {font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0;
Time of Update: 2017-02-27
CSS代碼更清晰高效的一些經驗是許多網頁製作者與開發人員都關心的問題。但是大概沒有什麼魔法,可以保證一下就把你的樣式表縮小到百分之多少,合理的CSS 編碼與組織技巧,的確能夠協助你的更有效率地寫出更清晰高效的代碼,自然CSS樣式表大小的縮減還能減少下載的時間。一、排版:1、關鍵詞和操作符之間加適當的空格。2、相對獨立的程式塊與塊之間加空行3、較長的語句、運算式等要分成多行書寫。4、劃分出的新行要進行適應的縮排,使排版整齊,語句可讀。5、長運算式要在低優先順序操作符處劃分新行,操作符放在新行之首。
Time of Update: 2017-02-27
以前我們面對這些有著順序或是有數字註明排序的內容時大多是在資料前自行加上一個數值,或是由程式加上這個數值。而如果使用有序列表則不需要這麼麻煩,根本不用自行去填寫序數,當單層列表的時候這種特性似乎並不明顯,而當使用多層的時候其特性就很明顯了。那麼還是先來瞭解一下有序列表的代碼形式:<ol><li>這就是列表的內容了,這是第一句</li><li>這就是列表的內容了,這是第二句</li><li>這就是列表的內容了,這是第三句<
Time of Update: 2017-02-27
CSS代碼簡化在工作中是非常有益的,也是必要的。在編寫CSS代碼時,經常會出現冗餘的代碼,為了提高代碼的品質及檔案壓縮到最小,使代碼具有可讀性,不得不把CSS代碼簡化。下面用一些比較常用的屬性來做樣本。marginmargin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;代碼簡化為:margin:1pxmargin-top:1px;margin-right:2px;margin-bottom:1px;margin-left
Time of Update: 2017-02-27
最小高度可以設定一個BOX的最小高度,當其內容較少時時,也能保持BOX的高度為一定,超出就自動向下延伸,但到目前為止,只有Opera 和 Mozilla 支援,IE7開始也支援了,但IE7處於測試階段,等正式版發布到普及需一段也許比較長的時間,除非MS把它捆綁在某個作業系統上,如何在現有基礎上(IE6
Time of Update: 2017-02-27
大家在編寫CSS的時候可能認為記事本並不是最棒的,有什麼css編輯工具可以提高我們編碼的效率呢?TopStyle是我一直用的CSS編輯工具,最開始就是瞎用也沒有仔細研究過,不過後來把裡面的功能仔細看了看發現它的功能真是太強大了!在這裡分享一下使用經驗,我在編輯CSS時常用的快速鍵:文字注釋:Shift+Ctrl+M向右縮排:Shift+Ctrl+.負值縮排:Shift+Ctrl+,下一個CSS:Ctrl+]上一個CSS:Ctrl+[選顏色:Shift+Ctrl+C儲存以後不能撤銷(Ctrl+Z)
Time of Update: 2017-02-27
即使在DIV滿天飛的今天,Table在網頁的布局中還是少不了的,因為當需要輸出資料時,Table布局遠遠比DIV布局有優勢,而且同樣的我們可以通過CSS來控製表格樣式。要知道WEB標準並非是通篇的DIV+CSS,而是倡導採用更合理的語義標籤來進行布局。文字的對齊一直是排版的重中之重,特別是對於資料顯示來說,如何才能讓眾多的資料的可讀性更強可識別性更高呢?先來看錶格一的文字對齊,這無疑是最失敗的對齊。表格標題<th />標籤內容預設是置中對齊的,可是當把<td
Time of Update: 2017-02-27
目前,我們要在網頁中使用圓角效果,總是通過切圖然後嵌套很多div,用背景來實現圓角效果。對於前端開發工程師來說,圓角的確是一個讓人又愛又恨的東西,一方面顧及設計師追求的美觀效果,另一方面又不得不增添很多工作投入。無意中看到別人寫的一個用純粹css來實現的圓角效果,研究了一下發現對於那些需求比較簡單的圓角效果還是一種很好的方法。總結了一下,可以實現自適應的純css圓角效果。首先,我們看一下一般圓角的結構:從下圖可以明顯看出圓角和直邊的關係,其實把圓角放大之後可以看到圓角是由像素化的直邊組成的:於是
Time of Update: 2017-02-27
不同瀏覽器對於相同元素的預設樣式並不一致,這也是為什麼我們在CSS的最開始要寫 * {padding:0;marging:0};不過現在說的可不只是這些。基本上,不同核心的兩個瀏覽器在某些元素的表現都會存在差異,比如縮排的大小、字型選擇、字元樣式等。也許一個很漂亮的CSS樣式表在一個瀏覽器上表現良好,在另外一個瀏覽器上即使是沒有CSS
Time of Update: 2017-02-27
有序無序單標籤很簡單,只要知道用法就行,但是關鍵點我認為不在於知道這個標籤長什麼樣,重點是在於什麼樣的資料適合使用什麼樣的列表。什麼樣的資料是有序的,什麼樣的資料是無序的?閱讀完要思考,這樣才能學到東西,知識才能是自己的。定義列表其形式特別,用法也很特別,相比較無序列表來說用到定義列表的就少很多。也有很多朋友還沒有開始使用這個列表,那麼下面就來分解一下這個列表的代碼:<dl><dt></dt><dd></dd></dl>看上
Time of Update: 2017-02-27
1、導覽功能表使用圖片、FLASH導覽功能表使用圖片、FLASH當然比純文字來得好看一些,但是搜尋引擎並不認識你的圖片和FLASH。如果你非要使用漂亮的圖片來做導航的話,可以使用背景替換的方法(我會在下次談到這一個方法的);如果你要使用FLASH做導航,那我就沒你辦法了。建議做一個導覽功能表連結的xml文提交到搜尋引擎。2、不恰當地使用圖片為了網頁美觀,經常會到處貼滿圖片,這樣做是不正確的,與內容無關的圖片能少就少吧。我們可以把這些圖片做成容器的背景。3、內容裡特殊字型的運用我承認楷體很漂亮,草
Time of Update: 2017-02-27
關於CSS Sprites技術的最佳化我們能做到多少,能減多少的請求數量。這並且不是單方面能做到的,一切取決於XHTML、CSS、CSS Sprites圖片之間的配合。現時為止沒有絕對最佳化的做法,這也是我在項目中經常衡量CSS
Time of Update: 2017-02-27
div+css布局中段落使用<p>標籤,對於段落的上下左右的空白(縮排)可以使用margin標籤定義樣式。margin有上、下、左、右四個方向的定義,正常情況下,我們可以用一行來描述我們需要的樣式。例如:margin: 20px 8px 8px